5月踩坑总结

1. 身份认证
2. 全局变量的使用
3. 编码规范
4. 变量类型
5. 布局问题
6. options获取参数
7. 小程序请求域名合法性

---

1.身份认证

问题描述

小程序用户扫码后无法传递扫码的渠道ID

问题定位

因为改小程序设定的是打开的第一个页面为stu，如果没有登录再跳转到login页面，
因为在传递渠道ID之前要先确认该用户存在，所以传递该参数的接口upsource位于
stu的onload中，但是如果该用户没有登录，就没有token，
所以会出现由于没有身份认证，接口传参失败。如图：

解决办法

先通过stu页面的onload的options获取该参数lid，然后写到缓存中，
然后把传递参数的接口写到onshow中，待用户登陆后，在onshow中取到该参数并通过接口传递

onLoad(options) {
    const lid = options.lid;
    if (lid) {
      wx.setStorageSync('lid', lid);
    }
}
onshow() {
    const lid = wx.getStorageSync('lid');
    api.getScanId({ lid }, (res) => { });
}

2.全局变量的使用

问题描述

小程序stu页面无法显示全部的学生列表

问题定位

stu页面page_size为20，如果一次不能完全显示会分页向服务器请求，
请求时会传参page代表请求第几页，但是发现该js文件中设有全局变量page，并且好几个方法都会
修改page变量，所以该方法请求时不能传递正确的page参数。

解决办法

删除全局变量page，梳理依赖该变量的方法，如果需要依赖同一变量则在data中定义一个共同依赖的变量。

if (vlist.length % 20 === 0 && list !== 0) {
    this.setData({
        page: this.data.page + 1
    })
    this.getStudentMember();
    }
},
onPullDownRefresh() {
    this.setData({
        page: 1
    })
    this.getStudentMember()
},

3.编码规范

问题描述

在ops_client这个项目里，我自己遇到了并且发现不少代码都存在这类问题，
就是对象的层级多了以后，没有经过判断直接这么使用，很容易遇到报错问题，
页面可能正常显示，但是当接口挂了没有返回数据的时候，控制台就会一堆报错，
因为找不到上一层级的对象。不知道其他项目有没有相同情况 -- by Amor

解决办法

接口调用的回调函数中先判断该接口返回的code，当code为1时执行操作

api.getTeacherList((res) => {
  const { code, data } = res.data;
  if (code === 1) {
    this.setData({ teacherList: data });
  }
});

4.变量类型

问题描述

element-ui的form使用中input设置为number类型，接受数据时依然是字符串类型。
如果使用在2个值比较大小，会成为字符串比较大小。在很多其他时候例如：
比较来自接口返回的数据时如果不加以处理也会出现意想不到的错误。--by 米波

解决办法

在比较时应将不确定数据类型的变量转成number类型，例如：

if (isshow === Number(res.data.isshow)) {}

5.布局问题

问题描述

在小程序中使用scroll-view时，在滑动屏幕时会有滚动条，并且无法取消，有时会影响页面美观程度

解决办法

将scroll-view中item宽度大小设置为超出父盒子大小，然后给item设置padding-right，
并禁用横向滚动，overflow：hidden；

// pages/test/test.wxml
<view>
    <scroll-view class='scrrol' scroll-y='true'>
        <view class='item'>1</view>
        <view class='item'>2</view>
        <view class='item'>3</view>
        <view class='item'>4</view>
        <view class='item'>5</view>
    </scroll-view>
</view>

// pages/test/test.wxss 
page{
    background-color: #666666;
}
.scrrol {
    width: 700rpx;
    height: 400rpx;
    margin: 0 25rpx;
}
.item{
    width: 760rpx;
    padding-right: 40rpx;
    background-color: #ffffff;
    overflow: hidden;
}

小程序onload中options获取参数问题

问题描述

微信扫码后无法获取二维码在链接中拼接的信息

问题定位

新用户可以通过好友分享的小程序链接和二维码两种方式进入小程序，
但是这两种方式获取options的拼接的参数是不一样的，
通过链接获取参数不需要decode，而二维码需要decode，开发时只考虑到了通过分享链接的方式，所以出现bug。

解决办法

添加判断语句去判断获取参数的途径，代码如下：

onload(options) {
    const { parent_leniao_teacher_id } = options;
    const qrUrl = decodeURIComponent(options.q);
    const qrCodeId = parent_leniao_teacher_id ? parent_leniao_teacher_id : qrUrl.split('?')[1].split('=')[1]
    if (qrCodeId) {
      wx.setStorageSync('parent_leniao_teacher_id', qrCodeId);
      this.setData({ parent_leniao_teacher_id: qrCodeId });
    }
}

小程序请求域名合法性问题

问题描述

小程序在模拟器中表现正常，但是在真是设备上无法访问

问题定位

在模拟器中运行小程序时模拟器不会监测小程序请求域名的合法性问题，
但是在真实环境中，微信会校验请求域名的合法性。

解决办法

在微信公众平台的小程序配置中添加域名