最近開發了一個微信小程序,由於之前不了解,在開發過程中遇到了一些坑,在這里總結一下.
開發之前首先要准備一下,你要確定你安裝了node , 可以使用node -v 看下當前電腦是否安裝成功
一、基礎使用
1.安裝全局vue-cli
npm install --global vue-cli@2.9
2.創建一個mpvue-quickstart模板的新項目
vue init mpvue/mpvue-quickstart project
3.安裝依賴
cd project
npm install
npm run dev
成功后可以看到以下文件夾
主要介紹src目錄和static 目錄 static 目錄主要放靜態文件
src目錄下有
pages 主要用於寫view ,compontents 寫template,utils寫public js
pages下邊寫view ,一般的文件結構都是類似 index.vue main.js main.json 這樣的三個文件,
index.vue 寫我們的vue文件,mpvue 支持大多數的vue語法,例如
具體支持什么不支持什么:http://mpvue.com/mpvue/#_9 請傳送致官網
main.js :暴露index.vue 文件
main.json 寫配置文件
強調一點:每創建一個文件,請重新運行下npm run dev ,這個算是mpvue的大坑吧,很不人性化
二、使用微信api
1.首先導出wx
然后在需要的頁面使用
以下有幾個使用的例子
例子一:使用騰訊地圖
步驟一。點擊微信公眾號平台,登陸上去,點擊‘設置’ 在設置里選擇‘第三方設置’ 選擇‘插件管理’
然后選擇騰訊地圖,如下
點開詳情,有路線插件說明文檔
以上截圖可以直接訪問微信小程序平台查看
步驟二:寫map目錄,在這個目錄下寫三個文件:index.vue 文件 main.js 文件 main.json 文件
首先是配置:在app.json 中寫:
然后寫main.json 文件
main.js
index.vue
由於我這里寫的是導航,因此我要先獲取本地地址;
如下;首先要在app.json 文件寫一些東西
接下來是indx.vue 文件
wx.getLocation是獲取當前的地理位置、速度。當用戶離開小程序后,此接口無法調用
整個index.vue文件如下