关闭

微信小程序开发中遇到的坑

时间: 2018-01-27阅读: 2959标签: 小程序

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


数据绑定 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 协议头,形如://cdn.xxx.com/jflkadsjf.png 是不行的


view 添加点击效果

需要主动开

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


page wxss样式层级

下面是一个page 示例:

<!-- wxml -->
<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}}”
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/397

小程序多端框架全面测评

最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个?作为 Taro 开发团队一员,笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。

基于Proxy的小程序状态管理

微信小程序的市场在进一步的扩大,而背后的技术社区仍在摸索着最好的实践方案。我在帮助Nike,沃尔玛以及一些创业公司开发小程序后,依旧认为使用小程序原生框架是一个更高效,稳定的选择

小程序保存图片到本地

保存图片到本地相册,需要用户允许相册权限;但是有时客户手滑或者是特别原因点击了拒绝授权,我们需要打开权限列表,让客户手动打开此项权限;

你也许并不需要小程序框架

市面上不停的会有大的公司推出自己的小程序的研发库 / 框架,功能十分强大,也为小程序的开发带来了便利。但在一些积极的反馈中,我们也看到不一样的声音:

手把手教你写个小程序定时器管理库

后台的定时器积累得越多,小程序就越卡,耗电量也越大,最终导致程序卡死甚至崩溃。特别是团队开发的项目,很难确保每个成员都正确清理了定时器。因此,写一个定时器管理库来管理定时器的生命周期,将大有裨益。

微信小程序遇到的坑

微信小程序开发之路上遇到的那些坑,微信小程序开发常见之坑总结,在开发过程中碰到的问题和解决:小程序textarea组件字数限制问题 、scroll-view 中不能使用 textarea 组件 、input组件的问题、关于数据绑定的问题、关于生命周期的问题、关于picker组件

小程序之生成朋友圈图片

微信的小程序是没有分享到朋友圈的功能的。小程序目前只能分享到群里或者发给好友。但是业务需要方便推广,需要分享到朋友圈。得出了以下思路:利用小程序canvas绘制图片,将背景图和二维码绘制成一张图片。

小程序插件怎么玩?有赞和千万级用户的“群里有事”做了一次示范

小程序插件让大的公司赋能外部开发者变得非常方便,极大降低了中小开发者开发丰富的小程序应用的门槛,未来的发展是很值得期待的。尤其是国庆节前夕,微信公布的关于小程序跳小程序的新政策,极大地限制了不同主体之间小程序互跳的自由度

在微信小程序中使用 async/await

微信小程序中有大量接口是异步调用,比如 wx.login() 、 wx.request() 、 wx.getUserInfo() 等,都是使用一个对象作为参数,并定义了 success() 、 fail() 和 complete() 作为异步调用不同情况下的回调。

微信小程序WXS之谜

微信创造了 WXS ,除了提高性能,还有什么原因?WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致”。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!