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

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

  • 微信小程序使用mpvue的注意事项
    • 微信公众平台的开发配置
    • 微信小程序用户授权
    • vue实例生命周期
    • mpvue语法使用注意事项
    • mpvue不支持
    • 小程序部分
    • 使用vuex状态管理
    • 其他
    • 第三方接口使用

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

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

微信公众平台的开发配置

服务器域名的配置:通过备案的具有https的合法域名微信小程序使用mpvue的注意事项_第1张图片

微信小程序用户授权

小程序的获取用户信息接口调整:
按照官网说法,为优化用户体验,使用 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的用法
微信小程序使用mpvue的注意事项_第2张图片微信小程序使用mpvue的注意事项_第3张图片

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,和

你可能感兴趣的:(前端开发)