背景 此前有开发者反馈小程序发布新版本后，新版本覆盖率比较慢，因为小程序的更新机制是异步的，部分用户不会马上应用上新版本。 小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。 假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。 小程序的异步更新发生在冷启动过程，当发现新版本后，会异步下载新版本的代码包，但不会马上应用上最新版本，需要等小程序下一次冷启动，才会应用上新版本。 解决思路为了解决这个问题，我们内部也经历了数个方案的讨论，这里简单介绍下： 1. 同步检查更新（放弃）：可能是最直接的解决思路，但主要问题是会影响小程序的启动速度，当下小程序的更新迭代是非常频繁的，部分用户可能每次启动都命中更新，如果需要同步检查更新+同步下载新的版本，那将会影响这部分用户的启动体验。 2. 模块热替换（放弃）：从技术上来说，这是最好的方案，小程序运行起来后，在打开新页面时，马上应用新版本里的页面，但这就会存在新旧逻辑、页面共存问题，对于开发者来说，反而更不好处理，特别是涉及到全局变量时，情况会更复杂，对于我们已有的框架来说，也是一个大挑战，不过这个也是我们之后努力的方向。 3. 定时 check 新版本（目前方案）：6.6.3 及以上版本的客户端，会定时 check 最近使用过的小程序是否有发布新版本；如果有，下次打开的时候会同步更新新版本再打开。这可以保证在新版本发布 24 小时后，所有小程序都能使用最新版本。（这部分是微信客户端自身优化，开发者无需关心） 4. 异步更新 + 强制更新（目前方案）：同步检查更新与模块热替换两者之间的折衷方案，即还是维持异步更新机制，在异步下载完小程序代码包后，提供重启小程序的能力，这样在遇到紧急问题时可以马上解决。 异步更新 + 强制更新方案介绍从基础库 1.9.90 开始，我们提供了 wx.getUpdateManager 接口，使用该接口，可以获知是否有新版本小程序、新版本是否下载好以及应用新版本的能力。 当小程序冷启动时，会自动向微信后台请求新版本信息，如果有新版本，会马上触发新版本的下载。开发者可以通过 wx.getUpdateManager，获知当前更新的状态。 wx.getUpdateManager 接口会返回一个 UpdateManager 实例，UpdateManager 包含了三个回调： 1. onCheckForUpdate：当小程序向后台请求完新版本信息，会通知这个版本告知检查结果 2. onUpdateReady：当新版本下载完成，会回调这个事件 3. onUpdateFailed: 当新版本下载失败，会回调这个事件 还有重启应用新版本的接口： 1. applyUpdate：当新版本下载完成（onUpdateReady），调用该方法会强制当前小程序应用上新版本并重启 具体示例： [代码]// wx.getUpdateManager 在 1.9.90 才可用，请注意兼容[代码] [代码]const updateManager = wx.getUpdateManager()[代码] [代码]updateManager.onCheckForUpdate(function[代码] [代码](res) {[代码] [代码]  // 请求完新版本信息的回调[代码] [代码]  console.log(res.hasUpdate)[代码] [代码]})[代码] [代码]updateManager.onUpdateReady(function[代码] [代码]() {[代码] [代码]  wx.showModal({[代码] [代码]    title: '更新提示',[代码] [代码]    content: '新版本已经准备好，是否马上重启小程序？',[代码] [代码]    success: function[代码] [代码](res) {[代码] [代码]      if[代码] [代码](res.confirm) {[代码] [代码]        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启[代码] [代码]        updateManager.applyUpdate()[代码] [代码]      }[代码] [代码]    }[代码] [代码]  })[代码] [代码]})[代码] [代码]updateManager.onUpdateFailed(function[代码] [代码]() {[代码] [代码]  // 新的版本下载失败[代码] [代码]})[代码] 更详细信息可以参考 UpdateManager 的详细文档 最佳实践从用户体验上来说，我们还是建议只在非常必要时才强制用户重启更新，例如出现线上紧急 BUG。通常情况下，可以选通过 wx.showModal 弹出选择框让用户选择是否重启更新（实现请参考示例代码）。 如何调试最新版本的微信开发者工具提供了强制更新的调试能力，通过编译模式 - 编辑编译模式 - 勾上「下次编译时模拟更新」即可在开发者工具上调试强制更新功能。 最新开发者工具下载链接 点我。

小程序性能优化课程基于实际开发场景，由资深开发者分享小程序性能优化的各项能力及应用实践，提升小程序性能表现，满足用户体验。

原文来自「微信开发者」公众号。 本文主要介绍了WeUI官方组件库有什么，怎么用。 提起 WeUI，相信大家都不陌生，WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 不过，对于 WeUI 样式库，开发者就有疑问了。 [图片] 1 有什么 我们来看看 WeUI 组件库到底有什么可用的 UI 组件呢？WeUI 样式库有的各个元素，WeUI 组件库是基于 WeUI 样式库做了组件化处理，开发者可以便捷的使用，无需考虑组件层面的逻辑问题。 2 怎么用 有了心动的组件之后，大家肯定想知道 WeUI 组件库是怎么使用的。 第一步：引用 要使用 WeUI，首先要把 WeUI 引入我们的小程序项目，引入 WeUI 的方式有以下两种，使用其中一种即可～ 方法一：通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。（推荐👍） 方法二：可以通过 npm 方式下载构建，npm 包名为 weui-miniprogram。 与方法一不同，npm 引入的方式需要多操作一步，在 app.wxss 中引用 weui.wxss。 // app.wxss @import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'; 第二步：使用 引入之后，我们就要开始来使用了，WeUI 组件库是基于小程序自定义组件构建的，所以使用是以自定义组件的形式来使用。 下面通过几个例子来感受下 WeUI 组件库的使用。 由于是自定义组件的形式，所以使用组件都需要在页面配置中引入，像这样： // page.json { "usingComponents": { "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog", "mp-searchbar": "weui-miniprogram/searchbar/searchbar" } } 引入组件之后，就可以直接在 wxml 中使用了，当然，为了让开发者接入更加简便，我们也加入了做了一些常见的实用性功能。 半屏弹窗 小程序提供了 wx.showModal、wx.showToast 供开发者进行页面交互，在开发过程中，可能需要自定义按钮相关的内容，所以 WeUI 提供了半屏弹窗让开发者可以有更多的自定义空间。 我们来看下代码，使用很简单，直接使用 mp-half-screen-dialog，配置相关属性即可。 // page.wxml // page.js data配置 buttons: [ { type: 'default', className: '', text: '辅助操作', value: 0 }, { type: 'primary', className: '', text: '主操作', value: 1 } ] 来看下半屏弹窗的效果～ u1s1，这交互体验真的爱了😍 [图片] Form 表单校验 Form 表单这里，除了基础的的功能之外，WeUI 组件库还提供了表单校验的能力，通过 rules 规则的配置（支持长度、手机号码、电子邮件、url 链接地址等），轻松解决表单校验问题。 [图片] 左滑删除 相比 Web 端，手机端的操作按钮更多的是通过⬅️左滑等来实现，考虑到左滑删除的普遍性，WeUI 组件库也是支持的。 在 mp-slideview 组件中设置 buttons属性即可。 [图片] 搜索组件 同样是基本功能的搜索，WeUI 组件库也封装了搜索组件，开发者只需配置搜索结果即可拥有搜索功能～ [图片] 除了这些组件之外，WeUI 组件库还提供了很多实用的组件，包括基础的 icon、loading，表单的 uploader、cell 等等。 第三步：适配DarkMode 伴随客户端、小程序对 DarkMode 的支持，WeUI 组件库也同步适配 DarkMode 的模式，让 WeUI 组件库的使用同学可以快速适配 DarkMode。 在根结点（或组件的外层结点）增加属性 data-weui-theme="dark" ，即可把 WeUI 组件切换到 DarkMode 的表现，如： ... 3 体验WeUI 最后，如果想体验 WeUI 组件库的效果，欢迎扫码下方二维码进行小程序示例体验👏及接入使用，使用过程中如有建议或者疑问，欢迎到微信开放社区与我们交流。 [图片]

前言：关于使用uniapp的好处就不必多说了，我自己的话从uniapp面世，也一直在关注。头几年微信，支付宝，抖音等小程序也在高速发展中，多端确实是很头疼的问题。记得早在18年团队中有项目引入了uniapp，但由于当时不支持分包原因，有个业务场景又只需要买单一个即可，这样把所有页面都放到主包内影响性能，无奈只能用微信原生小程序语法。但几年过去，uniapp生态圈日渐成熟，vue语法，双向数据绑定及Option API（computed,watch,filters等）一定程度上提高了开发者的效率，代码撸起来更加happy。 2.创建项目： 我是通过cli脚手架创建的项目，可参考https://uniapp.dcloud.io/quickstart-cli.html 3.安装项目依赖： 安装vuex，axios引入uView库 https://www.uviewui.com/components/install.html最终目录如下： [图片] 4.总结 目前项目只有微信小程序，如需支持h5，支付宝或者抖音小程序，可结合条件编译来做适配https://uniapp.dcloud.io/tutorial/platform.html，好用的东西，不用推广，自然有开发者拥护

背景：在维护一个历史项目时，发现登录页面，在输入手机号，点击input框，发现无法立刻获取焦点，通过查找代码，发现项目中引入了fastclick。 问题描述：FastClick，这个库解决了什么问题？ click 300ms延迟：浏览器click会比touch延迟300ms触发 click穿透现象：当两个div同处一个position，上层div绑定touch，下层div绑定click,当上层div触发touch消失后，可能会触发下层div的click事件 既然Fastclick是为了解决这两类问题，其实现原理如下图所示： [图片] 解决方案：[图片]

需求背景： 产品经理希望能做到如下图所示效果（上面直接显示pdf内容，底部显示按钮）： [图片] 需求分析： 小程序可以下载文件都本地，再预览pdf文件，但是其效果和图片预览的效果一致，皆为全屏显示，如下图所示；这块经过调研，并和产品battle后，最终制定方案为使用web-view的方式来实现这种效果 [图片] 实现思路： 在第一次查阅https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html文档后发现wx.miniProgram.postMessage是个好东西，想当然的以为在h5中，点击下方按钮时可以调用postMessage向小程序传参了，然后事实并非如此，再次查阅文档发现如下图所示；原来只要再这几个特定的场景时才会触发，我勒个去！！！没办法将所有业务都放在小程序中来写，这个h5只是单纯的接收一下pdf的网络地址并预览，其次再点击立即签约时，通过wx.miniProgram.navigateTo来跳转到下个页面 [图片] 小结： 看了下社区，这个问题几年前也就有了，虽然条条大路通罗马，还希望官方大大也能关注下这个问题，对咱开发者更有好一些，😁

通知： 今天刷官方的更新公告，对的，没错，小程序获取用户头像和昵称的接口又双叒叕调整了！！！具体详细请参见https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01?blockType=1 [图片]