• 微信小程序开发框架对比及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页里判断登录,所以中途登录认证的这块逻辑就没做。
     
     
     
  • 相关阅读:
    2021“MINIEYE杯”中国大学生算法设计超级联赛2
    2021“MINIEYE杯”中国大学生算法设计超级联赛1
    2021牛客暑期多校训练营3
    2021牛客暑期多校训练营1
    对点分治的一些新理解
    使用均摊分析证明Splay复杂度
    从实际项目中学设计模式:策略模式与模板模式的应用
    ueditor编辑器html模式下无法保存内容
    记录一次项目开发中遇到的问题
    加解密代码
  • 原文地址:https://www.cnblogs.com/liyongquan/p/9160650.html
Copyright © 2020-2023  润新知