主要是针对微信公众号上的开发配置
以及mpvue在使用过程中与原生小程序存在的区别。
参考文章:https://www.jianshu.com/p/184db91b101d
参考mpvue官网: http://mpvue.com/mpvue/#_12
小程序的获取用户信息接口调整:
按照官网说法,为优化用户体验,使用 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
同 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 支持)
绝对路径
引入,相对路径不能正确解析;css中可以通过相对路径
引入图片单文件
引用v-for
里面必须添加key
created
生命周期函数都会在小程序加载的时候,一次性执行,而不是进入一个页面执行一次,只有小程序的onload()
函数才是进入一个页面加载执行一次,相当于vue的mounted();onshow()
函数第一次页面加载的时候不会执行,只有在页面隐藏又显示后才会显示。全局变量
vuex
是专为vue.js应用程序开发的状态管理模式,缺点是不能使用它的辅助函数mapState、mapGetters、mapActions、mapMutations等。解决方案:用最原始的store.commit()、store.getter。对于一在小程序组件中为Handler或者为EventHandle的属性,在mpvue框架中要写成vue的事件绑定形式,就像bindchange写成@change
。(bind --> @)e.mp.detail
//在这种嵌套循环的时候, index 和 itemIndex 这种索引是必须指定,且别名不能相同,正确的写法如下
<template>
<ul v-for="(card, index) in list">
<li v-for="(item, itemIndex) in card">
{{item.value}}
</li>
</ul>
</template>
Vue-router
v-html
指令不能用。自定义 render
,和
字符串模版等都不支持click 等原生事件
、v-show
(可用 v-if 代替)和 class style
等样式属性(例:
样式是不会生效的),因为编译到wxml,小程序不会生成节点,建议写在内部顶级元素上。input
和textarea
中change
事件会被转化成blur
事件 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
小程序能力所致,bind 和 catch 事件同时绑定时候,只会触发 bind ,catch 不会被触发,要避免踩坑(???)page onLoad
时候传递的 options
this.$root.$mp.query
进行获取。app onLaunch/onShow
时候传递的 options
this.$root.$mp.appOptions
进行获取。wx.stopPullDownRefresh()
方法结束下拉动作,不然在真机上面下拉效果无法收起scroll-view
标签实现,有几个地方需要说明一下: import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.store({
// 初始化全局数据
state:{
// 用户信息
userInfo: {},
}
mutations:{}
});
export default store;
const logs = wx.getStorageSync("logs") || []
和 wx.setStorageSync("logs", logs)
;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、签名等暴露在前端代码中,别人可以通过查看源码拿到这些敏感信息,所以处于安全性考虑,在后台服务器中去调用这个接口。