用mpvue写个玩意儿玩玩

下周公司要搞黑客马拉松了，组里可能会作个小程序。而后看到了mpvue感受还不错，因而就打算试试水。用vue写小程序听上去美滋滋。
那么先开始吧！

全局安装 vue-cli

$ npm install --global vue-cli

建立一个基于 mpvue-quickstart 模板的新项目

$ vue init mpvue/mpvue-quickstart my-project

安装依赖

$ cd my-project
$ npm install

启动构建

$ npm run dev

这样子就Okay了。跑起来以后，在微信开发工具里新建项目，选择my-project下的dist目录

而后肯定，你就能看到你的小程序已经能够运行了。项目请用别的编辑去编辑，vscode和atom均可以。微信开发工具仅用于调试。

我在pages下面新建了一个todolist和weather页面。每一个目录下都有一个.vue文件和一个main.js文件。main.js下面能够配置一个微信小程序的参数，vue文件就是咱们要编辑的页面了。

在打开src/main.js文件，在pages字段上加上咱们刚刚建立的两个页面的路径。

接下来在src/components下建立一个组件我叫他todo-list.vue
代码以下，本身瞎几把写写的，各类div和css请不要在乎，名字也取得很差。

src/components/todo-list.vue
<template>
  <div class='container'>
    <h3>{{say}}</h3>
    <div>
        <div class='userinfo'>
            <input type="text" v-model='value' placeholder="请输入" class='input'>
            <div @click='handleClick' class='button'>Add</div>
        </div>
      <ul>
          <li v-for='(item, index) in items' v-bind:key='index'>
              <span @click='handleToggle(index)' v-bind:class='{done: item.completed}' class='item'>{{index + 1}}、{{item.name}}</span>
              <div @click.prevent='handleRemove(index)' class='button'>remove</div>
          </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
    }
  },
  props: ['say', 'items'],
  methods: {
    handleClick() {
        if (this.value) {
            this.$emit('addTodo', this.value)
            this.value = ''
        }
    },
    handleToggle(index) {
        this.$emit('toggleItem', index)
    },
    handleRemove(index) {
        this.$emit('removeItem', index)
    }
  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.done {
    color: red;
    text-decoration: line-through;
}
.item {
    font-size: 40rpx;
    line-height: 100rpx;
    display: inline-block;
    height: 100rpx;
    width: 550rpx;
}
.button {
    width: 160rpx;
    display: inline-block;
    height: 70rpx;
    font-size: 40rpx;
    background: #ccc;
    border-radius: 20rpx;
    text-align: center;
}
.input {
    display: inline-block;
    padding: 0 12px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
}
</style>

写完了组件，再写src/pages/todolist/index.vue

src/pages/todolist/index.vue
<template>
  <div>
    <todolist v-on:addTodo='saveValue' v-on:toggleItem='toggleItem' v-on:removeItem='removeItem' v-bind='motto'></todolist>
  </div>
</template>

<script>
import todolist from '@/components/todo-list.vue'

export default {
  data () {
    return {
      motto: {
        say: 'Hello',
        items: wx.getStorageSync('items') || [],
      },
    }
  },
  components: {
    todolist,
  },
  methods: {
    saveValue(val) {
      this.motto.items.push({
        name: val,
        completed: false,
      })
      wx.setStorageSync('items', this.motto.items)
    },
    toggleItem(index) {
      this.motto.items[index].completed = !this.motto.items[index].completed
      wx.setStorageSync('items', this.motto.items)
    },
    removeItem(index) {
      this.motto.items.splice(index, 1)
      wx.setStorageSync('items', this.motto.items)
    }
  }
}
</script>

<style scoped>

</style>

这里我用wx.getStorageSync存储了todolist的数据。

接下来咱们再写一个weather组件和weather页面吧，名字被我取的同样，罪过。

src/components/weather.vue
<template>
  <div>
    My Weather~
    <div>{{weather.location.path}}</div>
    <div>{{weather.now.text}}-{{weather.now.temperature}}摄氏度</div>
    <div>穿衣：{{suggestion.dressing.brief}}</div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            weather: {
                location: {
                },
                now: {},
                last_update: '',
            },
            suggestion: {
                dressing: {}
            },
        }
    },
    methods: {
        setWeather(data) {
            this.weather = data
        },
        setSuggestion(data) {
            this.suggestion = data
        }
    },
    mounted() {
        var self = this
        wx.getLocation({
            success(data) {
            console.log('location', data)
            let {latitude, longitude} = data;
            let location = `${latitude}:${longitude}`
            wx.request({
                url: `https://api.seniverse.com/v3/weather/now.json?key=123456789&location=${location}&language=zh-Hans&unit=c`,
                success(res) {
                    console.log('weather', res)
                    let {location, now, last_update} = res.data.results[0]
                    self.setWeather({location, now, last_update})
                }
            })
            wx.request({
                url: `https://api.seniverse.com/v3/life/suggestion.json?key=123456789&location=${location}&language=zh-Hans`,
                success(res) {
                    console.log('生活指数', res)
                    let {suggestion} = res.data.results[0]
                    self.setSuggestion(suggestion)
                }
            })
            } 
        })
    }
}
</script>

<style scoped>

</style>

src/pages/weather/index.vue
<template>
  <div>
    <weather></weather>
  </div>
</template>

<script>
import weather from '../../components/weather'

export default {
  data () {
    return {
      
    }
  },
  components: {
      weather,
  },
  methods: {

  }
}
</script>

<style scoped>

</style>

这里用到的接口

https://api.seniverse.com/v3/...${location}&language=zh-Hans&unit=c

你们去www.seniverse.com本身注册一个就能够了。
这里咱们如今用wx.getLocation获取地理位置，咱们会用到经纬度。而后再wx.request()去调接口获取天气数据。
你觉得这样就完了，事情不是这样的。咱们还要在小程序官网上填写服务器域名。以下图

最后咱们能够把这两个page用起来了

咱们在src/pages/index/index.vue下加上两个按钮

<template>
    <button @click='onTodo'>Todo</button>
    <button @click='onWeather'>Weather</button>
</template>

methods里写上页面跳转的方法。

<scirpt>
export default {
    methods: {
        onTodo() {
          const url = '../todolist/main'
          wx.navigateTo({url})
        },
        onWeather() {
          const url = '../weather/main'
          wx.navigateTo({url})
        },
    }
}
</script>

到此结束。原谅我不会写flex布局，不会写小程序，样子惨不忍睹?。
补充一下，调用wx.getLocation()以后获取了经纬度以后，还能够玩玩微信的map组件。试着用微信map写一个vue组件。

<map name="location" v-bind:latitude='location.latitude' v-bind:longitude='location.longitude'></map>

另外还能够玩玩微信的camera和canvas组件。如下是一些小细节新增的页面不会添加进webpack的 entry，须要从新 npm run dev。整体上来讲用mpvue写小程序，可玩性仍是挺高的。vue我也是这两天刚刚现学现卖的，还不大会写。学完vue以后，在不了解小程序的状况下，你看就能够写出点玩意儿来了。仍是挺不错的吧。大大下降了学小程序那一套东西的成本。