优质广告供应商

广告是为了更好地支持作者创作

微信小程序 tips

不要问我为啥一会儿iOS、一会儿RN、一会儿小程序,我就是一颗螺丝钉,哪里需要往哪里钉😂。

踩坑tips记录:
1、顶部固定的下拉刷新,类似于下图美团。刚开始用的scroll-view,小程序scroll-view不带下拉刷新,只有Page自带的滚动有下拉刷新,想了好久都没想通怎么搞。某天突然开窍。。。顶部就用position:fixed固定布局。下面用Page滚动就可以了


美团首页刷新.jpeg

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

优质广告供应商

广告是为了更好地支持作者创作

推荐阅读更多精彩内容

  • 最近公司项目改版,趁产品修改与UI出图的间歇用公司商户端UI图撸了一把微信小程序。因为刚刚实习那一会接触过前端开发...
    gavincarter阅读 986评论 0 1
  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 27,822评论 9 295
  • 优质广告供应商

    广告是为了更好地支持作者创作

  • 连续两天,大学班级群阒然无声,就连一向活跃的几个大神也都集体噤声,连转发个图片都没有。另外那几条口无遮拦心无挂碍的...
    白丁市隐阅读 363评论 0 1
  • 天涯何处无芳草,路遥随心任我行! 这只是个随意的开始, 也许只是个简单的投入, 让时间变慢一点, 随心而为。 每个...
    cc给你的信阅读 144评论 0 0