微信小程序的框架众多，而现在我只想记录一下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