用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以後，在不瞭解小程序的狀況下，你看就能夠寫出點玩意兒來了。仍是挺不錯的吧。大大下降了學小程序那一套東西的成本。