微信小程序使用mpvue的注意事项

微信小程序使用mpvue的注意事项

主要是针对微信公众号上的开发配置以及mpvue在使用过程中与原生小程序存在的区别。
参考文章：https://www.jianshu.com/p/184db91b101d
参考mpvue官网： http://mpvue.com/mpvue/#_12

微信公众平台的开发配置

服务器域名的配置：通过备案的具有https的合法域名

微信小程序用户授权

小程序的获取用户信息接口调整：
按照官网说法，为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息：

1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。
详情参考文档:
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
2、使用 open-data 展示用户基本信息。
详情参考文档:
https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

例如button的用法

vue实例生命周期

同 vue，不同的是我们会在小程序 onReady后，再去触发 vue mounted 生命周期，详细的 vue 生命周期文档请看生命周期钩子

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page， 除特殊情况外，不建议使用小程序的生命周期钩子。

app 部分：
onLaunch，初始化
onShow，当小程序启动，或从后台进入前台显示
onHide，当小程序从前台进入后台

page 部分：
onLoad，监听页面加载
onShow，监听页面显示
onReady，监听页面初次渲染完成
onHide，监听页面隐藏
onUnload，监听页面卸载
onPullDownRefresh，监听用户下拉动作
onReachBottom，页面上拉触底事件的处理函数
onShareAppMessage，用户点击右上角分享
onPageScroll，页面滚动
onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）

mpvue语法使用注意事项

1. 原生小程序只能使用view等语义化标签，mpvue可以使用div代替view标签，也可以使用view；
2. 组件名不要和微信的组件名重名；
3. img标签
   mpvue中img标签的url只能时绝对路径引入，相对路径不能正确解析；css中可以通过相对路径引入图片
4. import只支持单文件引用
5. v-for里面必须添加key
6. 所有页面的created生命周期函数都会在小程序加载的时候，一次性执行，而不是进入一个页面执行一次，只有小程序的onload()函数才是进入一个页面加载执行一次，相当于vue的mounted();
7. onshow()函数第一次页面加载的时候不会执行，只有在页面隐藏又显示后才会显示。
8. 全局变量
vuex是专为vue.js应用程序开发的状态管理模式，缺点是不能使用它的辅助函数mapState、mapGetters、mapActions、mapMutations等。解决方案：用最原始的store.commit()、store.getter。对于一在小程序组件中为Handler或者为EventHandle的属性，在mpvue框架中要写成vue的事件绑定形式，就像bindchange写成@change。（bind --> @）
9. 对于一些在小程序中绑定值得属性，组件中的value，在mpvue框架中写成:value=“date”
10. 触发事件取值问题
    小程序： event.detail = {value:value}
    mpvue：event.mp.detail = {value:value}
    对于一些回调函数，比如getUserInfo，在原生小程序中，获取信息为：e.detail，但在mpvue中，获取方式为：e.mp.detail
11. 文件夹首字母不能大写
12. 两层v-for不能用index的名字来作为索引，需用其他名字
    嵌套列表渲染，必须指定不同的索引！

    //在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 
    <template>
        <ul v-for="(card, index) in list">
            <li v-for="(item, itemIndex) in card">
                {{item.value}}
            </li>
        </ul>
    </template>
    

mpvue不支持

1. 不支持Vue-router
2. 不支持纯html
   小程序里所有的BOM/DOM都不能用，也就是说v-html指令不能用。
3. 不支持部分复杂的Javascript渲染表达式
   template中的{{}}双花括号的部分，直接编码到wxml文件中，由于微信小程序的能力限制（数据绑定），所以无法支持复杂的javaScript表达式。目前可以使用的有+ - * % == === > < [] 。
4. 不支持过滤器
   渲染部分会转成 wxml ，wxml 不支持过滤器，所以这部分功能不支持。
5. 不支持函数
   不支持在 template 内使用 methods 中的函数。
6. 动态组件，自定义 render，和<script type=“text/x-template”> 字符串模版等都不支持
7. 暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class=“class-name”> </card> 样式是不会生效的)，因为编译到wxml，小程序不会生成节点，建议写在内部顶级元素上。

小程序部分

1. 事件处理器
   在input和textarea中change事件会被转化成blur事件

    <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
   

   小程序能力所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑(???)
2. 如何获取小程序在 page onLoad时候传递的 options
   在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。
3. 如何获取小程序在 app onLaunch/onShow时候传递的 options
   在所有的组件内可以通过this.$root.$mp.appOptions 进行获取。
4. 全局的下拉加载需要在配置中设置开启
   并且需要在方法中调用wx.stopPullDownRefresh()方法结束下拉动作，不然在真机上面下拉效果无法收起
5. 如果使用scroll-view标签实现，有几个地方需要说明一下：
   触发方法需要放到methods中，并且绑定在scroll-view标签上调用
   在scroll-view中下拉的时候，无法触发全局的下拉效果，需要自己实现相应的动画（所以建议优先使用全局的方法）
   下拉刷新只有在滑动至顶部的时候才会触发，如果你的滚动条已经在标签区域最顶部了，就无法触发下拉方法（这点是最后放弃scroll-view的主要原因，处理起来太麻烦了）

使用vuex状态管理

	import Vue from 'vue';
	import Vuex from 'vuex';
	Vue.use(Vuex);
	
	const store = new Vuex.store({
		// 初始化全局数据
		state:{
			// 用户信息
	    	userInfo: {},
		}
		mutations:{}
	});
	export default store;

其他

1. app.json的文件设置小程序的排版、样式等
   
2. 数据缓存
   
   通常用到const logs = wx.getStorageSync("logs") || [] 和 wx.setStorageSync("logs", logs);
3. 封装request.js

import base from './config';
Promise.prototype.finally = function(callback) {
	let P = this.constructor;
	return this.then(
		(value) => P.resolve(callback()).then(() => value),
		(reason) =>
			P.resolve(callback()).then(() => {
				throw reason;
			}),
	);
};
/**
 * 
 * @param {string} method   "post"||"get" 等等
 * @param {string} url 
 * @param {object} query 
 * @param {object} config 
 */
function request(method, url, query, config) {
	return new Promise((resolve, reject) => {
		url = url.startsWith("http")?url:base.requestBasePath + url;
		wx.request(
			Object.assign(typeof config === "object" ? config : {}, {
				method: method.toLocaleUpperCase(),
				url,
				data: query,
				success: (re) => {
                    let newData = {};
                    //个别字段不统一，可能存在空格，去掉
					Object.keys(re.data).forEach((key) => {
						newData[key.trim()] = re.data[key];
					});
					if (newData.code == 0) {//code==0是返回数据成功的标志
						resolve(newData);
					} else {
						reject(newData);
					}
				},
				fail: (re) => {
					reject(re.data);
				},
			}),
		);
	});
}

export default request;

api调用

import request from "../utils/request.js";
export default {
	// 获取全部参数json形式
	getAllParams() {
		return request("post", "/webapi/mini/getAllParams");
  },
}

import api from "@/api";
getAllParams(){
	return api.getAllSysParamJson().then((re) => {
		store.state.formAllOptions = re.data;
	}).catch((err) => {
		console.log("err:", err.status, err.message);
	});
}

第三方接口使用

有一些涉及信息比较敏感的接口，例如项目中使用的身份证实名核验接口是写在我们的后台服务器中，而不是直接调第三方接口，如果前端直接调用的话，会把一些AppId、AppSecret、SecretId、SecretKey、签名等暴露在前端代码中，别人可以通过查看源码拿到这些敏感信息，所以处于安全性考虑，在后台服务器中去调用这个接口。