微信小程序mpvue框架的使用指南
上篇文章讲了微信小程序原生开发的常用实战经验，继微信小程序原生开发的使用指南后，本文总结下微信小程序 Vue.js 风格框架 mpvue
微信小程序的框架众多，而现在我只想记录一下 mpvue 的几个点...祝你采坑成功。
微信小程序在语法规范、API、组件外，因为多了个可组件化 component，主要点始终落在 app.json、app.wxss、app.js 和每个页面和组件的配置上，都是相似雷同的事情，详情移步官方文档
相对而言，mpvue 是在 vue 基础上加入了微信小程序的支持，在 loader 和编译方面多做支持，编码规范以 vue 为标准。
需要注意的是，如果在开发过程中遇到请求数据时，wx.request 无返回结果的情况，有可能是服务端配置的域名校验不通过，所以为了避免开发时遇到类似情况，需要在微信开发工具》本地设置》勾选 不校验合法域名、web-view(业务域名）、TLS 版本以及 HTTPS 证书
# 使用
现在以 vue-cli 生成 mpvue/mpvue-quickstart 模板深入
相对于原生小程序，mpvue 在代码目录主要维护:
- App.vue: 作为小程序的创建点和挂载点
- main.js
- app.json
- vue 模型的组件页
# 配置每页导航栏信息
# mpvue@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',
},
};
2
3
4
5
6
7
8
9
10
11
12
13
14
# v1.1.1 以上
直接使用
- main.js
- main.json
# 动态替代方案：
wx.setNavigationBarTitle({
title: '关卡',
});
2
3
# 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
2
# npm run dev 无法编译成功
情况如下：
$ npm run dev
> color-life@1.0.0 dev /home/happy/Dev/coding/color-life
> node build/dev-server.js
2
3
尝试如下也无法解决：
- npm run dev 不行
- 删除 module 重装也不行
- 重新初始化项目也不行
这主要是编译时遇到代码缺失
解决：
如果有组件只有纯 template，加上即可：
<script>
export default {};
</script>
2
3
# v-show 使用失效
分析 v-show 的特点：
- v-show 只能简单的切换元素的 css 属性
display - 不支持 元素
- 不支持 v-else
使用 v-show 时，很容易将 v-show 直接写在创建的组件上，如
<template>
<components v-show="isShow"></components>
</template>
2
3
因此组件的显隐状态无法根据 isShow 响应状态
解决：
只需要在组件外包括一层元素进行控制
<template>
<div v-show="isShow">
<components></components>
</div>
</template>
2
3
4
5
科普：v-if 直接是创建-销毁组件 ### 拥有 slot 的组件无法自动编译成功 只需要关闭编译重新运行 npm run dev