微信小程序 使用mpvue


最近開發了一個微信小程序,由於之前不了解,在開發過程中遇到了一些坑,在這里總結一下.

開發之前首先要准備一下,你要確定你安裝了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文件如下

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM