最近开发小程序踩过的那些坑

作为一个二流前端也有段时间了，每天沉溺于项目功能代码很多积累到最后只成了模糊的印象。
很不巧，我这个人记性不太好。
不过有句话是这么说的，好记性不如烂笔头，在这个年代当然不需要烂笔头了，但道理是一样的，得有个地方做积累与沉淀，无论是以后翻看还是分享都是可以拿出手的。

废话说够了，那么，让一切的开始。
作为第一篇记录，也分享不了太多的东西，代码什么的就先不上了，最近在开发小程序，那就先记录一些在微信小程序的项目中踩过的坑。

1. 小程序界面相关

1.1 小程序底部 Tabbar

在绝大多数的情况下，小程序自带的底部Tabbar都能满足需求。但在此项目中需要根据页面来改变底部Tabbar内容与连接，尝试使用wx.setNavigationBarTitle(OBJECT)，wx.setNavigationBarColor(OBJECT)等接口来对底部导航做设置，发现这两个接口并不能控制导航单项的显示隐藏。 结局方案：自己写底部。

1.2 高度适应问题

随着iphonex的加入，市面上的长屏幕手机越来越多，而项目中对界面的设计往往是针对iphone6的1344px制作的，而在项目中单位统一使用了适应宽度的rpx，在大部分页面中会出现底部较长等问题，这个问题本身影响不大，但在活动页中底部过多的留白会造成较差的用户体验，但是盲目引入vh等适应高度会造成图片变形等问题。
最后的解决方案：获取手机的宽高比例后与设计稿的宽高比例做对应的计算，计算出冗余的高度，并将这些高度分配在元素的间距之中。

1.3 位于界面底部的输入框上拉距离问题

在移动端的前端表单中，底部的输入框会被键盘顶上适应的距离，但这个距离是以输入框底部为基准的，在你的输入框有padding等样式时会出现较差的用户体验，特别在使用ui框架的cell之类的元素，会导致上移距离不够的问题。
最终解决方案：改写ui框架的cell，新增一个样式，让这个样式中的input框以高度占满整个cell列。

1.4 动画问题

wx自带的动画接口功能不够完善，无法适应项目的循环动画等需求。
最终解决方案：自己写动画，并做相应的封装。项目制作中未封装成组件，遂写在util中。 如果能够支持，使用css3动画应该是最好的解决方案。

单个，有结束的动画：  
const animation=function (params, end, frame, speed,that, callback) {//参数自左到右分别为修改对象，结束值，刷新速度，刷新距离，回调函数,注意，end应能被speed整除
  let clock2 = setInterval(() => {
    let value;
    for (let i in params) {
      params[i] < end ? params[i] = params[i]   speed : params[i] = params[i] - speed;
      value = params[i];
    }
    that.setData({
      ...params
    })
    if (value == end) {
      clearInterval(clock2);
      if (callback)
        callback();
    }
  }, frame)
};

循环动画 注意start应小于end
const animationload = function (params,start, end, frame, speed, that) {//参数自左到右分别为修改对象，最小值，最大值，刷新速度，刷新距离
  let flag=true;
  let value;
  let clock2 = setInterval(() => {
    if(flag){
      for (let i in params) {
        params[i] < end ? params[i] = params[i]   speed : params[i] = params[i] - speed;
        value = params[i];
      }
      that.setData({
        ...params
      })
      if (value >= end) {
        flag = !flag;
      }
    }
    else{
      for (let i in params) {
        params[i] > start ?params[i] = params[i] - speed: params[i] = params[i]   speed;
        value = params[i];
      }
      that.setData({
        ...params
      })
      if (value <= start) {
        flag = !flag;
      }
    }
  }, frame)
};

1.5 图片加载问题

小程序中加载本地图片的速度会非常慢。
解决方案：使用base64(代码太难看了，否决)，后台架设图片服务，使用线上图片（虽然还是有点慢）。

1.6 icon-font的问题

程序中需要引入iconfont图片。
解决方案：小程序能够支持iconfont，甚至可以对此作出封装。但此项目中只是单纯的引入了小程序并未做封装。
将所需的icont图片库下载，拿出里面的iconfont.css以线上的地址替代头部，并对.iconfont做出相应的修改，重命名成.wxss的文件格式，放入util中再需要的css中以 @import "../../utils/iconFont.wxss"引入即可。

1.7 使用的ui框架 zan-ui的一些问题

ui框架层次不如原生组件，再使用中会出现原生组建覆盖再ui框架上的问题。
解决方案：弹出时隐藏一些组件或是干脆重写。

1.8 scroll-view 需要设置高

小程序的scroll-view必须要设置高。
解决方案：通过微信api获取可视高度

    wx.getSystemInfo({
      success: (res) => {
        console.log(res.windowHeight);
        this.setData({
          height: res.windowHeight - 48,
          pageHeight: res.windowHeight
        })
      }
    });

1.9 防抖问题

拆红包，预测，小游戏等涉及倒接口，setInterval的按钮不加防抖会出现严重的bug 解决方案：加入防抖机制

1.10 入口加载判断去不同页面时出现首页后跳转

小程序的入口只有一个，可往往需要不同参数来判断跳转的页面。
解决方案：再首页加入一个loading页面判断完毕后跳转倒各自的页面。

2. 小程序框架编码问题

2.1 小程序的跳转只能带url中?后的参数

小程序无法像react-native那样再navigator中附带对象等参数。
解决方案：使用app等全局变量。

2.2 小程序的全局变量问题

小程序的全局变量wx.setStorage()后产生的缓存不会因为小程序的删除而清除。
解决方案：使用api中的wx.clearStorage()来清楚缓存。

2.3 数据改造，列表分页时，较为优雅的写法

  getList(params) {
    console.log(params)
    getPageList(params)
      .then(res => {
        console.log(res.data.data.data)
        const data = res.data.data.data.map((item, key) => {
          
          return {
            ...item,
            modifyTime: moment(item.endTime).format('YYYY.MM.DD'),
            // department_name: item.projectDockingDeaprtmentList.map(item => item.department_name).join(' ')
            departmentsinfo: item.departments.map(item=>(`@${item.departmentName}`)).join(' ')||'@All',
          };
        });
        // 按照页面赋值
        if (this.pageNo === 1) {
          this.setData({
            dashboard: data
          });
        } else {
          this.setData({
            dashboard: this.data.dashboard.concat(data)
          });
        }

        this.setData({
          loadStateType: 'text',
          loadStateText: '上拉加载更多',
        });

        if (data.length < this.data.params.pageSize) {
          this.setData({
            loadStateType: 'text',
            loadStateText: '暂无更多数据',
          });
        }
      })
  },

2.4 无法获取用户微信号

微信的wx.getUserInfo是无法获取倒用户的微信号的，只能获取倒用户的openid

2.5 获取用户是否关注了与小程序绑定的公众号的问题

解决方案：可以通过wx.getUserInfo接口中是否能获取UnionID来判断

2.6组件封装

本项目中未使用组件化的思路，需要改进。
解决方案：微信小程序组件化

3. 小程序上线的一些问题

2.1 后台必须使用https

后台接口域名必须谁用https，并且在微信平台中做过设置。

2.2 其他配置

上线可以选择关闭不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书这个选项

以上是个人在项目中的一些经历，可能观念有误欢迎指正，随着开发的进行研究的深入会继续补充修正，感谢各位大佬的阅读。

这篇好文章是转载于：学新通技术网