扒一扒小程序的坑
小记最近几个月和公司的同事一直在马不停蹄的开发小程序,经历了几个版本的迭代后也总算是稳定了下来。而我们的小程序也是得到了腾讯的认可,还拿了个奖 (此图片来源于网络,如有侵权,请联系删除! ) 奖杯上是不是应该刻上开发者的名字
开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。 数据绑定 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 里面的就行,但是有时候这两个的数据是完全一样的,一不小心你就取错了。 <view id="outer" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3"> inner view </view> </view> </view>
其实很容易区分,target就是事件开始的地方,currentTarget就是你绑定事件的地方。可以去看看 (此图片来源于网络,如有侵权,请联系删除! ) 小程序事件 (此图片来源于网络,如有侵权,请联系删除! ) CSS引用静态资源问题iconfont, 图片不能通过css,哦~应该该叫 wxss 本地引入。 (此图片来源于网络,如有侵权,请联系删除! ) 1、iconfont @font-face 引用的ttf等文件在小程序中不支持,可以使用线上或转base64 参考 微信小程序wxss样式文件中引用iconfont素材。 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; } 其他注意点
|
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 扒一扒小程序的坑