npmvue構建微信小程式
原文連結：https://www.cnblogs.com/zhouyangla/p/9000879.html
前言
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目前還是有坑的，不過後面迭代的版本功能會越來越完善。