使用mpvue開發微信小程序

前言

16年小程序剛出來的時候，就準備花點時間去學學。無奈現實中手上項目太多，一個接着一個，並且也沒有開發小程序的需求，因此就一拖再拖。

直到上週，終於有一個小程序的項目。若是如今學小程序，時間上確定來不及了（就給了一週的時間）。正好前段時間看到美團開源了一個使用vue來開發微信小程序的框架 mpvue。由於平時vue用的多，因此就決定使用 mpvue 來開發。

mpvue 介紹

咱們看一下mpvue官網上的介紹：

mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。

mpvue 優點

1. 完全的組件化開發能力：提升代碼複用性
2. 完整的 Vue.js 開發體驗
3. 方便的 Vuex 數據管理方案：方便構建複雜應用
4. 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
5. 支持使用 npm 外部依賴
6. 使用 Vue.js 命令行工具 vue-cli 快速初始化項目
7. 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目前仍是有坑的，不事後面迭代的版本功能會愈來愈完善。