用mpvue寫個(gè)玩意兒玩玩

lauren_liuling 發(fā)布于2019-08-22 16:32 / 560人閱讀

摘要：微信開發(fā)工具僅用于調(diào)試。下面可以配置一個(gè)微信小程序的參數(shù)，文件就是我們要編輯的頁(yè)面了。補(bǔ)充一下，調(diào)用之后獲取了經(jīng)緯度之后，還可以玩玩微信的組件。試著用微信寫一個(gè)組件。

下周公司要搞黑客馬拉松了，組里可能會(huì)做個(gè)小程序。然后看到了mpvue感覺還不錯(cuò)，于是就打算試試水。用vue寫小程序聽上去美滋滋。
那么先開始吧！

全局安裝 vue-cli

$ npm install --global vue-cli

創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目

$ vue init mpvue/mpvue-quickstart my-project

安裝依賴

$ cd my-project
$ npm install

啟動(dòng)構(gòu)建

$ npm run dev

這樣子就Okay了。跑起來之后，在微信開發(fā)工具里新建項(xiàng)目，選擇my-project下的dist目錄

然后確定，你就能看到你的小程序已經(jīng)可以運(yùn)行了。項(xiàng)目請(qǐng)用別的編輯去編輯，vscode和atom都可以。微信開發(fā)工具僅用于調(diào)試。

我在pages下面新建了一個(gè)todolist和weather頁(yè)面。每個(gè)目錄下都有一個(gè).vue文件和一個(gè)main.js文件。main.js下面可以配置一個(gè)微信小程序的參數(shù)，vue文件就是我們要編輯的頁(yè)面了。

在打開src/main.js文件，在pages字段上加上我們剛剛創(chuàng)建的兩個(gè)頁(yè)面的路徑。

接下來在src/components下創(chuàng)建一個(gè)組件我叫他todo-list.vue
代碼如下，自己瞎幾把寫寫的，各種div和css請(qǐng)不要在意，名字也取得不好。

src/components/todo-list.vue

寫完了組件，再寫src/pages/todolist/index.vue

src/pages/todolist/index.vue

這里我用wx.getStorageSync存儲(chǔ)了todolist的數(shù)據(jù)。

接下來我們?cè)賹懸粋€(gè)weather組件和weather頁(yè)面吧，名字被我取的一樣，罪過。

src/components/weather.vue

src/pages/weather/index.vue

這里用到的接口

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

大家去www.seniverse.com自己注冊(cè)一個(gè)就可以了。
這里我們現(xiàn)在用wx.getLocation獲取地理位置，我們會(huì)用到經(jīng)緯度。然后再wx.request()去調(diào)接口獲取天氣數(shù)據(jù)。
你以為這樣就完了，事情不是這樣的。我們還要在小程序官網(wǎng)上填寫服務(wù)器域名。如下圖

最后我們可以把這兩個(gè)page用起來了

我們?cè)趕rc/pages/index/index.vue下加上兩個(gè)按鈕

methods里寫上頁(yè)面跳轉(zhuǎn)的方法。


export default {
    methods: {
        onTodo() {
          const url = "../todolist/main"
          wx.navigateTo({url})
        },
        onWeather() {
          const url = "../weather/main"
          wx.navigateTo({url})
        },
    }
}

到此結(jié)束。原諒我不會(huì)寫flex布局，不會(huì)寫小程序，樣子慘不忍睹?。
補(bǔ)充一下，調(diào)用wx.getLocation()之后獲取了經(jīng)緯度之后，還可以玩玩微信的map組件。試著用微信map寫一個(gè)vue組件。

另外還可以玩玩微信的camera和canvas組件。
以下是一些小細(xì)節(jié)
新增的頁(yè)面不會(huì)添加進(jìn)webpack的 entry，需要重新?npm run dev。
總體上來說用mpvue寫小程序，可玩性還是挺高的。vue我也是這兩天剛剛現(xiàn)學(xué)現(xiàn)賣的，還不大會(huì)寫。
學(xué)完vue之后，在不了解小程序的情況下，你看就可以寫出點(diǎn)玩意兒來了。還是挺不錯(cuò)的吧。大大降低了學(xué)小程序那一套東西的成本。