微信小程序开发小结

最近开发了微信小程序，做个小结，方便后面查阅：

一.自定义头部导航：

原来默认的头部导航，只能设置字体颜色，背景色，其他不能设置：在page的json文件里面配置：

如想自定义导航头，首先需要在app.json里面加上这句：

然后自定义导航头组件：一般是fixed定位。

所以导航头下面的页面布局，需要设置一个padding-top = 自定义导航头的高度

接下来有个坑：就是各种手机的状态栏高度不一样，需要适配：

红框部分就是状态栏高度。

解决方法：padding-top = wx.getSystemInfoSync()['statusBarHeight'] + 自定义导航的内容高度。这样就可以适配各种手机了。

 

二.IOS的定位布局存在滚动问题

这个是移动端的老问题了。解决方法就是定位更高的层级设置catchtouchmove="doNothing"，而该层级本身的内容滚动放在

scroll-view里面，scroll-view在苹果手机的滚动效果不错，安卓手机没那么流畅，但是体验也无问题。 这样层级更高的界面滑动的时候，不会使得层级更低的界面一起滑动了。

应用场景：一般就是侧滑等设计模型：

三。微信小程序自定义组件

详情看官网：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/index.html?search-key=selectComponent

封装组件是必须的，便于代码复用。微信小程序自定义组件，一定要在该组件的json文件里面加上这句，否则会报错：

微信小程序中父组件获取子组件对象方法

1.selectComponent，返回选择器的第一个组件

2.selectAllComponents，返回选择器的组件列表

给自定义组件一个id，

使用的时候：

selectComponent 跟Vue的refs是一样的作用。

四.使用WXS实现管道功能

微信小程序写模板函数不能执行，只能写在WXS里面。

参考：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/index.html?search-key=wxs

场景;

 

.wxs:

var getColor = function (str) {
   switch(str)
   {
   case '沉默':
     return 'colorGray'
     break;
   case '新沉默':
      return 'colorGray'
      break;
   case '未激活':
      return 'colorLightGray'
      break;
   case '活跃下降':
      return 'colorRed'
      break;
   case '活跃正常':
      return 'colorGreen'
      break;
   default:
     return ''
   }
}


module.exports = {
subDateTime: subDateTime
getColor:getColor
}

.wxml

<wxs src="../../../utils/common.wxs" module="util"/>
 <view class="table-cell"><span class="mul-ellipsis {{util.getColor(item.hotStateDesc)}}"

 

五。微信小程序数量列表过长问题

目前这个问题还没有很好的解决方法。如果要解决，可能是后台协商让返回的数量少一点，或者数据结构精简一点。另外多页数据展示可能要随着滚动的时候只展示当前页，然后上拉的时候加载之前的一页，这样数据就不会随着多页下拉越来越多，最后卡主或者白屏。