作為一個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官方的指導(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 小程序。(如下圖)
哈哈,瞬間有點小成就感有木有!
自定義配置
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 兼容的路由寫法
- 安裝依賴
$ npm install mpvue-entry --save-dev
$ npm install mpvue-router-patch --save
-
src目錄下新增router文件夾及index.js
新增router 修改 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/'
})
]
- 在main.js引入
mpvue-router-patch
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'
Vue.use(MpvueRouterPatch)
- 配置
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)
- vue文件中需要script標(biāo)簽
- 配置mpvue-entry忘記下圖配置
- 刪除dist和node_modules,重新npm install(極端情況)
- 修改代碼后微信開發(fā)工具模擬器效果未改變
- 檢查控制臺(運行控制臺/微信開發(fā)工具控制臺)是否報錯
- 刪除dist文件,重新npm run dev(尤其是有新增文件后)
- 某些語法錯誤,只能耐心排查
參考文檔
未完待續(xù),持續(xù)更新中....