用mpvue寫個玩意兒玩玩

HackerShell 發布于2019-08-02 10:13 / 469人閱讀

摘要：微信開發工具僅用于調試。下面可以配置一個微信小程序的參數，文件就是我們要編輯的頁面了。補充一下，調用之后獲取了經緯度之后，還可以玩玩微信的組件。試著用微信寫一個組件。

下周公司要搞黑客馬拉松了，組里可能會做個小程序。然后看到了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

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

src/pages/todolist/index.vue

這里我用wx.getStorageSync存儲了todolist的數據。

接下來我們再寫一個weather組件和weather頁面吧，名字被我取的一樣，罪過。

src/components/weather.vue

src/pages/weather/index.vue

這里用到的接口

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

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

最后我們可以把這兩個page用起來了

我們在src/pages/index/index.vue下加上兩個按鈕

methods里寫上頁面跳轉的方法。


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

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

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

GPU云服務器云服務器用java寫個日歷用 Java 寫個塔防游戲「GitHub mpvue 玩意兒

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52209.html

用mpvue寫個玩意兒玩玩

摘要：微信開發工具僅用于調試。下面可以配置一個微信小程序的參數，文件就是我們要編輯的頁面了。補充一下，調用之后獲取了經緯度之后，還可以玩玩微信的組件。試著用微信寫一個組件。下周公司要搞黑客馬拉松了，組里可能會做個小程序。然后看到了mpvue感覺還不錯，于是就打算試試水。用vue寫小程序聽上去美滋滋。那么先開始吧！全局安裝 vue-cli $ npm install --global vu...

lauren_liuling 2019-08-22 16:32 評論0 收藏0
用mpvue寫個玩意兒玩玩

摘要：微信開發工具僅用于調試。下面可以配置一個微信小程序的參數，文件就是我們要編輯的頁面了。補充一下，調用之后獲取了經緯度之后，還可以玩玩微信的組件。試著用微信寫一個組件。下周公司要搞黑客馬拉松了，組里可能會做個小程序。然后看到了mpvue感覺還不錯，于是就打算試試水。用vue寫小程序聽上去美滋滋。那么先開始吧！全局安裝 vue-cli $ npm install --global vu...

miguel.jiang 2019-08-29 15:05 評論0 收藏0
關于開發的一些思考

摘要：畢業了差不多半年了，參加工作也有一年多，回顧一下生活，對自己做一些思考。特別是出來了之后，越發的感覺到做程序開發單個人的能力的有限，有再好的想法，靠一個人是實現不了的，而也因此覺得做開發的反而沒多少地位感，也沒太多成就感。畢業了差不多半年了，參加工作也有一年多，回顧一下生活，對自己做一些思考。大四的時候，在佛山工作，忙活了一年，基本上天天都是在加班中度過的，造成了現在想到加班兩個字...

weknow619 2019-08-19 17:09 評論0 收藏0
關于開發的一些思考

摘要：畢業了差不多半年了，參加工作也有一年多，回顧一下生活，對自己做一些思考。特別是出來了之后，越發的感覺到做程序開發單個人的能力的有限，有再好的想法，靠一個人是實現不了的，而也因此覺得做開發的反而沒多少地位感，也沒太多成就感。畢業了差不多半年了，參加工作也有一年多，回顧一下生活，對自己做一些思考。大四的時候，在佛山工作，忙活了一年，基本上天天都是在加班中度過的，造成了現在想到加班兩個字...

aervon 2019-08-28 18:25 評論0 收藏0
關于開發的一些思考

摘要：畢業了差不多半年了，參加工作也有一年多，回顧一下生活，對自己做一些思考。特別是出來了之后，越發的感覺到做程序開發單個人的能力的有限，有再好的想法，靠一個人是實現不了的，而也因此覺得做開發的反而沒多少地位感，也沒太多成就感。畢業了差不多半年了，參加工作也有一年多，回顧一下生活，對自己做一些思考。大四的時候，在佛山工作，忙活了一年，基本上天天都是在加班中度過的，造成了現在想到加班兩個字...

microcosm1994 2019-06-27 11:45 評論0 收藏0