微信小程序的框架眾多加缘，而現(xiàn)在我只想記錄一下mpvue的幾個點...祝你采坑成功。
微信小程序在語法規(guī)范觉啊、API拣宏、組件外，因為多了個可組件化component杠人，主要點始終落在app.json勋乾、app.wxss宋下、app.js和每個頁面和組件的配置上，都是相似雷同的事情辑莫，詳情移步官方文檔
相對而已学歧，mpvue是在vue基礎(chǔ)上加入了微信小程序的支持，在loader和編譯方面多做支持各吨，編碼規(guī)范以vue為標準枝笨。
使用
現(xiàn)在已vue-cli生成mpvue/mpvue-quickstart模板深入
相對于原生小程序，mpvue在代碼目錄主要維護:
- App.vue: 作為小程序的創(chuàng)建點和掛載點
- main.js
- app.json
- vue模型的組件頁
配置每頁導航欄信息
v1.1.1以下
找到每頁的的main.js,添加export default對應(yīng)內(nèi)容
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
export default {
// v1.12后不再使用config為到場app.json
config: {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
v1.1.1以上
直接使用
- main.js
- main.json
動態(tài)替代方案：
wx.setNavigationBarTitle({
title: '關(guān)卡'
})
FAQS
報錯mpvue 未找到入口 app.json 文件
正常情況：
npm run dev
執(zhí)行一下mpvue的編譯
在dist目錄下會自動產(chǎn)生一個app.json
題外話：安裝依賴包的時候或者npm run dev的時候提示缺少依賴的話揭蜒，直接把node_modules 下面的文件全部刪掉伺帘，然后重新npm intall 簡單粗暴解決問題
分析： 因為缺乏依賴而沒自動生成app.json
解決之道： 只需要把packpage.json里的mpvue-loade后面的‘^’去掉，重新安裝依賴即可忌锯。
npm install
npm run dev
npm run dev 無法編譯成功
情況如下：
$ npm run dev
> color-life@1.0.0 dev /home/happy/Dev/coding/color-life
> node build/dev-server.js
嘗試如下也無法解決：
1.npm run dev不行
2.刪除module重裝也不行
3.重新初始化項目也不行
這主要是編譯時遇到代碼缺失
解決：
如果有組件只有純template伪嫁，加上即可：
<script>
export default {}
</script>
v-show使用失效
分析v-show的特點：
- v-show只能簡單的切換元素的css屬性
display - 不支持 <template> 元素
- 不支持 v-else
使用v-show時，很容易將v-show直接下載創(chuàng)建的組件上偶垮，如
<template>
<components v-show="isShow"></components>
</template>
因此組件的顯隱狀態(tài)無法根據(jù)isShow響應(yīng)狀態(tài)
解決：
只需要在組件外包括一層元素進行控制
<template>
<div v-show="isShow">
<components></components>
</div>
</template>
科普：v-if直接是創(chuàng)建-銷毀組件
擁有slot的組件無法自動編譯成功
只需要關(guān)閉編譯重新運行
npm run dev