微信小程序开发框架对比及mpvue实际使用总结
首先转载一张对比图片:
项目名称:澳客竞彩(2018世界杯的一个活动)
mpvue官网:http://mpvue.com/
mpvue使用总结:
1. 页面跳转,不能使用vue-router,用vx自带跳转,路径使用绝对路径。有最大跳转页面的限制,5个还是10个的忘了。
wx.redirectTo({
url: '/pages/ask-card/main'
})
2. 图片地址引用使用绝对路径, 不能使用es6的模版字符串语法(``),图片如需高度自适应,需在img标签后加 mode="widthFix"
<div :style="{backgroundImage: 'url(' + imgUrl + 'static/card-' + (!item.count ? 'gray/s_' : 'color/s_') + item.id + '.png)'}" alt="" class="group-item-card"></div>
3. wx.request 不返回Promise对象
4. 微信小程序提供的原生事件,需要改写绑定方式,如‘bindregionchange’
<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
5. mpvue@1.0.11版本 目前无法将父组件的值直接用于子组件slot中,需要挨个传字符串(见home/index.vue),传对象或数组无法取到(即无法根据父组件数据循环子组件元素)
6. mpvue@1.0.11版本 每个page页面的created,和mounted方法都会在小程序首次执行的时候被执行,所以每个page中用onLoad或者onShow等小程序原生方法调用。
7. 通过`this.$root.$mp.query`可以获得url参数。/pages/home/main?url=/pages/home/index
8. 运行时,程序有错但是控制台不会报错的。
9. mpvue@1.0.11版本 目前不能使用vue的filter
10. 每个页面都是独立的vue实例页面,类似整个项目就是一个多页面应用
11. page部分增加onload,onshow等事件
12. 不要在选项属性或回掉使用箭头函数
13. 不支持v-html, 在{{}}里不能用过于复杂的表达式,不支持filter,不支持classObject,styleObject
14. 不支持组件上使用class和style绑定
15. 列表渲染必须指定不同的索引值
16. 事件修饰符没用
17. 组件限制很多,看文档,建议直接用小程序组件
18. 精简data,props,computed数据,不要长列表。建议使用v-model.lazy方式
小程序特性:
1. 小程序可唤起小程序,但不是任何小程序都可以唤起的,只能打开同一公众号下关联的小程序
2. App和小程序可互相唤起
3. 小程序跟公众号不一样,它不能分享到朋友圈,只能分享给好友,或者是微信群。
4. 公众号里可以有小程序入口
5. 小程序里支持web-view组件
6. 小程序的本地存储有同步和异步两种方式,异步方式有回调方法
7. 小程序中不能操作dom,即不能使用document
** 前提:2018年6月开始,小程序的获取用户信息的授权不允许js直接调用,需要用户手动自己点击才能弹出授权页面。
关于项目路由的方案:主要是针对分享后的入口设计
1. 所有页面分享的pash都统一为index首页, 用query来区分指向。
程序入口只有index首页,index页来管理用户登录,授权等操作,成功后根据query来跳转对应页面
优点:统一控制,方便管理
缺点:多了一个index页面
2. 不同页面分享各自的path,App入口判断授权逻辑,但App没提供阻止小程序执行的功能,也就是无法阻止小程序直接进入到分享的path页面。
当发现无授权或登录过期了,就需要redirectTo到一个授权页或弹层进行重新授权再使用
优点:可以少一个index页
缺点:页面会跳闪,控制不方便
由于用户授权必须用户自己点,所以最后采用方案1。
把index作为一个引导页来设计,首次进入正好也能看到活动介绍,然后用户自己点击进入活动,实际就是授权获取用户信息再进入。
之后再进入时,index就能直接获取到信息,也就是一闪而过,用户也不会再看到index页了。
关于登录认证的方案:
1. 被动校验: api过滤器:通过正常业务api的接口调用返回统一错误码,进行判断,然后跳转去登录
2. 主动校验:页面拦截器:针对每个页面的onshow,校验是否登录
3. 主动校验:api拦截器:先校验登录,成功后继续调用正常业务api。
项目比较小,而且每次进入项目都会在index页里判断登录,所以中途登录认证的这块逻辑就没做。