微信小程序 - mpvue踩坑記

作為一個vue深度使用者，如何高效開發(fā)小程序的同時又能方便原vue項目代碼的維護？經(jīng)過一段時間的調(diào)研，決定踩踩mpvue的坑。

框架介紹

小程序框架主要分為視圖層和邏輯層，核心是一套響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，另外還包括基礎(chǔ)組件、頁面管理、微信JS API幾部分，如下圖所示：


框架圖解

mpvue是一個使用 Vue.js 開發(fā)小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現(xiàn)，使其可以運行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗。


mpvue原理

初始化

首先二話不說，打開命令行工具，參照mpvue官方的指導(dǎo)流程，初始化一個mpvue項目

# 全局安裝 vue-cli
$ npm install -g vue-cli

# 創(chuàng)建一個基于 mpvue-quickstart 模板的新項目
$ vue init mpvue/mpvue-quickstart my-project

# 安裝依賴
$ cd my-project
$ npm install
# 啟動構(gòu)建
$ npm run dev

接下來，打開微信開發(fā)者工具，引入my-project項目即可預(yù)覽到你的第一個 mpvue 小程序。(如下圖)


預(yù)覽.png

哈哈，瞬間有點小成就感有木有！

自定義配置

ps：以下配置不需要都操作，根據(jù)自己實際業(yè)務(wù)需求進行取舍。

mpvue-loader版本控制

鎖定版本,以免官方升級導(dǎo)致出現(xiàn)問題

# package.json 把1.1.2前面的^符號去掉即可鎖定版本
"mpvue": "1.0.11"
"mpvue-template-compiler": "1.0.11"
"mpvue-loader": "^1.1.2"

安裝less

用過的人都說好

$ npm install less less-loader --save

封裝request請求

// 封裝request請求
import { host } from './config'
import $loading from './loading'
import $toast from './toast'

function request(url, method, data) {
  $loading.show()

  let baseURL = host
  if ((url.indexOf('http://') > -1) || (url.indexOf('https://') > -1)) {
    baseURL = ''
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseURL + url,
      method,
      data,
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          $toast.text('服務(wù)器開小差了，請稍后再試')
          reject(false)
        }
      },
      fail: function (error) {
        console.log(error)
        $toast.text('您的網(wǎng)絡(luò)好像不太給力，請稍后再試')
        reject(false)
      },
      complete: function () {
        $loading.hide()
      }
    })
  })
}

export function get(url, data) {
  return request(url, 'GET', data)
}

export function post(url, data) {
  return request(url, 'POST', data)
}

在main.js中配置全局屬性，就可以在項目中直接使用this.$post來請求了

import { get, post } from '@/utils/http'
Vue.prototype.$post = post
Vue.prototype.$get = get

安裝路由工具

按照官方教程初始化項目后，每個頁面都要配置main.js 文件作為頁面入口，新增頁面需要重新npm run dev，特別的繁瑣。
我們可以使用以下兩個插件，從而實現(xiàn)像vue-router一樣的寫法

  • mpvue-entry : 集中式頁面配置，自動生成各頁面的入口文件，優(yōu)化目錄結(jié)構(gòu)，支持新增頁面熱更新
  • mpvue-router-patch: 在 mpvue 中使用 vue-router 兼容的路由寫法
  1. 安裝依賴
$ npm install mpvue-entry --save-dev
$ npm install mpvue-router-patch --save

  1. src目錄下新增router文件夾及index.js


    新增router

  2. 修改 webpack.base.conf.js

// const appEntry = { app: resolve('./src/main.js') }
// const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')
// const entry = Object.assign({}, appEntry, pagesEntry)
const MpvueEntry = require('mpvue-entry')
const entry = MpvueEntry.getEntry('./src/router/index.js')
let baseWebpackConfig = {
  entry
  ...
}

plugins: [
  new MpvueEntry()
  ...
]

// 官方模板生成的項目請務(wù)必去除以下配置
plugins: [
  new CopyWebpackPlugin([{
    from: '**/*.json',
    to: ''
  }], {
    context: 'src/'
  })
]
  1. 在main.js引入mpvue-router-patch 
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'
Vue.use(MpvueRouterPatch)
  1. 配置router.js 
module.exports = [
  {
    path: 'pages/index/index', // 頁面路徑，同時是 vue 文件相對于 src 的路徑，必填
    config: { // 頁面配置，即 page.json 的內(nèi)容，可選
      navigationBarTitleText: '我是標(biāo)題'
    }
  }
]

安裝mpvue-wxparse

適用于mpvue的微信小程序富文本解析組件

$ npm install mpvue-wxparse --save

用法如下:

<template>
  <div class="">
    <wxParse :content="content" />
  </div>
</template>

<script>
import wxParse from "mpvue-wxparse"
export default {
  components: {
    wxParse
  },
  data () {
    return {
      content: ''
    }
  }
}
</script>

<style lang="less" scoped>
@import url("~mpvue-wxparse/src/wxParse.css");
</style>

項目總結(jié)

注意事項

開發(fā)前應(yīng)認(rèn)真閱讀mpvue 官方文檔，這邊介紹了mpvue支持的vue寫法，當(dāng)然啦，也不用完全記住，先有個大概印象，在實際項目開發(fā)中，有助于快速定位問題。
下面介紹需要特別注意的地方，請大家牢記：

  • created：所有頁面的created會在小程序加載的時候一起執(zhí)行，進入頁面的時候不會再被調(diào)用，建議用onLoad代替
  • mounted：如果從頁面B返回到頁面A，頁面A的mounted鉤子不會被觸發(fā)，因為頁面沒有重新加載。如果有需要每次頁面展示都要調(diào)用的邏輯，使用onShow代替
  • background-image：引用圖片時，選擇遠(yuǎn)程cdn圖片，或者相對路徑目錄下小于8k的圖片(webpack限制)
  • 列表渲染時需增加索引
  • 支持小程序的原生組件，但是原生組件上的事件綁定，需要以 vue 的事件綁定語法來綁定
    例如：bindinput事件需要寫為@input
  • 使用雙向綁定建議使用 v-model.lazy 綁定方式以優(yōu)化性能，此外 v-model 在老基礎(chǔ)庫下輸入框輸入時可能存在光標(biāo)重設(shè)的問題
  • 在 input 和 textarea 中 change 事件會被轉(zhuǎn)為 blur 事件，可以使用input事件監(jiān)聽數(shù)據(jù)變化
  • 事件取值：event.mp.detail.value

常見問題

  • 引用第三方庫報錯TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

使用webpack時，不能同時使用import和module.exports
修改.babellrc文件，plugins添加"transform-es2015-modules-commonjs"

"plugins": ["transform-runtime", "transform-es2015-modules-commonjs"]
  • 同一個頁面再次訪問頁面未初始化
    這應(yīng)該算是一個框架的bug，下載hack.js到本地： 傳送門
    在main.js 引入hack.js 
import Vue from 'vue'
import Hack from '@/utils/hack'
Vue.use(Hack)
  • npm run dev沒反應(yīng)
  1. vue文件中需要script標(biāo)簽
  2. 配置mpvue-entry忘記下圖配置
  3. 刪除dist和node_modules，重新npm install（極端情況）
  • 修改代碼后微信開發(fā)工具模擬器效果未改變
  1. 檢查控制臺（運行控制臺/微信開發(fā)工具控制臺）是否報錯
  2. 刪除dist文件，重新npm run dev（尤其是有新增文件后）
  3. 某些語法錯誤，只能耐心排查

參考文檔

騰訊地圖-微信小程序JavaScript SDK

未完待續(xù)，持續(xù)更新中....

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。