不要问我为啥一会儿iOS、一会儿RN、一会儿小程序,我就是一颗螺丝钉,哪里需要往哪里钉😂。
踩坑tips记录:
1、顶部固定的下拉刷新,类似于下图美团。刚开始用的scroll-view,小程序scroll-view不带下拉刷新,只有Page自带的滚动有下拉刷新,想了好久都没想通怎么搞。某天突然开窍。。。顶部就用position:fixed固定布局。下面用Page滚动就可以了
2、地图组件、canvas、input、textarea、video等都是原生层级最高的组建,有时会阻挡其他控件,尤其是自定义了弹窗,被挡的严严实实。建议弹窗弹出时隐藏,弹窗消失时再显示出来。
3、小程序目前不支持保存View成图片的功能,想要保存图片只能画canvas再转图片。。。麻烦。。。小技巧,把写死数据不变的东西先采取截图的手段保存下来(尤其大段文字,canvas画的话换行处理能把你换吐血),然后在canvas上以图片的形式画上去,然后只需要再把数据会变动的东西画上去就好了
4、input组件的动态绑定value时,不要用bindinput设置value值,而是用bindblur
5、自定义弹窗时,背景加上catchtouchmove绑定一个空函数来防止滚动穿透
6、获取 wx.getUserInfo 接口后续将不再出现授权弹窗,请注意升级,没有权限时要显示一个button,来让用户授权
//js
WxHelper.getUserInfo()
.then(({ nickName, avatarUrl }) => {
this.setData({
nickName: nickName
});
})
.catch(res => {
// 用户未授权,显示授权按钮
});
//wxss
<button class="tag-button" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">授权</button>
7、wxml里如果有很多状态需要判断,可以创建一个wxs文件,类js语法来处理,在wxml里只需要引入就可以使用了,具体看文档。注意,语法类js但不是完全相同。比如let不支持,要用var,而且写错了console不会报错,而是页面数据加载不出来。。。当时我找了好久才发现是这个问题
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/
8、图标改填充色
方法一:使用字体图标
方法二:图标必须白底黑图
...
background: url('data:image/png;base64,xxxxxxxxx') center center no-repeat, linear-gradient(#2fcc85, #2fcc85);
background-blend-mode: lighten;
...
9、页面反向传值(页面A跳转页面B,页面B返回页面A时把值传给 A)
方法一:值保存在globalData里
方法二:getCurrentPages 获取当前页面栈,直接操作页面A设置数据
// B页面需要回传值时
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; // 获取A页面
prevPage.setData({
invoiceItem: newInvoiceItem
});
10、小程序支持字体图标
https://blog.csdn.net/nongweiyilady/article/details/74244362