微信小程序开发注意点

微信小程序开发注意点

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模块