07 Sep 2018

[备忘]小程序开发、mpvue踩坑

mpvue踩坑实录,感觉坑蛮多的,请大家慎用

1.后台请求

最开始采用的是flyio库,发送请求以header:{Authorization: 'Token xxxxxxx'}认证,但后台日志表示有近一半的请求中没有收到Authorization字段。以为是flyio的问题,就重新自己封装了一遍wx.request,结果问题依然存在。 最后将Authorization字段替换,问题就解决了。。。猜测是Authorization字段被腾讯占用,因此客户端发送时带的字段被清掉了。

2.分包

按微信官方文档

3. 微信授权

// 判断用户授权信息并做相应处理
wx.getSetting({
  success(res) {
    if (res.authSetting['scope.userInfo']) {
      // 已经授权,可以直接调用 getUserInfo 获取头像昵称
      wx.getUserInfo({
        success: function(data) {
          console.log(data.userInfo)
        }
      })
    } else {
    // 没有授权过的用户,跳转到自己写的授权提示页面
      wx.navigateTo({
        url: '/pages/getUserInfo/main'
      })
    }
  }
})

// getUserInfo页面

// 原生wx的写法
<button plain='true' open-type='getUserInfo' getuserinfo='onGotUserInfo'>允许</button>

// 使用mpvue的写法,点击事件,要加上@符号
<button plain='true' open-type='getUserInfo' @getuserinfo='onGotUserInfo'>允许</button>
// 点击的methods方法
methods: {
  onGotUserInfo(e) {
    // 数据是e.mp
    console.log(e)
  }
}

4.页面闪现数据

使用mpvue,页面闪现上一页数据 商品列表页点击进入详情–返回–点击另一个商品详情页–中间会闪现上一次页面的内容 解决方法:在onLoad()的时候:

onLoad() { Object.assign(this.$data, this.$options.data()) dataArr.push({ …this.$data }) }

5.实体类型相关

这一部分感觉mpvue还是挺好用的,连<button open-type="getUserInfo" @getuserinfo="onGetUserInfo">的回调都可以完美支持,这一部分还是很用心的。

对运行机制的理解很重要,所有的html标签都会被转换为小程序的某个实体,并把标签编译为一个类名,比如<p>会被转换为<view class="_p"><img>会被转换为<image class="_img">,一些奇怪的问题也就可以理解并解决了。

  • image

图片编译后生成的image的默认大小为320*240,如有需要更改,修改image类,只修改img是无效的

6.小程序open-data头像圆角更改

为实现open-data的头像圆角,需要在wrapper中增添css: overflow:hidden

如果要自定义标题栏,需要在全局配置中设置:

navigationStyle: 'custom', //自定义导航栏

同时需要调取微信的getSystemInfo,将statusBarHeight增添到顶栏的padding-top中,以便做顶栏高度的适配。即顶栏高度 = 标题栏自身定高 + statusBarHeight

7.button的disable默认样式更改

这个问题也困扰了比较久的时间,后来发现是伪类没写对

button[disabled][type="default"] {
color:#393939;
background-color: #999;
/* opacity: 0.6; */
}

8. undefined对象检查

如果微信开发者工具中出现 VM20296:1 Setting data field “$root.0.list.doneOrders” to undefined is invalid 类似的问题,原则上来说不会影响正常性能。如果希望解决,请检查相关数组是否已经给了默认值,而不能在任何地方出现undefined,这个问题尤其是在有computed的时候经常容易出现。

9.右上角胶囊改成白色

  "navigationBarTextStyle": "white",