微信小程序使用mpvue的注意事项
微信公众平台的开发配置
微信小程序用户授权
vue实例生命周期
mpvue语法使用注意事项
mpvue不支持
小程序部分
使用vuex状态管理
其他
第三方接口使用
微信小程序使用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语法使用注意事项
原生小程序只能使用view等语义化标签,mpvue可以使用div代替view标签,也可以使用view;
组件名不要和微信的组件名重名;
img标签
mpvue中img标签的url只能时绝对路径引入,相对路径不能正确解析;css中可以通过相对路径引入图片
import只支持单文件引用
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 --> @)
对于一些在小程序中绑定值得属性,组件中的value,在mpvue框架中写成:value=“date”
触发事件取值问题
小程序: event.detail = {value:value}
mpvue:event.mp.detail = {value:value}
对于一些回调函数,比如getUserInfo,在原生小程序中,获取信息为:e.detail,但在mpvue中,获取方式为:e.mp.detail
文件夹首字母不能大写
两层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>
1
2
3
4
5
6
7
8
mpvue不支持
不支持Vue-router
不支持纯html
小程序里所有的BOM/DOM都不能用,也就是说v-html指令不能用。
不支持部分复杂的Javascript渲染表达式
template中的{{}}双花括号的部分,直接编码到wxml文件中,由于微信小程序的能力限制(数据绑定),所以无法支持复杂的javaScript表达式。目前可以使用的有+ - * % == === > < [] 。
不支持过滤器
渲染部分会转成 wxml ,wxml 不支持过滤器,所以这部分功能不支持。
不支持函数
不支持在 template 内使用 methods 中的函数。
动态组件,自定义 render,和<script type=“text/x-template”> 字符串模版等都不支持
暂不支持在组件引用时,在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class style 等样式属性(例:<card class=“class-name”> </card> 样式是不会生效的),因为编译到wxml,小程序不会生成节点,建议写在内部顶级元素上。
小程序部分
事件处理器
在input和textarea中change事件会被转化成blur事件
<map @regiοnchange="functionName" @end="functionName" @begin="functionName"><map>
1
小程序能力所致,bind 和 catch 事件同时绑定时候,只会触发 bind ,catch 不会被触发,要避免踩坑(???)
如何获取小程序在 page onLoad时候传递的 options
在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。
如何获取小程序在 app onLaunch/onShow时候传递的 options
在所有的组件内可以通过this.$root.$mp.appOptions 进行获取。
全局的下拉加载需要在配置中设置开启
并且需要在方法中调用wx.stopPullDownRefresh()方法结束下拉动作,不然在真机上面下拉效果无法收起
如果使用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
2
3
4
5
6
7
8
9
10
11
12
13
其他
app.json的文件设置小程序的排版、样式等
数据缓存
通常用到const logs = wx.getStorageSync("logs") || [] 和 wx.setStorageSync("logs", logs);
封装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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
api调用
import request from "../utils/request.js";
export default {
// 获取全部参数json形式
getAllParams() {
return request("post", "/webapi/mini/getAllParams");
},
}
1
2
3
4
5
6
7
import api from "@/api";
getAllParams(){
return api.getAllSysParamJson().then((re) => {
store.state.formAllOptions = re.data;
}).catch((err) => {
console.log("err:", err.status, err.message);
});
}
1
2
3
4
5
6
7
8
第三方接口使用
有一些涉及信息比较敏感的接口,例如项目中使用的身份证实名核验接口是写在我们的后台服务器中,而不是直接调第三方接口,如果前端直接调用的话,会把一些AppId、AppSecret、SecretId、SecretKey、签名等暴露在前端代码中,别人可以通过查看源码拿到这些敏感信息,所以处于安全性考虑,在后台服务器中去调用这个接口。
---------------------
作者:qq_34274637
来源:CSDN
原文:https://blog.csdn.net/qq_34274637/article/details/88295578
版权声明:本文为博主原创文章,转载请附上博文链接!