微信小程序开发小结-微信小程序开发心得体会-微信小程序开发服务-即速应用

微信小程序开发小结-微信小程序开发心得体会-微信小程序开发服务

浏览量：1358 时间：2020-04-06 来源：SunShinessx

1.
最近开发了微信小程序，做个小结，方便后面查阅：
一.自定义头部导航：2.
原来默认的头部导航，只能设置字体颜色，背景色，其他不能设置：在page的json文件里面配置：
3.
如想自定义导航头，首先需要在app.json里面加上这句：
4.
然后自定义导航头组件：一般是fixed定位。
5.
所以导航头下面的页面布局，需要设置一个padding-top自定义导航头的高度
6.
接下来有个坑：就是各种手机的状态栏高度不一样，需要适配：
7.
红框部分就是状态栏高度。
8.
解决方法：padding-topwx.getSystemInfoSync()['statusBarHeight']+自定义导航的内容高度。这样就可以适配各种手机了。
二.IOS的定位布局存在滚动问题9.
这个是移动端的老问题了。解决方法就是定位更高的层级设置catchtouchmove"doNothing"，而该层级本身的内容滚动放在
scroll-view里面，scroll-view在苹果手机的滚动效果不错，安卓手机没那么流畅，但是体验也无问题。这样层级更高的界面滑动的时候，不会使得层级更低的界面一起滑动了。10.
应用场景：一般就是侧滑等设计模型：
三。微信小程序自定义组件11.
详情看官网：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/index.html?search-keyselectComponent
12.
封装组件是必须的，便于代码复用。微信小程序自定义组件，一定要在该组件的json文件里面加上这句，否则会报错：
13.
微信小程序中父组件获取子组件对象方法
14.
1.selectComponent，返回选择器的第一个组件
15.
2.selectAllComponents，返回选择器的组件列表
16.
给自定义组件一个id，
17.
使用的时候：
selectComponent跟Vue的refs是一样的作用。四.使用WXS实现管道功能18.
微信小程序写模板函数不能执行，只能写在WXS里面。
19.
参考：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/index.html?search-keywxs
20.
场景;
21.
.wxs:
vargetColorfunction(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:subDateTimegetColor:getColor}22.
.wxml
wxssrc"../../../utils/common.wxs"module"util"/viewclass"table-cell"spanclass"mul-ellipsis{{util.getColor(item.hotStateDesc)}}"五。微信小程序数量列表过长问题23.
目前这个问题还没有很好的解决方法。如果要解决，可能是后台协商让返回的数量少一点，或者数据结构精简一点。另外多页数据展示可能要随着滚动的时候只展示当前页，然后上拉的时候加载之前的一页，这样数据就不会随着多页下拉越来越多，最后卡主或者白屏。