- 如何使用dataWorker大幅度提高小程序性能
[图片] https://v.qq.com/x/page/j079878zozx.html 在开发小程序的过程中,往往会遇到三个比较明显的问题,一是页面加载后的真机显示效果会在一瞬间(大约半秒)出现错乱,二是页面加载速度慢,尤其是页面需要请求接口的情况,三是全局管理数据,并且把数据同步到Page或者Component内显示麻烦。所以我们研发了一个叫做dataWorker的工具来解决真机显示效果出现错乱、提高页面加载和显示速度、并且做好全局数据管理。 我们在开发多个小程序的过程中,尤其是在解决用户数据上报丢失时发现,微信小程序的生命周期在真机中其实为伪周期。事实上,完全可以在生命周期外走逻辑,请求接口,唯一比较麻烦的把数据同步到页面内。这也就是为什么我们要用dataWorker(可以理解为浏览器内的service worker)来同步更新视图。我相信,市面上的大部分业务方往往是在页面的[代码]onLoad[代码]或者[代码]onShow[代码]的时候才开始加载并且渲染页面的,最终导致了体验上的卡顿,在数据上则常常出现业务PV点消失的情况。但是如果我们在页面还没有被打开之前就加载好了页面,那么打开的速度当然会快很多。 当然,有很多业务方已有的代码实际上是不需要有全局数据介入的,所以我们又添加了一个开关,叫做palindrome(可以理解为数据双向绑定把)。 然后在需要使用worker的Page或Component内添加palindrome: true,如下: Page({ [代码]palindrome: true, data: {...}, onLoad(){...} [代码] }) 那么比方说我现在想要设置该页面的数据,我依然可以使用原先微信提供的this.setData({…}),这和dataWorker不冲突,也不会改变dataWorker内的数据,但是我同时又可以用dataWorker.data = {…}或dataWorker.list = […]这种办法去修改页面的数据(会直接影响视图)。 dataWorker 代码片段,需要使用appId,并且申请《微盟RPRM测试版》插件(wx10692d472c83e02c)0.0.4或以上版本的使用权限。并且需要关闭安全域名检查(需要请求接口)。 代码片段:https://developers.weixin.qq.com/s/5f5PDMmv7O4J
2019-02-27 - 如何监听小程序中的手势事件(缩放、双击、长按、滑动、拖拽)
mina-touch [图片] [代码]mina-touch[代码],一个方便、轻量的 小程序 手势事件监听库 事件库部分逻辑参考[代码]alloyFinger[代码],在此做出声明和感谢 change log: 2019.03.10 优化监听和绘制逻辑,动画不卡顿 2019.03.12 修复第二次之后缩放闪烁的 bug,pinch 添加 singleZoom 参数 2020.12.13 更名 mina-touch 2020.12.27 上传 npm 库;优化使用方式;优化 README 支持的事件 支持 pinch 缩放 支持 rotate 旋转 支持 pressMove 拖拽 支持 doubleTap 双击 支持 swipe 滑动 支持 longTap 长按 支持 tap 按 支持 singleTap 单击 扫码体验 [图片] demo 展示 demo1:监听 pressMove 拖拽 手势 查看 demo 代码 [图片] [图片] demo2: 监听 pinch 缩放 和 rotate 旋转 手势 (已优化动画卡顿 bug) 查看 demo 代码 [图片] [图片] demo3: 测试监听双击事件 查看 demo 代码 [图片] [图片] demo4: 测试监听长按事件 查看 demo 代码 [图片] [图片] demo 代码 demo 代码地址 mina-tools-client/mina-touch 使用方法 大致可以分为 4 步: npm 安装 mina-touch,开发工具构建 npm 引入 mina-touch onload 实例化 mina-touch wxml 绑定实例 命令行 [代码]npm install mina-touch[代码] 安装完成后,开发工具构建 npm *.js [代码]import MinaTouch from 'mina-touch'; // 1. 引入mina-touch Page({ onLoad: function (options) { // 2. onload实例化mina-touch //会创建this.touch1指向实例对象 new MinaTouch(this, 'touch1', { // 监听事件的回调:multipointStart,doubleTap,longTap,pinch,pressMove,swipe等等 // 具体使用和参数请查看github-README(底部有github地址 }); }, }); [代码] NOTE: 多类型事件监听触发 setData 时,建议把数据合并,在 touchMove 中一起进行 setData ,以减少短时内多次 setData 引起的动画延迟和卡顿(参考 demo2) *.wxml 在 view 上绑定事件并对应: [代码]<view catchtouchstart="touch1.start" catchtouchmove="touch1.move" catchtouchend="touch1.end" catchtouchcancel="touch1.cancel" > </view> <!-- touchstart -> 实例对象名.start touchmove -> 实例对象名.move touchend -> 实例对象名.end touchcancel -> 实例对象名.cancel --> [代码] NOTE: 如果不影响业务,建议使用 catch 捕获事件,否则易造成监听动画卡顿(参考 demo2) 以上简单几步即可使用 mina-touch 手势库 😊😊😊 具体使用和参数请查看Github https://github.com/Yrobot/mina-touch 如果喜欢mina-touch的话,记得在github点个start哦!🌟🌟🌟
2021-06-24 - 获取分享的小程序是否被打开,是被谁打开
小程序分享出去之后可以获取到是否被打开,和打开的用户的信息吗?
2018-09-11