扒一扒小程序的坑

2018年2月24日 Web 3154

小记最近几个月和公司的同事一直在马不停蹄的开发小程序,经历了几个版本的迭代后也总算是稳定了下来。而我们的小程序也是得到了腾讯的认可,还拿了个奖:blush:

奖杯上是不是应该刻上开发者的名字

奖杯上是不是应该刻上开发者的名字

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

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

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

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

你这么干是不行的,你只能在拿到数据的时候就先对数据格式化一遍。是不是很恶心~~~:poop: :shit: :poop:
但是你如果非要在渲染的时候再格式化的话也行,你就只能通过WXS来处理了,比如:

  1. <wxs module="m1">
  2. var parse = function(str) {
  3. return parseInt(str);
  4. };
  5. module.exports.parse = parse;
  6. </wxs>
  7. <view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
  8. {{m1.parse(i)}}
  9. </view>

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

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

rpx 单位适配问题

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

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

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

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

在绑定事件获取当前组件数据的时候,拿到的envt里面有target和currentTarget 这两个玩意儿里面都有一个dataset,而我们需要获取的数据就在dataset对象里面。正确的我们应该取 currentTarget 里面的就行,但是有时候这两个的数据是完全一样的,一不小心你就取错了。
那这个 target 和 currentTarget 有什么区别呢,官方的解释:
target:触发事件的源组件;
currentTarget: 事件绑定的当前组件;
看个例子:

  1. <view id="outer" bindtap="handleTap1">
  2. outer view
  3. <view id="middle" catchtap="handleTap2">
  4. middle view
  5. <view id="inner" bindtap="handleTap3">
  6. inner view
  7. </view>
  8. </view>
  9. </view>

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

其实很容易区分,target就是事件开始的地方,currentTarget就是你绑定事件的地方。可以去看看:point_right:小程序事件:point_left:

CSS引用静态资源问题

iconfont, 图片不能通过css,哦~应该该叫 wxss 本地引入。:-1:
1、iconfont @font-face 引用的ttf等文件在小程序中不支持,可以使用线上或转base64 参考 微信小程序wxss样式文件中引用iconfont素材
2、图片可以使用base64或者线上链接。或者<image>哦,对了图片链接一定要带 https 协议头,形如://cdn.xxx.com/jflkadsjf.png 是不行的

view 添加点击效果

需要主动开启:rage1:

  1. <view hover hover-class="view-hover">
page wxss样式层级

下面是一个page 示例:

  1. <!-- wxml -->
  2. <view class="page-layout">
  3. <view class="page__title">flex-direction: row</view>
  4. <view class="flex-wrp" style="flex-direction:row;">
  5. <view class="flex-item green">1</view>
  6. <view class="flex-item red">2</view>
  7. <view class="flex-item blue">3</view>
  8. </view>
  9. </view>
  1. /* wxss */
  2. .page-layout {
  3. color: #000;
  4. }
  5. /* 下面这种写法 .red 是不生效的 */
  6. .red {
  7. color: #f00;
  8. }
  9. /* 必须这么写 */
  10. .page-layout .red {
  11. color: #f00;
  12. }

WXS iOS 8.0

wxs 中如果使用了较新的 ES6 语法会导致小程序在iOS8机器上无法运行。小程序开发工具估计是没对wxs里面的ES6进行编译

  1. // wxs
  2. var getDesc = function(str) {
  3. var strAry = str.split('·');
  4. var desc1 = strAry[1] ? strAry[1] : '';
  5. var desc2 = strAry[0];
  6. //return {desc1, desc2} // 这里这种写法在iOS8上是没法正常运行的
  7. return { // 必需采用ES5 的写法
  8. desc1: desc1,
  9. desc2: desc2
  10. }
  11. }
  12. module.exports.getDesc = getDesc;

其他注意点

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

如非特别注明,文章皆为原创。

转载请注明出处: https://www.liayal.com/article/5a6b07137de5e93eee4137ca

😀😃😄😁😆😅😂🤣☺️😊😇🙂🙃😉😌😍😘😗😙😚😋😜😝😛🤑🤗🤓😎🤡🤠😏😒😞😔😟😕🙁☹️😣😖😫😩😤😠😡😶😐😑😯😦😧😮😲😵😳😱😨😰😢😥🤤😭😓😪😴🙄🤔🤥😬🤐🤢🤧😷🤒🤕😈👿👹👺💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾👐👐🏻👐🏼👐🏽👐🏾👐🏿🙌🙌🏻🙌🏼🙌🏽🙌🏾🙌🏿👏👏🏻👏🏼👏🏽👏🏾👏🏿🙏🙏🏻🙏🏼🙏🏽🙏🏾🙏🏿🤝👍👍🏻👍🏼👍🏽👍🏾👍🏿👎👎🏻👎🏼👎🏽👎🏾👎🏿👊👊🏻👊🏼👊🏽👊🏾👊🏿✊🏻✊🏼✊🏽✊🏾✊🏿
记小栈02-02 17:01
@impony: https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigatetoobject 最新版路径可以十层呀

谢谢提醒,已修改😂😂😂

impony02-01 09:57

https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigatetoobject 最新版路径可以十层呀