微信小程序页面之间正向传值和逆向传值 正向传值 一 直接使用URL传值 [代码] wx.navigateTo({ url: `/pages/contacts-edit/contacts-edit?name=zhangsan&idx=1`, }) [代码] 但是如果一个对象结构比较复杂, 数据量比较大, 即使转换成JSON也有可能会被莫名其妙的截取. 所以使用URL传值的时候, 需要先编码 我是这样做的 [代码]// A页面触发事件, 跳转到B页面 _onClickCell: function (e) { let contacts = { name: '张三', phone: '13800001111', safePhone: '138****1111', idCard: '230524202113324455', safeIdCard: '230524********4455', typeStr: '成人', gender: '0', genderStr: '保密' } // 先对数据进行JSON let jsonStr = JSON.stringify(contacts) // 对数据进行URI编码, 如果不进行这一步操作, 数据有可能会被截断, 少量数据没有问题, 如果是一个大的对象, 就容易被截断获取不到完整的数据 let data = encodeURIComponent(jsonStr) wx.navigateTo({ url: `/pages/contacts-edit/contacts-edit?contacts=${data}&idx=${idx}`, }) }, // B页面再onLoad方法中接收参数 onLoad: function (options) { let idx = (!!options.idx) ? Number(options.idx) : -1 let contacts = {} if (!!options.contacts) { let jsonStr = decodeURIComponent(options.contacts) contacts = JSON.parse(jsonStr) } this.setData({ contacts, idx }) }, [代码] 二 使用eventChannel来传递 [代码]//A页面准备跳转到B页面 _onClickCell: function (e) { let address = { id: 457, name: '小艾-3', countryCode: '86', phone: '13892292222', reginoCode: '871', city: '市辖区', area: '海淀区', street: '东北旺路8号院中关村软件园8号楼华夏科技大厦', address: '中国北京市市辖区海淀区东北旺路8号院中关村软件园8号楼华夏科技大厦' }, wx.navigateTo({ url: '/pages/address-edit/address-edit', success: res => { // 这里给要打开的页面传递数据. 第一个参数:方法key, 第二个参数:需要传递的数据 res.eventChannel.emit('setAddressEditData', address) } }) } //B页面在onLoad方法中接收参数 onLoad: function (options) { // 接收上个页面传递来的数据 let eventChannel = this.getOpenerEventChannel() // setAddressEditData和上个页面设置的相同即可 eventChannel.on('setAddressEditData', (address) => { this.setData({ address: address || {}, }) }) }, [代码] 逆向传值 一 使用全局对象, 获取全部页面来逆向传值 [代码] _onClickComplete: function () { // 获取当前全部的页面栈 let arr = getCurrentPages() // 获取到要逆向传值的上一个页面 let lastPage = (arr.length >= 2) ? arr[arr.length - 2] : undefined // 判断拿到的上一个页面是不是我们要的页面 if (!!lastPage && lastPage.route == 'pages/contacts-list/contacts-list') { /* 这里我们就拿到了上一个页面的页面对象, 这里其实我们就可以使用lastPage做很多事情了, 例如直接操作lastPage.data, 修改上一个页面的数据 或者调用这个页面内的方法, 我上一个页面预留了一个更新方法, 所以这里就直接用上一个页面调用数据刷新的方法, 我这里给赋值, 就可以携带数据回上一个页面了 */ lastPage.updateContactList(this.data.contacts, this.data.idx) // 返回上一个页面 wx.navigateBack() } }, [代码] 二 使用eventChannel来逆向传值 B->A [代码]// B页面 _onClickComplete: function (e) { let eventChannel = this.getOpenerEventChannel() // updateAddressListData 这个方法需要上一个页面的支持, 上一个页面在navigateTo方法中的events数据中定义这个方法来接收数据 eventChannel.emit('updateAddressListData', this.data.address, this.data.idx) wx.navigateBack() }, // A页面需要的支持 _onClickCell: function (e) { wx.navigateTo({ url: '/pages/address-edit/address-edit', events: { // 这里用来接收后面页面传递回来的数据 updateAddressListData: (address, index) => { // 这里处理数据即可 } } }) } [代码] 代码片段

各位微信开发者： 以下是 iOS 微信客户端7.0.12.17众测、 开发者工具提供 API Mock 能力 、云开发支持按量付费及上周小程序相关能力更新及我们在社区收到的问题反馈、需求的处理进度，希望同大家一同打造小程序生态。 扫码报名参加 iOS 微信客户端7.0.12.17众测为了使大家开发的小程序更好的和微信新客户端版本进行融合，欢迎大家扫码报名参加 iOS 微信客户端7.0.12.17众测。该版本针对如下能力做了更新，你现在可以提前体验并留意小程序的稳定性，让用户更好地使用小程序： 小程序下载代码包相关优化 - 小程序启动流程相关优化 小游戏启动流程优化，重点关注插件小游戏 扫描下方二维码下载体验，本次限额5000人。使用过程中若发现问题，欢迎在社区 微信客户端内测主页 发表标题包含 「微信7.0.12」的问答帖子，或在本帖下方留言进行反馈。 发帖与留言请提供以下信息： 手机型号手机操作系统  必要时可提供 代码片段 我们将尽快回复大家遇到的问题，感谢大家支持。 [图片] 你也可以在社区 微信客户端内测主页 中 查看原公告分享本消息。 微信开发者工具提供 API Mock 能力 为了方便开发者进行功能开发和调试，从 1.02.202003062 版本开始，微信开发者工具提供 API Mock 功能，可模拟如[代码]wx.request[代码] 、[代码]wx.downloadFile[代码] 以及 [代码]wx.getBackgroundFetchData[代码] 等API 的调用结果，极大地降低了小程序的开发成本。 API Mock 功能可覆盖的应用场景包括但不限于： 模拟特定用户场景数据，如通过配置 [代码]wx.getLocation[代码] 的返回数据，从而模拟位置信息； 模拟各类异常情况，如通过配置[代码]wx.request[代码]的回调为 fail，从而模拟网络异常； 模拟部分微信开发者工具中暂不支持调试的 API，如发票相关的 [代码]wx.chooseInvoic[代码]等接口。 开发者可通过登录微信开发者工具，在调试器的 Mock 面板中使用该功能。 [图片] 详细功能介绍请参考文档《API Mock》。 你也可以在社区 微信开发者工具主页 中 查看原公告分享本消息。 小程序·云开发支持按量付费 为助力开发者以更低的资源成本实现小程序的功能迭代，从开发者工具 1.02.2003022 版本开始，小程序·云开发新增按量付费功能。在按量付费模式下，系统每月会提供一定的免费额度供开发者使用，超过免费额度的资源消耗将按照对应的刊例价扣除费用。 按量付费功能适用于： 对于无法准确预估资源使用量的小程序，按量付费功能在保证了正常资源使用的同时，也避免了当用户访问量突增时，由于资源储备不足所导致的超限停服等问题； 对于仅使用部分云开发资源类型的小程序，按量付费功能按消耗收费的模式将极大地降低资源成本。 开发者可通过登录微信开发者工具的云开发控制台，在环境设置中直接开通按量付费功能。 [图片] 具体按量付费计费策略请参考文档《小程序·云开发按量付费》。 上周问题反馈和处理进度（03.02-03.06）已修复的问题云开发初始化失败的问题 查看详情 使用 iPhone 浏览微信公众号下拉文章中微信名称出现乱码的问题 查看详情 修复中的问题关系互动数据报错 [JSServer] get source fail，体验版没报错线上版报错的问题 查看详情 GameServerManager 中 onGameStart 事件监听不到的问题 查看详情 使用2.10.2基础库在开发者工具上无法播放广告的问题 查看详情 云函数执行报错,ResourceExhausted 的问题 查看详情 直播开通了 但提示没插件权限的问题 查看详情 小程序使用 three.js 加载模型 在 iPhoneX 无法渲染出模型的问题 查看详情 小程序后台第三方服务停止授权弹窗提示显示名称错误的问题 查看详情 微信内测版7.0.12小程序调 wx.scanCode 扫码 result 返回值 null 的问题 查看详情 上传代码后，显示上传代码失败 Error 的问题 查看详情 创建第三方平台时平台名称测试白名单点击后页面有BUG 查看详情 下载资源失败，提示“downloadFile:fail getParentFile failed” 查看详情 小程序web-view，长按图片只要包含小程序码，菜单点击没反应，无法识别/保存/发送的问题 查看详情 横屏，小游戏不全屏显示的问题 查看详情 chooseImage 安卓下面选中图片有的无法点击完成 查看详情 使用开放域 发好友互动道具 某些安卓机型 nickName 属性不存在 查看详情 GameServerManager 中 startGame 经常失败的问题 查看详情 官方文档说明存在歧义的问题 查看详情 文档单词错误的问题 查看详情 公众号名称显示错误的问题 查看详情 需求反馈需求评估中 小游戏实时日志开放使用的需求 查看详情 微信小程序对摄像头控制支持的更好的需求 查看详情 swiper 组件的面板指示点，希望可以增加样式 查看详情 性能监控 功能提供详细信息的需求 查看详情 【小程序直播】的建议，希望增加功能 查看详情 swiper 组件采用衔接滑动时，配置向左或向右循环滚动的需求 查看详情 微信 Mac版公测版 2.4.0 问题反馈 查看详情 小程序运维中心错误日志很难定位问题 查看详情 官方来看看，提个需求，希望 wx.setNavigationBarColor 增加设置全局导航栏颜色的需求 查看详情 需求：wx.chooseImage 成功后返回的 tempFiles 里能否增加name字段的需求 查看详情 小游戏是否提供自定事件上报功能 查看详情 关于 Page 组件的 disablescroll 配置支持动态设置的建议 查看详情 打包文件格式自定义支持 查看详情 pc 版微信支持创建快捷方式的需求 查看详情 ​ 微信团队 ​ 2020.03.10

平视显示器（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游戏、客户端游戏不一样的设计理念与特点，我们会在后续的文章里继续分享微信小游戏背后的小故事。 历史文章回顾 ：小程序•小故事 如果大家有想了解的小程序相关能力的故事，欢迎在评论区留言，我们后续会考虑将这些能力背后的故事分期分享给大家。