關於mpvue的幾個坑點

微信小程序的框架衆多，而如今我只想記錄一下mpvue的幾個點...祝你採坑成功。

微信小程序在語法規範、API、組件外，由於多了個可組件化component，主要點始終落在app.json、app.wxss、app.js和每一個頁面和組件的配置上，都是類似雷同的事情，詳情移步官方文檔

相對而已，mpvue是在vue基礎上加入了微信小程序的支持，在loader和編譯方面多作支持，編碼規範以vue爲標準。

使用

如今已vue-cli生成mpvue/mpvue-quickstart模板深刻

相對於原生小程序，mpvue在代碼目錄主要維護:

• App.vue: 做爲小程序的建立點和掛載點
• main.js
• app.json
• vue模型的組件頁

配置每頁導航欄信息

v1.1.1如下

找到每頁的的main.js,添加export default對應內容

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

動態替代方案：

wx.setNavigationBarTitle({
  title: '關卡'
})

FAQS

報錯mpvue 未找到入口 app.json 文件

正常狀況：

npm run dev

執行一下mpvue的編譯

在dist目錄下會自動產生一個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直接下載建立的組件上，如

<template>
    <components v-show="isShow"></components>
</template>

所以組件的顯隱狀態沒法根據isShow響應狀態

解決：

只須要在組件外包括一層元素進行控制

<template>
    <div v-show="isShow"> 
        <components></components>
    </div>
</template>

科普：v-if直接是建立-銷燬組件

擁有slot的組件沒法自動編譯成功

只須要關閉編譯從新運行

npm run dev