前言
16年小程序剛出來的時候，就准備花點時間去學學。無奈現實中手上項目太多，一個接着一個，而且也沒有開發小程序的需求，所以就一拖再拖。
直到上周，終於有一個小程序的項目。如果現在學小程序，時間上肯定來不及了（就給了一周的時間）。正好前段時間看到美團開源了一個使用vue來開發微信小程序的框架 mpvue。因為平時vue用的多，所以就決定使用 mpvue 來開發。
mpvue 介紹
我們看一下mpvue官網上的介紹：
mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套 Vue.js 開發體驗。
mpvue 優勢
- 徹底的組件化開發能力：提高代碼復用性
- 完整的 Vue.js 開發體驗
- 方便的 Vuex 數據管理方案：方便構建復雜應用
- 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
- 支持使用 npm 外部依賴
- 使用 Vue.js 命令行工具 vue-cli 快速初始化項目
- H5 代碼轉換編譯成小程序目標代碼的能力
開發過程
通過 Vue.js 命令行工具 vue-cli，你只需在終端窗口輸入幾條簡單命令，即可快速創建和啟動一個帶熱重載、保存時靜態檢查、內置代碼構建功能的小程序項目：
# 創建一個基於 mpvue-quickstart 模板的新項目
$ vue init mpvue/mpvue-quickstart my-project
# 安裝依賴
$ cd my-project
$ npm install
# 啟動構建
$ npm run dev
接下來，你只需要啟動微信開發者工具，引入項目即可預覽到你的第一個 mpvue 小程序。
下面是一個項目目錄結構。
和開發vue完全一樣，不過需要注意的是，小程序不支持dom操作，所以vue中的 ref 也不能使用。
其它基礎可以看mpvue官網，上面有詳細的使用說明。下面主要說一個在開發過程中遇到的坑。
mpvue開發中遇到的問題
1.路由跳轉
vue中 使用 vue-router 來進行路由跳轉的。mpvue中只需要用 a 標簽就行了。
<a href="/page/counter/main?text=123">
同時也可以使用小程序自身提供的api完成頁面跳轉
wx.navigateTo({
url: `/pages/counter/main?text=${this.text}`
});
2.input框光標位置
在input輸入框內輸入內容時，當我想修改前面已經輸入好的文字，把光標移動到需要修改的位置。
修改完之后，光標自動跑到最后了，這樣給用戶體驗不好。
<input type="text" v-model="text">
可以使用 v-model.lazy 但是 lazy 在輸入框失去焦點時才能觸發。可以使用setTimeout來延遲執行。
<input type="text" v-model.lazy="text">
setTimeout(() => {
...
let ipt = this.text;
...
},100)
這樣就能解決了。
3.彈出層滾動穿透
寫了一個簡單的彈窗，發現滾動彈出層里的內容，后面的內容也跟着滾動。開始以為阻止冒泡就行了。結果試了一下，還是不行。在 issues 里看到別人提供的解決辦法，試了一下，可以用。
<scroll-view :scroll-y="scroll" style="height:200px" scroll-with-animation="true">
.....
<-- 彈出層 -->
<div class="layer">
....
</div>
</scroll-view>
點擊彈窗按鈕時，把 scroll 設置為 false。 點擊關閉按鈕時，再把 scroll 設置為true 。同時設置body的樣式
body{
overflow-y: hidden;
height: 100%;
}
4.引入echarts 打包后文件過大
項目中需要引入echarts,直接引入后，打包完體積超過 2M了，沒辦法提交。echarts提供的有精簡版本，我們可以導入精簡的版本。
import echarts from "echarts/dist/echarts.simple.min";
import mpvueEcharts from "mpvue-echarts";
具體的 echarts 使用，請看文檔，有詳細的介紹。
5.頁面加載生命周期
當從一個頁面跳轉到另一個頁面時，我們在新頁面不能使用created來初始化獲取接口返回的內容。
因為小程序首次加載會把所以頁面的created都執行。
我們可以使用下面方法
async onLoad() {
....
}
結束語
如果之前使用過vue，那么使用mpvue來開發小程序上手非常快，基本上可以無縫對接。
mpvue目前還是有坑的，不過后面迭代的版本功能會越來越完善。