为更好地保护用户隐私信息，优化用户体验，平台对小程序内的帐号登录功能进行规范。“帐号登录功能”是指开发者在小程序内提供帐号登录功能，包括但不限于进行的手机号登录，getuserinfo形式登录、邮箱登录等形式。一、登录规范规则，你需要了解：[图片] 一、「体验范围开放」与「体验范围特定」区分与对应整改建议：1、“体验范围开放”定义：①直接打开即可体验 ②有账号限制，但有注册流程是对外开放 整改建议： ①授权个人信息功能后置，给与用户充分了解、体验功能服务后，再由用户主动点击进一步功能触发登录授权 ②授权同时，亦同时支持给与用户取消登录的权利 案例解析： ①范围开放-登录规范违规案例解析 违规点：服务范围开放，首页打开即要求授权登录，用户未体验功能服务强制要求授权登录，登录规范不合规。 [图片] ②范围开放-登录环节无取消/拒绝登录按钮案例解析 违规点：体验范围开放，用户体验功能服务后自主触发登录，提供取消/拒绝登录按钮，但点击取消/拒绝登录按钮无响应，仍强制要求登录，无法取消/拒绝登录。 [图片] 2、体验范围特定 定义： 体验范围提供给特定人员使用、对外无开放注册流程，例如为学校系统、员工系统、社保卡信息系统等提供特定服务的小程序 整改建议： ①首页有明显的使用范围（特定范围）说明 ②首页即要求授权来拉取身份鉴定类，需要为用户提供暂不登录/取消登录选项按钮 案例解析： ①特定范围-登录违规案例解析 违规点：打开首页即要求授权登录，无任何说明，不符合登录规范要求 [图片] 这是一份动态更新的文档，辅助开发者了解登录规范要求，避免开发者因登录规范问题审核失败导致无法按期发布上线，开发者如有其他疑问，可以通过目前开放的咨询渠道反馈： 1、微信开放社区-交流专区-小程序发帖咨询-提出问题-运营相关问题 2、驳回站内信通知-客服咨询入口（MP代码审核客服入口正处于灰度开放中，若未获得灰度测试入口，开发者可前往社区发帖咨询） 我们会根据新出现的问题、相关法律法规更新或产品运营的需要及时对其内容进行修改并更新，制定新的规则，保证微信用户的体验。建议开发者反复查看以便获得最新信息，定期了解更新情况。

wx.openOfflinePayView接口 还能申请吗？

在小程序中使用 vant 组件库主要有以下两种方式： 下载源代码包放入项目中，可以自己删掉没用到的组件，不过后期只能自己手动更新，会不太好维护 通过 npm 的方式安装管理依赖，后期更新可以直接交给 npm 来管理，方便维护 正常项目中我们可能都会选择 npm 的方式，但是这种方式 vant 和小程序并不支持像我们一般的前端项目中的按需引入，小程序开发工具构建 npm 时会把整个 vant 的组件编译到 miniprogram_npm 目录中，即使我们在项目中没有通过 usingComponents 申明引用的组件也会被打包进代码包中。 [图片] 减少代码包大小 因为小程序主包有 2M 的限制，如果我们本身只用到了几个组件，最终却打包进了整个组件库，这样不仅不合理也额外占用了咱小程序的包大小。想要按需引入的办法只能自己手动去把 miniprogram_npm 目录中没用到的组件删掉，然后再打包上传。不过每次我们提交版本都要这样去操作的话，不光容易出错也很费时间，这里我们就可以借助 node 和 npm 的 script 脚本来自动处理。 大体思路就是，先直接用 node 去自动扫描读取项目中所有 json 文件 中的 usingComponents，找出项目中实际有用到的 vant 组件，然后再去 miniprogram_npm/@vant/weapp 目录下将没有用到的多余组件删除掉就行了，最后直接把相关代码放到项目中的 script 脚本中操作，这样通过类似 npm run vant 这样一条命令 1 秒钟就可以删除掉未使用到的多余组件，实现了按需引入了。 未使用到的 vant 组件也会触发隐私协议 除了减少代码包大小这一项外，其实还有一个更大的痛点，vant 的部分组件会自动触发小程序的隐私协议，比如上传组件 uploader 中用到的：收集你选中的照片或视频信息（wx.chooseImage、wx.chooseMedia、wx.chooseVideo）、收集你选中的文件（wx.chooseMessageFile），这类 api 会自动触发隐私协议授权。 即使你的项目中压根没使用这类组件，上传版本提审的时候小程序还是会自动扫描你 miniprogram_npm 目录下的所有文件，只要代码中有相关的 api 代码就会认为你用到了，然后霸道地强制要求你填写和更新相关隐私说明，随便瞎填一个 99% 会被拒，也不能填写项目中未使用，这样那你自己说未使用就会让你先去把项目中相关的代码删掉再来提审。 vant-tree-shaking 为了方便使用，脚本代码已经封装成了一个 npm 包 vant-tree-shaking（https://www.npmjs.com/package/vant-tree-shaking ）上传到了 npm 公共仓库中，大家可以直接通过 npm 来下载使用： 全局安装 [代码]npm install -g vant-tree-shaking [代码] 在小程序开发者工具中上传小程序代码前，直接在项目根目录终端中运行命令：vant-tree-shaking，成功后会在控制台打印出：vant-tree-shaking success。 本地安装 [代码]npm install -D vant-tree-shaking [代码] 需要自己在 package.json 配置文件中配置 script 脚本命令，如直接配置自定义命令 vant： [代码]{ "name": "miniapp", "version": "1.0.0", "main": "app.js", "scripts": { "vant": "vant-tree-shaking", }, "dependencies": { "@vant/weapp": "^1.11.5" }, "devDependencies": { "vant-tree-shaking": "^1.0.0" } } [代码] 在小程序开发者工具中上传小程序代码前，直接在项目根目录终端中运行命令：npm run vant，成功后会在控制台打印出：vant-tree-shaking success。 核心代码 主要用到了 node 的 fs、path 这两个模块，来处理文件、目录读取删除和路径的处理，其实也很简单，完整的源码可以参考 github 仓库（https://github.com/cafehaus/vant-tree-shaking ），有什么使用问题或建议也欢迎大家积极反馈。 [代码]// 1、扫描项目中的所有 json 文件，找出项目中使用到的所有 vant 组件 function readFile(filePath) { if (!filePath || !fs.existsSync(filePath)) return if (fs.statSync(filePath).isDirectory()) { let files = fs.readdirSync(filePath) || [] files.map(m => { if (!IGNORE_DIRS.includes(m)) { let curPath = path.join(filePath, m) readFile(curPath) } }) } else { getUsingComponents(filePath, vantSet) } } // 2、项目中使用到的 vant 组件依赖的其他 vant 组件 function readVantDir() { const files = fs.readdirSync(VANT_PATH) || [] files.map(m => { if (!COMMON_DIRS.includes(m) && vantSet.has(`van-${m}`)) { const curPath = path.join(VANT_PATH, m, 'index.json') getUsingComponents(curPath, dependentSet) } }) // 3、删除未使用到 vant 组件目录 const usedVant = new Set([...vantSet, ...dependentSet]) for (let i = files.length - 1; i >= 0; i--) { const cur = files[i] if (!COMMON_DIRS.includes(cur) && !usedVant.has(`van-${cur}`)) { const curPath = path.join(VANT_PATH, cur) deleteDir(curPath) } } console.log('vant-tree-shaking success') } /** * 读取 json 文件中的 usingComponents 属性值 * @param {*} filePath 路径 * @param {*} setList 存符合条件的 vant 组件名的列表 */ function getUsingComponents(filePath, setList) { if (!filePath || !fs.existsSync(filePath) || !isJsonFile(filePath)) return try { const data = fs.readFileSync(filePath, 'utf8') const json = JSON.parse(data) const usingComponents = json.usingComponents || {} for (const key in usingComponents) { if (key.startsWith('van-')) { setList.add(key) } } } catch (err) { console.error(err) } } [代码] 实际测试的一个项目，其中只使用到了 vant 的自定义导航栏 van-nav-bar 组件，没有按需引入时整个代码包大小 544KB，按需引入之后只有 156KB。除了代码包减少了以外，也不用再担心其他未使用到的组件默认触发隐私协议而被拒审了。

各位微信开发者： 小程序基础库 3.4.1 已经开始灰度开发者，请大家基于业务情况关注相关变更。如遇问题请及时在该帖下方留言或在小程序交流专区发表标题包含「基础库3.4.1」的帖子反馈。本次更新如下： 更新 框架 getSystemInfo 接口不再维护，建议开发者使用 getSystemSetting / getAppAuthorizeSetting / getDeviceInfo / getWindowInfo / getAppBaseInfo 详情更新 框架 xr-frame 点击事件迁移更新 框架 wx.downloadFile、wx.uploadFile 接口新增 useHighPerformanceMode 参数 详情更新 框架 授权弹窗上耦合隐私勾选 详情更新 组件 skyline canvas 触摸事件支持 x，y 详情更新 API 支持插件代宿主调用订阅消息接口 详情更新 API TCP接口 onConnect 和 onMessage 回调参数增加 remoteInfo 和 localInfo 详情修复 组件 修复 canvas 默认滚动修复 组件 修复安卓同层 input 微信团队 2024年04月09日

在学习 Skyline 的过程中，许多开发者会有一个疑问：是否可以将小程序的部分页面迁移到 Skyline？ 对 Skyline 感兴趣但还没有完全决定是否要使用的开发者来说，可能只想先尝试一下 Skyline 的功能。 实际上，Skyline 支持最小粒度的页面配置，意味着我们可以为某个页面单独开启 Skyline，而不必将整个小程序迁移到 Skyline 上。 开发者可以更加灵活地使用 Skyline，并逐步将小程序迁移到 Skyline 上，从而获得更好的性能和用户体验。 我们知道 Webview 和 Skyline 是两个渲染引擎，对于 Webview 和 Skyline 混用，大家又有新的疑问：当进行页面切换的时，混用是否会增加耗时？ 这里需要分三种情况： 1、Skyline -> Webview：这种情况取决于 app.json 里配置的全局 renderer，即小程序设置的默认渲染引擎 如果全局 renderer 是 Skyline，那么 Webview 不会被预加载，此时 Skyline 跳转 Webview 耗时会增加，开发者需要手动调用 wx.preloadWebview 做预加载。如果全局 renderer 是 Webview，由于 Webview 默认会预加载，所以 Skyline -> Webview 和 Webview -> Webview 耗时一样，不会增加耗时。2、Webview -> Skyline：Skyline 默认都不会被预加载，开发者需要手动调用 wx.preloadSkylineView 做预加载。 3、Skyline -> Skyline：速度变快，因为多个页面复用同一个 Skyline 实例。   根据上述三种情况的分析，为了保证混用渲染引擎的页面切换耗时最短，我们需要在以下时机进行预加载。 wx.preloadWebview 当 Skyline 页面跳转到 Webview 页面时并且全局 renderer 是 Skyline 由于 Skyline 不影响渲染线程，所以预加载 Webview 的时机只需要在主要逻辑完成后即可 // Skyline page.js Page({ onShow() {       // 等待执行完主要逻辑后进行预加载       wx.preloadWebview()     } }) wx.preloadSkylineView 当 Webview 页面跳转 Skyline 页面时，因为 Skyline 默认不预加载，所以我们需要手动预加载。 建议大家在 Skyline 页面的 onShow 生命周期里延迟一段时间后调用，这样可以保证在 Skyline 页面被返回时也能够重新预加载。 注意：预加载会影响当前页面的渲染，建议异步延迟去执行预加载操作 // Webview page.js Page({ onShow() {       // 延迟 200ms 预加载 Skyline       // 建议这个延迟时机在页面渲染完成之后       setTimeout(() => {         wx.preloadSkylineView()       }, 200)     } }) 做好预加载是提高 Webview 和 Skyline 混用体验的有效方式，需要根据实际情况进行调整和优化，以达到最佳的预加载效果。

为更好地保护用户隐私信息，优化用户体验，平台对小程序内的收集用户隐私行为进行规范，开发者可自查所涉及的违规内容，并参照修改指引进行相应整改。 常见违规内容 一、隐私政策协议默示同意 小程序在收集用户数据前，应提示用户阅读所提供的隐私政策，向用户如实披露数据用途、使用范围等相关信息，并确保小程序的用户个人信息处理活动已依法取得用户同意。 案例1：隐私政策协议勾选框已默认勾选，默示用户同意隐私政策协议。 [图片] 案例2：显示“用户登录即代表同意”或其他相同语义，默示用户同意隐私政策协议。 [图片] 案例3：隐私政策协议弹窗仅提供同意选项，默示用户同意隐私政策协议。 [图片] 修改指引：隐私政策协议需以明示同意的方式征得用户同意，如隐私政策协议弹窗提供明确的同意（允许）和不同意（拒绝）选项进行选择，或在登录界面提供主动勾选的方式，不应设置为默认勾选。 [图片] 二、在用户未体验具体功能前，就要求进行授权 小程序应在提供使用权限或收集用户个人信息对应的相关功能或服务时，向用户申请授权。若用户未触发需使用权限或用户个人信息的相关功能或服务时，就要求用户进行授权，这种行为涉及违规收集用户个人信息。 案例1：在用户未实际体验小程序对应权限的功能或服务时，就要求用户进行授权。 修改指引：用户使用小程序时，应该在实际体验所需对应权限的功能或服务时，再弹出相应权限的授权框，让用户进行授权。 [图片] 案例2：在用户未实际体验小程序对应权限的功能或服务时，就要求用户连续进行多次授权。 修改指引：用户使用小程序时，应该在实际体验所需对应权限的功能或服务时，再弹出相应权限的授权框，让用户进行授权，不可要求用户一次性同意小程序涉及的所有权限。 [图片] 案例3：首页打开即要求用户授权登录。 修改指引：用户打开小程序后，应该先通过完整页面展示小程序的功能，在用户体验功能服务后自主触发登录。（若小程序仅提供给特定人员使用，需在首页有明显的使用范围（特定范围）说明，详情可参考：小程序账号登录规范要求与修改指引） [图片] 三、用户不同意授权则拒绝提供服务 小程序在非服务所必需或无合理应用场景下，用户拒绝相关个人信息授权申请的，不能拒绝提供小程序全部服务。若用户不同意在前述情形下进行授权时，小程序通过自动退出、关闭或其他方式拒绝提供其全部服务，导致用户完全无法进行使用的，这种行为涉及强迫用户授权个人信息。 案例1：用户点击拒绝授权后，小程序则无法继续使用。 修改指引：用户拒绝授权某权限，可暂停提供和该权限有关的功能，但和该权限无关的功能，应该可让用户继续进行使用，不可直接中断全部服务体验。 [图片] 案例2：用户点击拒绝授权后，小程序显示需授权的提示框无法消除，强迫用户必须进行授权才可继续使用小程序。 修改指引：用户拒绝授权某权限，可暂停提供和该权限有关的功能，但和该权限无关的功能，应该可让用户继续进行使用，不可直接中断全部服务体验。 [图片] 案例3：用户在登录页面，点击取消/拒绝登录按钮无响应，或未提供返回/退出按钮等，导致小程序无法继续使用。 修改指引：用户拒绝登录，应该提供明显的取消/拒绝/暂不登录/返回首页的按钮，让用户退出登录界面，不可直接中断全部服务体验。 [图片] 开发者如有其他疑问，可以通过目前开放的咨询渠道反馈： 1、微信开放社区-交流专区-小程序发帖咨询-提出问题-运营相关问题 2、站内信通知-客服咨询入口

在日常应用中，半屏可拖拽交互已经成为了用户体验的重要组成部分。页面内的分段式拖拽、半屏拖拽放大等等，这些常见的场景使用半屏拖拽交互可以很好的提升用户的体验感。 目前，实现半屏拖拽交互可以使用手势协商系统来实现，不过需要理解手势协商系统并编写相关代码。 考虑到半屏拖拽交互比较常见，为了让小程序开发者更加轻松地实现半屏拖拽交互，小程序 Skyline 渲染引擎推出了 draggable-sheet 组件。这个组件自带半屏拖拽交互，可以帮助开发者省去手势协商相关的代码，只需要简单配置容器大小、吸附阈值等参数即可实现半屏拖拽交互。无论是半屏弹窗、分段式半屏还是其他场景，draggable-sheet 组件都能帮助你实现更加出色的用户体验。 快速接入 使用 draggable-sheet 组件的流程如下： Step 1. 配置 draggable-sheet 组件 在页面中引入 draggable-sheet 组件，并且配置 draggable-sheet 组件的参数，包括容器大小、吸附阈值等。 在 draggable-sheet 组件内嵌套 scroll-view 组件，且声明 associative-container="draggable-sheet" 将 scroll-view 组件与 draggable-sheet 组件进行关联即可。 <!-- page.wxml --> <draggable-sheet   class="sheet"   initial-child-size="0.5"   min-child-size="0.2"   max-child-size="0.8"   snap="{{true}}"   snap-sizes="{{[0.4, 0.6]}}" >   <scroll-view     scroll-y="{{true}}"     type="list"     associative-container="draggable-sheet"     bounces="{{true}}"   >   <!-- 这里放置半屏内容 -->   </scroll-view> </draggable-sheet> Step 2. 使用 DraggableSheetContext 接口控制滚动 使用 createSelectorQuery 方法获取 draggable-sheet 组件的节点，然后通过 node 方法获取 DraggableSheetContext 实例。调用 DraggableSheetContext.scrollTo 即可将 draggable-sheet 组件 滚动到指定位置。 // page.js Page({   onReady() {     this.createSelectorQuery().select('.sheet').node().exec(res => {       // 使用 sheetContext 控制 draggable-sheet 组件的滚动       const sheetContext = res[0].node       sheetContext.scrollTo({         size: 0.7,         animated: true,         duration: 300,         easingFunction: 'ease'       })     });   }, }); 使用 draggable-sheet 组件，你可以轻松实现半屏拖拽交互，让用户体验更加自由。同时，使用 DraggableSheetContext 接口，你可以动态控制 draggable-sheet 组件的行为，实现更加灵活的交互效果。  例如，我们这里演示了使用 draggable-sheet 实现的 分享弹窗效果 和 分段式拖拽查看旅游景点列表～ [图片][图片] 与其他组件联动  除了简单的半屏弹窗之外，我们还可以通过 worklet:onsizeupdate 回调，在 draggable-sheet 组件尺寸发生变化时，将 draggable-sheet 组件与其他组件进行动画交互。 例如，我们这里在 draggable-sheet 接近搜索框时，与搜索框衔接为一体，隐藏后面的页面，以此实现更流畅的展示效果。 首先，给 draggable-sheet 配置监听函数 worklet:onsizeupdate="onSizeUpdate" <!-- page.wxml --> <view class="search-wrp"> ... </view> <draggable-sheet  class="sheet"  ...  worklet:onsizeupdate="onSizeUpdate" > 然后，我们在 onSizeUpdate 发生变化时，通过 worklet 函数改变共享变量的值即可 Page({   // 监听 draggable-sheet 尺寸变化去改变 progress onSizeUpdate(e) { 'worklet' const distance = sheetHeight - e.pixels this.progress.value = distance >= 20 ? 1 : distance / 20 }, onLoad(options) { const progress = wx.worklet.shared(1) // 绑定 worklet 动画，progress 变化时改变搜索的背景来显示/隐藏 map this.applyAnimatedStyle('.search-wrp', () => { 'worklet' const t = progress.value return { backgroundColor: `rgb(245, 242, 241, ${1 - t})`  } }) ... this.progress = progress }, }) [图片] 如果想要快速了解和实践本文中的案例，可在 PC 端点击 代码片段 进行调试。 注意：draggable-sheet 组件支持页面内的拖拽放大功能，如果需要实现页面返回的功能，可以使用 预设路由 来实现。 总结 draggable-sheet 组件通过拖拽的方式来展开或关闭一个面板，提供更加直观、自然的用户交互体验。不仅能够节省屏幕空间，让用户更加高效地利用界面，适用于展示评论列表、商品列表、展开筛选条件、展示更多信息等场景。对于需要提供更加灵活、自由的用户交互体验的小程序来说，draggable-sheet 组件是一个非常有用的功能。 因此，我们邀请大家尝试将这个能力应用到自己的小程序上，通过这个组件来提升用户体验和交互效果。结合其他组件和功能，打造出更加丰富、多样的小程序～

App跳转小程序失败，开发者可先按照以下指引自查： 1、AppID和BundleId的绑定关系，还有AppID和小程序userName的绑定关系是否正确 2、参数是否正确（AppID或userName） Android开发示例： https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Launching_a_Mini_Program/Android_Development_example.html iOS开发示例： https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Launching_a_Mini_Program/iOS_Development_example.html

更新时间：2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题，对于来自低于2.27.1版本的访问，小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称，插件通过 wx.getUserInfo 接口将正常返回用户头像昵称。 更新时间：2022年9月28日考虑到近期开发者对小程序用户头像昵称获取规则调整的相关反馈，平台将接口回收的截止时间由2022年10月25日延期至2022年11月8日24时。 调整背景在小程序内，开发者可以通过 wx.login 接口直接获取用户的 openId 与 unionId 信息，实现微信身份登录，支持开发者在多个小程序或其它应用间匿名关联同一用户。 同时，为了满足部分小程序业务中需要创建用户的昵称与头像的诉求，平台提供了 wx.getUserProfile 接口，支持在用户授权的前提下，快速使用自己的微信昵称头像。 但实践中发现有部分小程序，在用户刚打开小程序时就要求收集用户的微信昵称头像，或者在支付前等不合理路径上要求授权。如果用户拒绝授权，则无法使用小程序或相关功能。在已经获取用户的 openId 与 unionId 信息情况下，用户的微信昵称与头像并不是用户使用小程序的必要条件。为减少此类不合理的强迫授权情况，作出如下调整。 调整说明自 2022 年 10 月 25 日 24 时后（以下统称 “生效期” ），用户头像昵称获取规则将进行如下调整： 自生效期起，小程序 wx.getUserProfile 接口将被收回：生效期后发布的小程序新版本，通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。自生效期起，插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回：生效期后发布的插件新版本，通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的插件版本不受影响，但如果要进行版本更新则需要进行适配。通过 wx.login 与 wx.getUserInfo 接口获取 openId、unionId 能力不受影响。「头像昵称填写能力」支持获取用户头像昵称：如业务需获取用户头像昵称，可以使用「头像昵称填写能力」（基础库 2.21.2 版本开始支持，覆盖iOS与安卓微信 8.0.16 以上版本），具体实践可见下方《最佳实践》。小程序 wx.getUserProfile 与插件 wx.getUserInfo 接口兼容基础库 2.27.1 以下版本的头像昵称获取需求：对于来自低版本的基础库与微信客户端的访问，小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称，插件通过 wx.getUserInfo 接口将正常返回用户头像昵称，开发者可继续使用以上能力做向下兼容。对于上述 3，wx.getUserProfile 接口、wx.getUserInfo 接口、头像昵称填写能力的基础库版本支持能力详细对比见下表： [图片] *针对低版本基础库，兼容处理可参考 兼容文档 请已使用 wx.getUserProfile 接口的小程序开发者和已使用 wx.getUserInfo 接口的插件开发者尽快适配。小游戏不受本次调整影响。 最佳实践小程序可在个人中心或设置等页面使用头像昵称填写能力让用户完善个人资料： [图片] 微信团队 2022年5月9日

开发者可通过开发者工具中的性能扫描工具提前发现代码中的可优化项： 1. 代码包不包含插件大小超过 1.5 M 【建议】小程序代码包单个包大小限制为2M。因此我们建议开发者在开发时，如果遇到单包体积大于1.5M的情况，可以采取分包的方式，把部分代码拆分到分包去，降低单个包的体积，提升小程序的加载速度。具体可以查看文档《使用分包》。 2. 引用插件大小超过 200 K 【知会】小程序插件的大小是会算进小程序代码包2M体积限制中的。因此当我们发现开发者引用的插件体积大于200K时，会对开发者予以提示，避免出现上传阶段提示代码包体积超限，但是不知道为何超限的问题。 3. 图片和音频资源大小超过 200 K 【建议】小程序代码包里可以存放一些必要的静态资源（如tabbar的icon等）；但其他非必要的静态资源体积过大会影响小程序代码包加载速度。因此我们建议图片、音频等静态资源体积大小超过200K时，将它们上传到CDN，用URL引入会是个更好的选择。 4. 主包存在仅被其他分包依赖的JS 【建议】当主包里存在一些JS文件只会被分包使用（而主包自己不使用）时，我们建议把这些JS文件从主包中拆分出去，放到对应的分包里，从而优化主包的加载速度。 5. 主包存在仅被其他分包依赖的组件 【建议】当主包里存在一些组件只会被分包使用（而主包自己不使用）时，我们建议把这些组件从主包拆分出去，并且可以使用 分包异步化 这个特性加载这些组件，从而优化主包的加载速度。 6. 存在无使用的插件 【必须】如果有无使用的插件，请将其从 app.json 中去除。不然它会占用代码包体积，也会延迟代码包加载的时间。 7. 存在无使用的组件 【必须】如果在对应页面JSON的 `usingComponents` 里声明的组件但是没有使用，请将其从 `usingComponents` 里去除。 8. 未开启JS压缩 【必须】在工具「详情」-「本地设置」中开启「上传代码时自动压缩脚本文件」的设置 [图片] 9. 未开启WXML压缩 【必须】在工具「详情」-「本地设置」中开启「上传代码时自动压缩wxml文件」的设置 [图片] 10. 未开启WXSS压缩 【必须】在工具「详情」-「本地设置」中开启「上传代码时自动压缩样式文件」的设置 [图片] 11. 存在无依赖文件 【必须】在「代码质量」面板，点击「建议去除」后，可以打开代码依赖分析面板的「无依赖文件」页面，这里可以看到代码包里没有被用到的文件。请在代码包中去除这部分文件，减小体积并优化加载速度。 在本地开发的过程中，会自动过滤无依赖的文件，如果出现误过滤的情况，可以在 project.config.json 的 setting 字段中添加 ignoreDevUnusedFiles 为 false，也可以在 packOptions 的 include 字段中手动将被忽略的文件引入，同时欢迎发帖反馈误报的情况提交代码片段帮助我们完善此功能 注意：页面若为配置在 app.json 中，将被识别为无依赖文件 [图片] 12. 未开启组件懒注入（按需注入） 【必须】在 app.json 中加入 `"lazyCodeLoading": "requiredComponents"` 可以开启小程序组件按需注入特性。 其他优化内容，请点击学习《小程序性能优化实践》课程 [图片]

平视显示器（head up display）简称HUD。游戏经常在三维场景上叠加文本或二维图形信息，如弹窗，血量条等，同时需要保证它们在屏幕上的位置和大小不变。 传统的H5游戏可以使用dom，或是在原本的webgl上面盖一个新的2D canvas（画布）做为HUD来实现，同时使用其接口就可以画出HUD所需要的内容。 但微信小游戏只支持一个画布，无法和传统H5游戏的绘制方式一样。因此，要在3D世界中实现HUD就必须在这个唯一的画布上实现。 我们在后台收到了许多反馈：如何用小游戏的框架来实现HUD的绘制。这一期的小故事，我们跟大家分享如何在微信3D小游戏中绘制HUD: 本文的内容包括： 1.微信小游戏只支持一个画布 2.如何使用三维平面模拟HUD？ 3.相机变化导致HUD产生位移缩放 4.如何用图形渲染管线解决上述问题？ 5.绘制场景时视点变化与投影阶段的问题 6.如何使用顶点着色器解决上述问题？ 微信小游戏只支持一个画布 与浏览器不同，微信客户端只有一个画布，并且不能使用html。 普通H5游戏会使用html，或是创建一个新的2D canvas标签，定位在原本的webgl canvas上面，同时使用2D canvas的接口就可以画出HUD的内容。但微信小游戏不支持这样做。所以在三维世界中要实现HUD，需要在一个画布上实现。 所以在三维世界中要实现HUD，则必须在这个唯一的画布上实现。 如何使用三维平面模拟HUD？ 对于图像，webgl可以通过纹理贴图来展示图像。开发者可将图片作为的纹理贴图，贴在一个三维矩形平面上，使平面一直正对相机，来模拟HUD。 [图片] 对于文字，微信小游戏三维的canvas是使用webgl作为context的。但是webgl却无法像2D的context能直接画文字。开发者如果直接用webgl画出文字，需要导入文字模型的顶点数据，但由于文字比较复杂，顶点数量多，相当于渲染了一个复杂的3D物体，这种方式无论是从文件大小还是性能上，都会有损体验。 [图片] 那么是否可以使用2D canvas 绘好文字，再作为纹理贴在三维平面上呢？ 虽然微信小游戏只能渲染一个canvas，但是开发者可以创建多个的canvas实例。 Step1：开发者可创建一个离屏的2D canvas，再使用2D的接口绘制文字、图片等； Step2：开发者可将这个离屏canvas传给webgl，当成一个texture，贴到一个三维的平面物体上，使其永远都在相机的正前方，通过这样模拟HUD 。 补充 webgl支持直接将canvas作为纹理； void gl.texImage2D(target, level, internalformat, format, type, HTMLCanvasElement? pixels)。 [图片] 相机变化导致HUD产生位移缩放 游戏场景中的相机是会改变的，比如说吃鸡游戏中的第一人称和第三人称视角转化。我们发现了一个问题：当相机的可视范围变化的时候，HUD就会发生形变。 [图片] 那是因为视野看的越广，映射到屏幕上的时候，同一个物体就显得越小。 我们需要保证HUD在任何视角下位置大小都是正确无误的。那么如何才能做到呢？ 要解决这个问题就需要明白计算机是如何把三维场景画到二维的屏幕上的。这个画的过程也就是计算机图形渲染管线帮我们完成的。 如何用图形渲染管线解决上述问题? 画一个三维物体到二维平面可以分为三个阶段： ●“准备数据” （应用程序阶段） ●“画点” （几何阶段） ●“画像素” （光栅化阶段） [图片] 一个HUD实际上是一个矩形的平面物体，通过矩形的4个顶点就可以描述出来一个平面的位置、大小。为了让平面的位置，大小看起来没问题，我们需要修改“画点”阶段的逻辑。这个阶段又可以进行如下的细分。 [图片] 与摄影机相关的逻辑，是视点变换还有投影阶段。我们可以通过修改这两者的逻辑来达到我们的目的。 绘制场景时视点变化与投影阶段的问题 1.视点变化阶段的问题 我们需要绘制摄像机看到的世界，而摄像机可以处在任意位置观察这个世界。视点变化本质是就是根据摄像机看的方向来旋转物体，从而让三维空间的物体正确旋转到观察者看到的样子。原本是摆正放的物体，由于观察者的视角问题（歪着看），所以显示出来物体最终也是歪的。 [图片] 通过在应用程序阶段定义相机的视点、观察目标点以及上方向等数据，我们可以得到一个叫做视图矩阵（View Matrix）的矩阵。把这个矩阵与物体的位置做矩阵乘法就可以得到物体变化后的新位置。 因为游戏世界中，摄像机的位置是不停变化的，而我们的物体却需要一直出现在摄像机正前方。所以游戏场景中的视觉矩阵（View Matrix）在每一帧的渲染中，可能都在变化。这里我们只要将HUD原本一直在变化的视觉矩阵（View Matrix）替换为我们需要的，并且保持不变就好了。 2.投影阶段的问题 投影其实是把透视摄像机原本的可视范围，压缩成一个单位立方体。 [图片] 再通过屏幕映射，就会出现如下的效果出来。 [图片] 这一个过程中，会通过摄像机定义的数据（比如长宽比，视场，近截面，远截面），来生成一个叫做投影矩阵（Projection Matrix）的矩阵。将这个矩阵与位置信息进行矩阵乘法，再进行一些归一化操作，就会得到单位立方体内的位置。 和视觉矩阵（View Matrix）一样，对于HUD的物体，我们也不能使用透视摄像机生成的矩阵，否则就会可能导致大小变化。我们替换成正视摄像机的矩阵。这样算出来的位置就是永远都是正常的，不需要担心游戏中更新了相机的数据。 如何使用顶点着色器解决上述问题? 现在我们要用顶点着色器来修改视点变换还有投影的逻辑。 顶点着色器与片元着色器都是 webgl 提供给我们用来操作渲染管线的能力。让我们可以使用glsl 这种编程语言来对 GPU 的能力进行编程。 [图片] 顶点着色器运行在“画点”阶段（几何阶段），也就是对每个三维物体的顶点进行计算。片元着色器运行在“画像素”阶段（光栅化阶段），把顶点围起来的像素（其实是片元）画上颜色。 我们可以通过顶点着色器，修改视点变换与投影的逻辑，最后达到我们的效果。 总结 由于微信小游戏支持一个单独的画布，开发者想要在任何游戏场景下绘制正常的HUD，可以通过顶点着色器的能力，去修改视点变换与投影的所用到的矩阵，最终来解决这个问题。 微信小游戏还有很多与H5游戏、客户端游戏不一样的设计理念与特点，我们会在后续的文章里继续分享微信小游戏背后的小故事。 历史文章回顾 ：小程序•小故事 如果大家有想了解的小程序相关能力的故事，欢迎在评论区留言，我们后续会考虑将这些能力背后的故事分期分享给大家。