最近开发了微信小程序,做个小结,方便后面查阅:
一.自定义头部导航:
原来默认的头部导航,只能设置字体颜色,背景色,其他不能设置:在page的json文件里面配置:
如想自定义导航头,首先需要在app.json里面加上这句:
然后自定义导航头组件:一般是fixed定位。
所以导航头下面的页面布局,需要设置一个padding-top = 自定义导航头的高度
接下来有个坑:就是各种手机的状态栏高度不一样,需要适配:
红框部分就是状态栏高度。
解决方法:padding-top = wx.getSystemInfoSync()['statusBarHeight'] + 自定义导航的内容高度。这样就可以适配各种手机了。
二.IOS的定位布局存在滚动问题
这个是移动端的老问题了。解决方法就是定位更高的层级设置catchtouchmove="doNothing",而该层级本身的内容滚动放在
scroll-view里面,scroll-view在苹果手机的滚动效果不错,安卓手机没那么流畅,但是体验也无问题。 这样层级更高的界面滑动的时候,不会使得层级更低的界面一起滑动了。
应用场景:一般就是侧滑等设计模型:
三。微信小程序自定义组件
封装组件是必须的,便于代码复用。微信小程序自定义组件,一定要在该组件的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)}}"
五。微信小程序数量列表过长问题
目前这个问题还没有很好的解决方法。如果要解决,可能是后台协商让返回的数量少一点,或者数据结构精简一点。另外多页数据展示可能要随着滚动的时候只展示当前页,然后上拉的时候加载之前的一页,这样数据就不会随着多页下拉越来越多,最后卡主或者白屏。