专栏首页极乐技术社区干货 | 扒一扒小程序开发中遇到的那些坑!

干货 | 扒一扒小程序开发中遇到的那些坑!

开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

数据绑定 Mustache 语法-(双大括号)

这个 {{}} 里面不能执行任何的方法,只能做简单的四则运算和Boolen判断,比如:

<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
  {{parseInt(i)}}
</view>

你这么干是不行的,你只能在拿到数据的时候就先对数据格式化一遍。是不是很恶心~~~

但是你如果非要在渲染的时候再格式化的话也行,你就只能通过WXS来处理了,比如:

<wxs module="m1">
    var parse = function(str) {
        return parseInt(str);
    };
    module.exports.parse = parse;
</wxs>
<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
  {{m1.parse(i)}}
</view>

wx.navigateBack() 无法向回退的页面传参

小程序的几个导航api,都可以通过 url 给对应的页面传参。而 w x.navigateBack({delta}), 只接受一个delta(返回的页面数)参数。但是有时候确确实实有向回退页面传参数的情况,这时候就只能通过localstorage或是redux等来处理了。

rpx 单位适配问题

小程序提供的 rpx 单位确实让我们开发的时候在高精度还原设计稿上省了很多事情。但是小记发现当你使用1rpx在一些机型上特别容易出问题。

.border {
    border: 1rpx solid #000;
}

如果你这样设置边框的时候,大多数情况下它都能正常显示,但是在一些机器上尤其是 iPhone X 边框有时候根本不显示。所以我现在都改成 2rpx

绑定事件获取的target与currentTarget是有区别的

在绑定事件获取当前组件数据的时候,拿到的envt里面有target和currentTarget 这两个玩意儿里面都有一个dataset,而我们需要获取的数据就在dataset对象里面。正确的我们应该取 currentTarget 里面的就行,但是有时候这两个的数据是完全一样的,一不小心你就取错了。

那这个 target 和 currentTarget 有什么区别呢,官方的解释:

target:触发事件的源组件; currentTarget:事件绑定的当前组件;

看个例子:

<view id="outer" bindtap="handleTap1">
  outer view
<view id="middle" catchtap="handleTap2">
    middle view
<view id="inner" bindtap="handleTap3">
      inner view
</view>
</view>
</view>

点击 inner view 时,handleTap3 收到的事件对象 target 和 currentTarget 都是 inner,而 handleTap2 收到的事件对象 target 就是 inner,currentTarget 就是 middle。

其实很容易区分,target就是事件开始的地方,currentTarget就是你绑定事件的地方。

CSS引用静态资源问题

iconfont, 图片不能通过css,哦~应该该叫 wxss 本地引入。

1、iconfont @font-face 引用的ttf等文件在小程序中不支持,可以使用线上或转base64 参考 微信小程序wxss样式文件中引用iconfont素材。

2、图片可以使用base64或者线上链接。或者<image>哦,对了图片链接一定要带 https 协议头,形如://www.xxx.com/jflkadsjf.png 是不行的

view 添加点击效果

需要主动开启

<view hover hover-class="view-hover">

page wxss样式层级

下面是一个page 示例:
<view class="page-layout">
  <view class="page__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item green">1</view>
    <view class="flex-item red">2</view>
    <view class="flex-item blue">3</view>
  </view>
</view>/* wxss */
.page-layout {
    color: #000;
}
/* 下面这种写法 .red 是不生效的 */
.red {
    color: #f00;
}
/* 必须这么写 */
.page-layout .red {
    color: #f00;
}

其他注意点

  • 任何情况下的视图更新只能通过setData()
  • 路径只能是五层,请尽量避免多层级的交互方式。
  • 不要直接对 Page.data 进行修改,请使用 Page.setData
  • 跳转到tabbar页面一定要用 wx.switchTab()
  • 使用wx:for遍历的时候最好加上wx:key=”{{index}}”

本文分享自微信公众号 - 极乐技术社区(wxapp-union)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序+和风天气完成天气预报

    花半天时间完成简单的小程序应用。适合小程序初学者。

    极乐君
  • 微信小程序左右滑动切换图片酷炫效果(附效果)

    开门见山,先上效果吧!感觉可以的用的上的再往下看。

    极乐君
  • 小灯灯实战系列《三》微信小程序:仿今日头条(下)

    接着上一篇  上一篇文章中,我们已经完成了头条的新闻列表、新闻详情功能了,但是还存在一些值得优化的地方,以及评论功能没有加上。  欢迎Star Github开源...

    极乐君
  • 微信小程序|逻辑判断

    定义一个变量为isShow,在js的页面的初始数据data里面变换true或false

    算法与编程之美
  • js基础(5)

    城市中的游牧民族
  • 小程序事件

    当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,跳转到demo页面。然后在对应的js中写出事件的具体实现方法

    用户2305175
  • 原生态纯JavaScript 100大技巧大收集---你值得拥有(51--100)

    56、原生JavaScript全角半角转换,iCase: 0全到半,1半到全,其他不转化

    用户1272076
  • JavaScript 103 条技能

    1、原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var ic...

    琯琯
  • 前端-JavaScript 有用的代码片段和 trick

    解析允许字符串中含有非数字字符,解析按从左到右的顺序,如果遇到非数字字符就停止。而转换不允许出现非数字字符,否者会失败并返回NaN。

    grain先森
  • 【企业数字化转型】决策革命:基于数据+算法的决策

    决策革命简而言之就是基于数据+算法的决策。“数据+算法=服务”实现分四个环节:一是描述,在虚拟世界描述物理世界发生了什么;二是洞察,为什么会发生,事物产生的原因...

    一个会写诗的程序员

扫码关注云+社区

领取腾讯云代金券