微信小程序开发注意点
1、虚拟机和真机上的运行环境的差别?
在开发工具上, 小程序的JS代码是运行在nwjs中
在iOS上,小程序的JS代码是运行在JavaScriptCore 中
在Android上,小程序的JS代码是通过X5 JSCore来解析
开发工具,iOS与Andriod的JavaScript脚本执行环境各不相同,所以存在兼容性问题也就不难理解了。开发工具上运行成功的代码,在iOS上未必能够运行成功,而在iOS上运行成功的代码,在Andriod上也可能会出错。
另外,开发工具,iOS与Andriod上的微信本身代码也不一样,因此也会导致一些问题。
bug统计
https://docs.fundebug.com/notifier/wxjs/apikey.html
2、动画效果的实现?
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html
3、事件的传递?
事件分类
(1)页面上的事件传递
事件分为冒泡事件和非冒泡事件
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递 需要让事件冒泡,通过bind绑定事件
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递 需要控制事件非冒泡,通过catch来绑定事件
一般使用场景中,例如一个列表的item中有多个点击事件需要处理,就可以使用catchtap阻止向上冒泡
(2)自定义组件上的事件传递
监听自定义组件事件的方法与监听基础组件事件的方法完全一致,然后通过 triggerEvent 方法,指定事件名、detail对象和事件选项,对事件进行回调处理。同时,可以在triggerEvent中添加相对应的参数,对事件的传递与响应进行控制,具体的查看微信小程序的自定义组件的组件事件。
4、事件上target和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>
说明: target 和 currentTarget 可以参考上例中,点击 inner view 时,handleTap3 收到的事件对象 target 和 currentTarget 都是 inner,而 handleTap2 收到的事件对象 target 就是 inner,currentTarget 就是 middle。
5、修改版本号及版本号适配
查看版本号及查看版本人数占比方式,如图下:
版本适配问题:
可以通过查看官网的兼容,查看相对应的兼容方式
6、wxs的使用?
通过wxs的使用,可以在wxml页面直接进行调用方法的绑定。
示例代码:
// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
页面输出:
some msg
'hello world' from tools.wxs
具体的wxs介绍可以看微信小程序api官网提供的视图层wxs模块