扒一扒小程序的坑

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

image 使用延迟加载问题

笔者之前在使用 <image/>的时候启用了延迟加载,也就是

  1. <image mode="widthFix" src="{{imgurl}}" lazy-load></image>

这个绝大部分情况下是没问题的,但是有一天运营突然来找我说,他们配的活动页面上的部分图片在部分机型(比如:笔者的Iphone 7)上加载不出来。直觉告诉我估计是 “lazy-load” 问题,干掉后固然都正常了。后面特意对比了一下,发现无法load出来的图片都比较大,基本上是1500的宽度。
不知道是不是个例,抛出来给大家看看。

wx.getUserInfo() 调整

获取用户信息接口如果之前用户未授权过,调用该接口将直接报错,不再出现授权弹窗。只能通过button组件拉起授权。具体看文档

  1. <button open-type="getUserInfo"></button>

web-view

微信小程序自 基础库 1.6.4开始支持了web-view组件,也就是可以在小程序里面内嵌网页,但是个人类型与海外类型的小程序暂不支持使用

小程序无法和网页通信,如果需要携带参数,只能通过web-view url 中携带参数,网页可以通过 wx.miniProgram.postMessage 向小程序传数据但是基础库版本要在1.7.1以上且小程序只能在特定时机(小程序后退、组件销毁、分享)接收到信息。

小程序内置网页环境判断

小程序内置网页可通过 window.__wxjs_environment 变量判断是否在小程序环境。一般情况下web需要适配在判断是否在微信浏览器中打开,普通浏览器中打开,小程序中打开,然后会有以下代码:

  1. // 判断是否在微信浏览器中
  2. function isWeixinBrowser() {
  3. return /micromessenger/i.test(navigator.userAgent.toLowerCase());
  4. }
  5. if ( isWeixinBrowser() ) {
  6. // to do something
  7. } else if ( window.__wxjs_environment ) {
  8. // to do something
  9. } else {
  10. // to do something
  11. }

如果这么写那么小程序的那个分支永远也进不去,为什么?自己想

  1. // 判断是否在微信浏览器中
  2. function isWeixinBrowser() {
  3. return /micromessenger/i.test(navigator.userAgent.toLowerCase());
  4. }
  5. if ( window.__wxjs_environment ) {
  6. // to do something
  7. } else if ( isWeixinBrowser() ) {
  8. // to do something
  9. } else {
  10. // to do something
  11. }

这么写就好了

其他注意点

  • 任何情况下的视图更新只能通过setData()
  • 路径只能是十层。
  • 不要直接对 Page.data 进行修改,请使用 Page.setData
  • 跳转到tabbar页面一定要用 wx.switchTab()
  • 使用wx:for遍历的时候最好加上wx:key=”{{index}}”
  • 小程序目前还没有IphoneX 的适配方案,只能通过自己判断系统添加相应适配

写于 2018年01月26日Web 10786

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

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

记小栈小程序上线啦~搜索【记小栈】【点击扫码】体验

你不想说点啥么?
😀😃😄😁😆😅😂🤣☺️😊😇🙂🙃😉😌😍😘😗😙😚😋😜😝😛🤑🤗🤓😎🤡🤠😏😒😞😔😟😕🙁☹️😣😖😫😩😤😠😡😶😐😑😯😦😧😮😲😵😳😱😨😰😢😥🤤😭😓😪😴🙄🤔🤥😬🤐🤢🤧😷🤒🤕😈👿👹👺💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾👐👐🏻👐🏼👐🏽👐🏾👐🏿🙌🙌🏻🙌🏼🙌🏽🙌🏾🙌🏿👏👏🏻👏🏼👏🏽👏🏾👏🏿🙏🙏🏻🙏🏼🙏🏽🙏🏾🙏🏿🤝👍👍🏻👍🏼👍🏽👍🏾👍🏿👎👎🏻👎🏼👎🏽👎🏾👎🏿👊👊🏻👊🏼👊🏽👊🏾👊🏿✊🏻✊🏼✊🏽✊🏾✊🏿

评论

LMY08-20 2018

window.__wxjs_environment 在安卓机器上面 返回 false

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

谢谢提醒,已修改😂😂😂

impony02-01 2018

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