[视频] 你好，我是李艺。 上节课我们学习了按需注入和初始渲染缓存，明确了静态导航页适合使用初始渲染缓存，动态详情页适合使用骨架屏的策略。这节课我们学习分包、独立分包以及分包预下载。 首先我们看一下问题，在冷启动流程中间使用按需注入改良的只是代码注入阶段的性能，如果这个代码包本身它就比较大，那么在第一阶段，也就是资源准备阶段，就会浪费大量的时间，还有如果是代码包过大，它主包超过2MB，在微信开发者工具里面根本也没有办法上传以申请这个版本的审核，为了让这个代码包瘦身，微信开发者工具提供了静态代码依赖分析这个工具，可以帮助开发者找到无依赖文件。 但是有一点我们需要注意，有一些文件它表面上看起来是用不到的，但其实是不能删除的，因为有时候它是在运行时动态加载并使用的，如果这个代码包删除了无依赖的文件以后依然超过了2MB的限制，这时候应该怎么办？小程序又提供了分包以及独立分包的机制，只要单个代码包不超过2MB，总包大小不超过20MB即可。有些开发者可能觉得2MB限制太小了，决定阈值的从来其实都不是规定，而是网络环境和用户群体，国内有很多网民还在使用低端机，包括WiFi以及4G网络环境其实还没有100%的普及，或许等以后5G技术普及以后，限制会进一步的放开，那个时候主包大小或许会进一步的放大，在目前这个阶段，在当下网络环境里面如果要想提升小程序的启动性能以及运行性能，只能在深谙小程序的运行机制以及启动流程的前提之下，在已有的技术框架之下靠精耕细作的精神一个字节 一个字节地去优化。 接下来我们看项目实践。 目前我们的项目已经超过了2MB，必须通过分包分割总代码包的大小。 首先我们看实践一：用户主页分包、创建tab-bar组件。 将用户主页放在分包内，只需要给页面所在的目录添加分包配置就可以了，在app.json全局配置文件里面，我们可以在subpackages这个节点之下添加一个分包设置，root设置为当前页面所在的目录的一个名称，然后再加上pages设置就可以完成用户主页的一个分包设置了。 在小程序里面，如果是使用配置的方式开启tabBar导航，或者是使用这种官方自定义的方式，也就是我们通过在配置文件里面设置tabBar.custom等于true这样的方式实现tabBar导航组件，这个时候tabBar它页面地址只能放在主包里面，为了破除这个限制，我们可以使用自定义的方式实现tabBar的导航。 首先我们需要在app.json配置文件里面将tabBar的配置删掉，我们现在不需要这个配置了，然后我们在components目录下面创建一个tabBar的组件，用它提供全局的导航功能，在组件的JS代码里面会创建一个select方法，它设置哪个链接，当前是选中的状态，这个方法是给外部的代码进行提供的，这个组件的wxml代码很简单，主要是渲染一个list列表，而且这个list的数据还是从原来app.json文件里面复用过来的，wxss样式仅包含自定义组件本身它所需要的样式，这个里边有一个特殊的类样式，就是bar__active。这个是选中的样式，当这个链接与当前这个页面地址一致的时候这个文本它会呈现红色，这个图标也是红色图标，文本的选中颜色还有文本的默认颜色也就是它默认呈现的颜色，与我们原来在app.json配置文件里面的设置是一致的，完全以自定义组件这种方式实现的tabBar导航有哪些优点？我们一起看一下。 首先第一点，页面不再受分包的限制。我们可以将这个页面放到任何一个分包里面去；第二点就是tab-bar组件里边用到的图标，也不再被限制只能放在本地；第三点就是这个代码里面所有的tabBar页面的跳转也不用再单独使用wx.switchTab这样的接口，可以统一使用wx.navigateTo或者是wx.redirectTo这两个接口任何一个都可以，甚至tab-bar组件本身，如果我们愿意的话还可以将它进一步的优化，不放在主包里边，放在分包里面也是可以的。 现在我们开始实践一的代码演示。 在拿到这个源码以后，我们需要在小程序里面进行一个代码的引入，引入方式也很简单，只需要找到对应的目录然后选择，选择以后这个地方AppID要选择我们自己的账号的AppID，这个名称也可以修改，然后单击确定就可以了。我们要实现分包，实现用户主页的一个分包，首先我们看一下app.json这个文件，这个文件里面，目前我们这个地方其实已经有了一个分包设置了，在subpackages下面只需要在这个底下再添加一个新的配置就可以了。这个里面第一个字段要写的是root，它代表的是我们分包的一个地址，这个地方我们写user，因为我们这个项目底下确实有一个user的目录，也就是这个，根目录指定以后，接下来我们要指定pages，也就是这个页面了，这个页面它是我们在分包下面的一个相对地址，我们可以在这个地方复制一个相对路径，然后粘到这个地方，前面这些是不需要的，它只需要从pages下面，也就是从我们目录下面，开始计算路径，这样的话我们分包的一个设置就算是已经完成了。 再往下我们再创建我们的自定义导航按钮，自定义导航的组件在我们的components目录下面，然后去创建这个组件，现在这个目录还没有，可以创建一下目录，然后这个目录下面再创建一个tab_bar这样的子目录，在这个目录下面放tab-bar自定义组件它的一个源码，可以采用一种快速的新建的方式，比如这个地方我们选择新建Component选择这个菜单，然后写入一个index，完成以后，下面所有的四个文件已经全部默认帮我们创建了，下面开始实现这个代码，这个代码我们之前这已经有实现好的，为了快速我们直接复用我们已经实现的代码，这是页面的标签代码，这个标签代码里面我们可以看一下，主要是一个列表渲染，这个地方用了一个wx:for这样一个列表渲染，然后循环渲染这个list里边还有关于image这个地方有一个判断，当前的index是否等于selected就是我们当前选择的索引，如果等于的话，然后去渲染这样的一个图标地址，如果否的话就是选择另外一个图标地址，这是它的样式。 这个地方是我们这个页面的就是文本 一个标题或者说我们页面的一个名称，这个页面的一个跳转是靠我们绑定的一个事件，在这个上面可以看一下，在这个地方有一个tap 一个绑定，nav的方法上面，我们再看一下JS代码，这是我们JS代码，这个JS代码里面nav，这是我们刚才提到的用于页面跳转的一个方法，上面这有一个select它的参数是index就是索引，我们当前选择哪一个，这个方法是对外提供的，在这个页面里面使用这个组件的时候，稍后我们会调用这个方法。 再往上就是data对象了，第一个是一个selected，就是选择的索引，我们当前选择这列表里面哪一项作为选中的页面，它的默认是0，下面这个list这些数据是我们原来的app.json里面的数据，它的一个修改，我们可以看一下我们原来的数据这个地方 这有一个list，我们可以将这个list给它拷贝一下，除了这个list还有两个color，这里有一个color 这有一个color，我们先将这个list给它拷贝一下，然后到tab_bar这个里面，可以放在这个地方对比一下，这两个数据是很像的，它的差别其实只是我们pagePath前面多了一个斜杠，包括iconPath还有selectedIconPath前面多了两个斜杠，其他的其实都是一样的。 当然了我们上面的这种格式是微信它定义的，在app.json里面，如果是要定义tabBar导航的话必须要用这种格式，但下面这种格式是我们自定义的，我们选择这样一种方式定义便于我们和默认的官方配置、保持一致的数据结构，最后我们再看一下样式。这个代码里面只有一项就是component等于true，如果它是个组件的话，在这个json里边它这一项是等于true的样式代码，这是它的一个样式代码，在样式代码里面可以看到这个里面有一个bar__active代表的是选中状态，选中状态下它文本色，这个地方其实是文本，我们可以看到在这个里边这是它的样式，选中以后文本变成这个颜色，d81e06这样的一个样式与我们前面在这个地方看到的样式它俩是一样的，包括我们前面的5151默认的文本颜色跟我们组件里面的样式也是一样的。我们可以看一下，也就是这个颜色，这是它默认的一个颜色，是一样的。这是组件已经准备好了，这个它默认生成的，其实下面那个我们不需要，只需要这一个就可以了，组件已经准备好了。 接下来我们需要在配置文件里面做一个组件的引入，在这个里面也需要写一个usingComponents，然后是tab-bar，一般的话自定义组件的命名方式就使用这样一种单词中间用连字符，因为官方它组件，然后分割单词也是这样一种形式，所以我们就沿用官方的形式就可以了，组件的地址在哪里，这个地方可以复制一下相对地址，然后粘到这个地方再稍做修改这样就可以了，稍做修改，当然后面JS不需要 把这个给去掉，接下来我们就需要在我们的三个页面：用户主页、商品详情页和主页面里面分别添加tar-bar组件的一个使用。 首先我们在user这个里面找到这个标签页wxml这个页面，在它的最下方添加一个tab-bar，再给它一个id，这样一个代码，然后我们还需要在JS里面，在这个页面的onReady的时候onReady，这个地方没有onReady就在这个地方再加一个onReady，在这个地方需要调用这个页面的selectComponent这个地方的参数，我们写#tabBar 井号代表的是id，tabBar是我们刚才定义的id，选择以后再调用它的select方法，要传一个参数，因为我们用户主页居于导航栏的里面的属于它的索引在2这个位置，所以我们这地方要选2。这是用户主页，然后将这个代码复制一下，在另外的两个页面里面，一个是商品详情页，在这个页面最下方也拷贝一份，还有是我们的index主页的最下方也放置一份，这是wxml代码，接着是拷贝我们的选择代码，在主页里面找到onReady，在这个地方可以放在最后面 放在这个位置，这个是主页，数字要设置为1，还有一个是商品详情页，商品详情页在onReady里边添加代码，这个要设置为0，这就是我们的代码，现在已经改造完成了。 单击编译我们看一下运行效果。这个地方有一个问题，就是我们的地址它不应该在subPackages分包内出现这样的一个提示，这个提示是什么意思，看一下我们这个项目的配置文件，现在我们给用户主页实现分包，将这个地址放在了这个地方，当然这个地方多了一个.js，放在这个地方以后，在我们整个文件默认的pages下面，这个地址其实我们就应该给它删掉，它不需要了，一个页面不能同时出现在两个包里，然后这样去处理再编译一下 看看效果。 这个地方也有一个问题，模拟器无法获取这个文件，已经被忽略上传，它这个忽略上传我们暂时不要去理它，只是它自己的一个提示，现在要测试导航组件的一个表现是否正常，选择商品页，商品页现在高亮了对吧，然后选择主页，然后主页高亮了对吧，然后选择我的页面,我的页面也高亮了对吧。这个导航已经实现了它预想的一个功能，现在我们拿我们的商品详情页，就是detail这个页面它作为启动页再测试一下，也没有问题对吧，也显示了这个代码它的作用是良好的。 在这个地方有一点我们需要提示一下，我们这个代码里面是有选择组件，然后再调用其中的方法的代码也就是这个对吧，在主页里面这个地方选择组件然后再调用它的方法，选择这个组件它其实未必是可以选到的，所以如果这个地方我们要避免出错的话我们可以加一个问号，加个问号以后 就是ES6里面的可选链语法，如果是它不是null，然后找到这个组件，调用它的一个方法，这样的一个语法，这是主页，然后在这个商品详情页里面也是一样的一个处理，这个地方加一个问号，还有一个是在用户主页这个地方也加一个，我们再测试一下，没有问题。正常情况下这个页面已经走到了onReady这个地方，按理说它不会出现选择不到的这种情况，但是有一种情况我们稍后可能会遇到，如果是我们当前这个页面，它本身它跟我们的用到的组件，我们现在这个组件tab-bar这个组件是放在我们主包里面，因为它是在app.json里面配置的，如果是我们这个页面是在一个独立分包里面 它是独立的，然后它显示的时候其实主包没有加载，主包里边的组件你也使用不了，这种情况下有可能，这个地方我们要去选择组件的时候，它可能拿到的是一个空值或者是一个undefined，你在一个undefined调用它的方法，显然是不合适的话可能会报错，所以这个地方所有的组件其实都是一样，你如果想万无一失的话，给它加一个问号，这个问题就可以轻松化解了。 这个代码演示就到这里了。

一、申请类目 1.1 申请工具-设备管理类目登录小程序管理后台mp.weixin.qq.com，左侧最下方“设备”-基本设置-服务类目，添加“工具-设备管理”类目（该类目无需资质。如已有该类目可忽略此流程） [图片] 二、设备接入2.1 开通设备管理功能进入小程序案例台-功能-硬件设备，阅读设备使用条件和接入流程等，点击“开通”。管理员扫码确认后开通成功，进入设备管理页面。 [图片] 2.2 添加硬件设备 （需审核）进入硬件设备，点击添加设备，按照每个字段对应的说明填写信息，如实填写设备相关信息，否则会导致审核不通过。 如没有合适的设备类型，可以加群沟通（底部二维码），我们将评估后予以回复。 [图片] 2.3 获取设备 model_id设备注册成功后，可获得平台分配的 model_id ，model_id 是调用小程序设备能力相关接口的重要凭证。获取 model_id 后，小程序可按照相关文档指引调用「设备消息」等硬件能力。 2.4 申请设备能力（需审核） model_id 获取之后，在设备管理入口，点击右侧“申请设备能力”。 [图片] [图片] [图片] （设备消息能力审核通过状态） 三、获取设备消息 「小程序设备消息」能力指的是，只要用户在小程序内订阅通知，开发者就可以将这些事件以订阅消息的形式发送给用户。消息在微信内的产品形态，目前以“服务通知”形式呈现。 申请设备消息必须先完成“二、设备接入”。关于小程序订阅消息的基础介绍可参考文档 3.1 获取模板登录小程序管理后台——功能——订阅消息——公共模板库——长期订阅，查看可选用的设备消息模板。 [图片] 注意：如公共模板库没有你所需要的模板消息，可以加群沟通（底部二维码） ，申请格式如下： 小程序名称： 小程序主体： APPID： 设备消息场景描述： 所属行业：如：智能家居 设备型号：如：空气净化器 模板框架：如： 标题：空气净化器耗材提醒 提醒时间：mmdd hhmm 所在位置：卧室 提示说明：空气净化器滤网已到达更换时间，请及时更换。 属于哪种情况： 1、对生命财产可能造成影响的告警 2、影响到设备正常使用的提前预警 3、需要人工介入做进一步操作的提醒 4、其他，请补充具体内容 加群二维码： [图片] 3.2 获取模板ID选择设备消息模板中需要的关键词，并提交。 注意：所在位置为枚举值，部分字段可以上传字符格式。其他关键词暂不支持自定义 [图片] 提交后，可在“我的模板”中找到对应模板的模板 ID ，每个模板以 template_id 标记。 [图片] 3.3 获取设备票据获取 snTicket 用于「发起订阅」步骤。详见服务端设备票据接口 hardwareDevice.getSnTicket 。 四、触发设备消息4.1 发起用户订阅发起订阅调用  wx.requestSubscribeDeviceMessage  接口会有以下授权弹窗出现，用户同意订阅消息后，才会有设备消息发送至用户的微信会话 可以引导用户在小程序内完成设备消息订阅，用户需勾选消息标题，并点击右侧强提醒按钮后提交“允许”。 示例代码 wx.requestSubscribeDeviceMessage({ sn: 'xxxx', snTicket: 'xxxxx', modelId: 'xxxxx', tmplIds: ['xxxxx'], success(res) { console.log('[wx.requestSubscribeDeviceMessage success]: ', res) // { 'QCpBsp1TGJ1ML-UIwAIMkdXpPGzxSfwJqsKsvMVs3io': 'accept' } }, fail(res) { console.log('[wx.requestSubscribeDeviceMessage fail]: ', res) } }) 查看设备接入指引4.2 发送设备消息开发者通过微信服务端接口向用户推送设备消息。详见服务端设备消息发送接口  hardwareDevice.send  注意：开发者需要在小程序的合理场景内，给用户提供长期消息的授权弹窗。如用户实现房屋认证后通过用户操作触发“门禁机呼叫提醒”的订阅弹窗。

2024年4月26日 更新： 基础库 3.4.2 更新 API 有授权弹窗的隐私接口（例如 wx.getLocation），将不会再弹官方隐私弹窗，而是在授权弹窗上增加“隐私勾选”；无授权弹窗的隐私接口（如 wx.getClipboardData），将继续保留原来的官方隐私弹窗 2023年12月25日 更新： 未授权时，input type="nickname" 会自动降级为 input type="text" 且 input 无法拉起官方隐私授权弹窗，需要按开发步骤 4、5 自行处理 2023年10月19日 更新： 已经过了官方公告的 10 月 17 日了，线上依然未生效。除非在 app.json 中手动配置 "__usePrivacyCheck__": true 来开启。 目前的处理方式为，把报错信息转换为中文 if (message.match('privacy permission is not authorized')) message = '授权失败，请同意《用户隐私保护指引》' 2023年9月14日 更新： 可以不开发，直接使用系统弹窗，见图 3 。生效日期延长到 10 月 17日了。 《墨问便签》目前已回退了版本。 https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html#六、官方隐私弹窗功能说明 官方公告里目前的机制，目前还没生效上线，但看起来有 2 个坑： 1. 必须 wx.onNeedPrivacyAuthorization 上报，才能弹自定义弹窗。 意味着方案 1，如果用户取消授权了，是没有上报的，只能选择执行退出小程序。 否则调用隐私接口时，系统弹窗会出现。 2. 用户取消授权后，间隔 10s，才能再次请求授权。 意味着 10s 内功能不可用，需要给用户一个提示语。而系统默认的报错不会 toast，以及报错信息是英语，用户也看不懂呀。 ——————— 总体思路： 目前有两个方案可供选择 1. 小程序启动时，弹出，拒绝后直接退出小程序（只用 wx.getPrivacySetting 即可） 2. 调用隐私接口前，弹出，同意后才调用隐私接口（不用 wx.getPrivacySetting，需要使用 wx.requirePrivacyAuthorize 和 wx.onNeedPrivacyAuthorization） 推荐方案 2，下面具体说说 事前准备： 1. 在文档中查看是否使用了相关隐私接口 https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/miniprogram-intro.html 2. 在「小程序管理后台」设置《小程序用户隐私保护指引》 见图 1，具体位置是：小程序后台 - 设置 - 基本设置 - 服务内容声明 - 用户隐私保护指引 [图片] 3. 如果有用到隐私接口，则需要进行小程序开发。如果没有用到隐私接口，则无需开发 实际运行的流程为： 1. 发起授权 wx.requirePrivacyAuthorize 2. 触发授权事件 wx.onNeedPrivacyAuthorization 3. 弹窗，用户点击同意或拒绝 执行第 2 步的回调函数的 resolve 方法 4. 继续或终止流程 执行第 1 步的回调函数的 success 或者 fail 方法 5. 如果继续流程，调用隐私相关 api（录音、相册等等）或者 input （微信昵称）去聚焦 开发步骤： 开发前，先在小程序 app.json 配置中添加 "__usePrivacyCheck__": true 1. 开发弹窗，并且在需要的页面注册使用。“同意” 按钮需要符合规范 同意 不同意 如果需要查看隐私协议，可以使用 wx.openPrivacyContract({}) [图片] 2. 使用 wxToPromise 方法，便于使用 await 处理相关接口 function wxToPromise (api, option) {   // API 存在判断   if (!api) {     wx.showModal({       title: '提示',       content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'     })     return Promise.reject()   }   return new Promise((resolve) => {     api({       ...option,       success (res) {         resolve([res, undefined])       },       fail (err) {         resolve([undefined, err])       },     })   }) } 3. app.ts 里在 onLaunch 方法里添加触发授权事件监听 // 导入弹窗的弹出方法 import { showModal } from './components/modal/showModal' // 需要用户同意隐私授权时 if (wx.onNeedPrivacyAuthorization) wx.onNeedPrivacyAuthorization(async (resolve) => {   // 触发弹窗   const [res] = await wxToPromise(showModal, {     title: '个人信息保护提示',   })   // 点击同意   if (res?.confirm) {     resolve({       buttonId: 'agree-btn',       event: 'agree'     })   // 点击拒绝   } else if (res?.cancel) {     resolve({       buttonId: 'disagree-btn',       event: 'disagree'     })   } }) 4. 封装请求隐私授权方法 import { wxToPromise } from './wxToPromise' /**  * 请求隐私授权  * @return 是否已授权  */ export const requirePrivacyAuthorize = async () => {   if (typeof wx.requirePrivacyAuthorize === 'function') {     const [res] = await wxToPromise(wx.requirePrivacyAuthorize)     if (res) return true   // < 2.33.2 基础库，无 api 默认已授权   } else {     return true   }   return false } 5. 业务页面触发隐私授权，并且在回调里调用隐私接口 例如处理微信昵称时 // wxml   用户昵称   // js /** * 请求隐私授权 * 未授权时，input type="nickname" 会自动降级为 input type="text" */ async requirePrivacyAuthorize () {   if (wx.requirePrivacyAuthorize) {     [res, err] = await wxToPromise(wx.requirePrivacyAuthorize)     if (res) // 成功 - 继续调用隐私接口     if (err) // 失败 - 终止流程，或者走兜底方案   }   // PC 端 api 不存在，可以继续调用隐私接口   // 成功后去聚焦，失败后降级为普通文本框，依然去聚焦   this.setData({nickNameInputFocus: true}) } 如果只需要成功后，才执行后续逻辑。失败时不执行。 可以这样写： async requirePrivacyAuthorize () {   // 请求隐私授权   if (!await requirePrivacyAuthorize()) return   this.setData({nickNameInputFocus: true}) } 例外情况，无需主动调用 requirePrivacyAuthorize，也能正常触发 wx.onNeedPrivacyAuthorization： 1. 写入剪贴板：wx.setClipboardData 2. 读取剪贴板：wx.getClipboardData 3. 获取微信头像： 常见问题： 1. 已经同意过隐私协议，如何清除掉状态？ 答：把最近使用中的小程序删除 2. 如果不同意隐私协议，下次调用隐私接口时，还能触发 onNeedPrivacyAuthorization 吗？ 答：可以 3. onNeedPrivacyAuthorization 多次注册，会重复监听吗？ 答：会的，所以只在 app.js 里启动小程序时注册一次 4. 如果不使用 requirePrivacyAuthorize 主动触发，隐私协议和权限弹窗，哪个会先弹？ 答：权限弹窗会先弹。如果拒绝权限后，不会弹隐私协议（onNeedPrivacyAuthorization 无法触发） 5. 隐私协议需要每个权限都弹一次吗？ 答：如果用户同意了，则只弹一次，后续不再弹出，除非移除了小程序。如果用户一直拒绝，则需要每次调用权限之前弹出。 6. 以前我记得写入相册是系统弹窗，现在要改成自己写弹窗吗，还是说两个都要弹？ 答：如果没有同意过隐私协议，并且没有授权过权限，两个都弹。 7. 如果版本是2.32.3 以下（不含）是否可以使用button的agreePrivacyAuthorization进行上报？ 答：从基础库 2.32.3 开始，需要做适配的。这个基础库以下的版本，没有新增的几个 API，也就不需要做隐私协议的开发适配。只需要使用 if 判断下有没有方法就行。 例如：typeof wx.getPrivacySetting === 'function' 在 2.32.3 以下（不含），会返回 false，就直接跳过相关的隐私协议逻辑，不处理 8. 可以直接调用隐私接口吗？ 答：可以但不建议。原因是有个 [bug] wx.onNeedPrivacyAuthorization 在原有授权弹窗之后触发的 https://developers.weixin.qq.com/community/develop/doc/000042e44347a0a201308a5de61800 9. PC 端如何处理？ 答：PC 基础库虽然达到 2.32.3 了但目前没有 wx.getPrivacySetting 等新增的方法，因此目前无需处理 10. 企业微信环境里的小程序需要调整吗？ 答：企业微信小程序，基础库比较落后，现在不需要。等基础库自动升级后，未来是需要的 11. 关于小程序隐私保护指引设置的公告，是否包括小程序里嵌入的h5页面？ A：暂不包括 相关资料地址： 官方 FAQ： https://developers.weixin.qq.com/community/develop/article/doc/000c648556cb40603e406c0ac6b013 关于小程序隐私保护指引设置的公告 https://developers.weixin.qq.com/community/develop/doc/00042e3ef54940ce8520e38db61801 小程序隐私协议开发指南 https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html

[视频] *所有课程源码的链接：https://gitee.com/geektime-geekbang_admin/weapp_optimize 你好，我是李艺，是腾讯云TVP 、小程序从0到1的作者，极客时间 微信小程序全栈开发实战课程讲师。 小程序上线已经5年时间了，日活目前已经达到了4.5亿+，已然成为任何一家互联网企业都不能忽视的产品运营阵地。小程序的开发能力经过微信团队数年来的不断地努力，目前已经日臻完善，它早已经不是那个随随便便翻翻文档就可以完成开发的一个简易框架了，尤其是在性能优化方面，会优化与不会优化 ，对于产品的运行效果可以说有霄壤之别。 首先我们看第一部分，需要明确一下有哪些需要优化的现象。不知道你的小程序产品有没有遇到过这样的一些问题，点开小程序一直都是白屏什么也看不到、Loading加载提示转了好几圈页面还不显示，单击页面链接的时候页面跳转迟钝迟迟打不开、有的按钮单击了好几次一点反应也没有，长列表内容在滑动的时候越往下滑 页面越卡顿。你有没有因为这些问题而遭受过用户的抱怨，你会以为这些问题都是因为平台技术不完善而造成的吗？ 那么为什么京东 滴滴等大厂的一些小程序，它们的功能那么繁杂。但使用起来却还是那么流畅呢，当我们抱怨框架不够给力的时候，我们对微信小程序的性能优化技巧又真正了解和使用多少？性能优化它是一个现人现地的活，讲究具体问题具体分析，需要有一个字节 一个字节去抠，一个毫秒 一个毫秒去节省的这样的一个细致精神。这个课程我们会演示相关的性能优化技巧。我准备了一个性能比较堪忧的项目，这个课程我们就一起诊断 优化这个项目，让它从体态臃肿的一个状态慢慢变得健步如飞，为了更好地理解和应用小程序优化技巧，在开始实践之前，我们十分有必要看一下小程序整体的运行环境以及启动的流程。小程序的运行环境大体可以分为三类，第一类是iOS端、Mac微信端，第二类是Android端 PC微信端，第三类就是我们开发者经常使用的微信开发者工具模拟器端。另外还有儿童手表上面也有微信，但是那个环境它没有小程序，所以不在我们的讨论范围之内。 三类的运行环境，虽然它们在底层是基于不同的技术实现的，但是它们的启动流程大体上是相似的，小程序的优化主要是指从小程序开始启动到首页完全渲染显示，也就是Page.onReady事件派发，这个过程之间的一个优化。这个过程主要包含了三个流程的节点，这一步包括小程序运行进程及运行环境的准备，这里面具体又包括拉取小程序基本信息，包括代码包版本 地址等信息，另外还有Native小程序进程和微信基本模块的一个初始化。例如在Android环境里面有Activity活动组件的一个初始化，再往下是代码包的下载 校验以及初始化，再往后是系统组件 WebView组件容器和原生组件的一个初始化，最后是JS引擎初始化以及域的创建。 下面我们看第二步关于代码注入，这一步主要包含两大部分：第一部分是框架及第三方基础代码的一个初始化，这里面又分为三个小部分： 第一部分是小程序基础库的注入； 第二小部分是扩展库，例如我们在配置文件里面通过使用useExtendedLib引入的WeUI以及kbone这样的一个类库的初始化； 第三小部分是插件、自定义组件 扩展库代码的一个注入。 第二部分是开发者代码的一个注入，这个里面主要分为两个小部分： 第一个小部分是开发者逻辑层代码的一个注入，这里会派发小程序里面的App.onLaunch还有App.onShow这些事件的一个派发，这些事件都是在这个阶段进行派发的； 第二小部分是开发者视图层代码的一个注入，包括公共代码以及页面代码的一个注入。 下面我们看第三部分关于首屏渲染，这个部分大致可以分为五个小部分： 第一小部分是页面的初始化，这个时间点是initDataSendTime这个时间点的一个触发时机，会有Page.onLoad一个事件的派发； 第二小部分是时间点走到viewLayerReaderStartTime这样的一个时间点的阶段，这个时候会有Page.onShow事件的一个派发； 第三小部分是开发者代码从后端拉取数据，准备data数据，这个时候也是一个阶段，是第三小部分； 第四小部分是页面的一个整体的渲染； 第五部分是当这个时间点走到viewLayerReaderEndTime这个时间点的时候，它会有一个Page.onReady事件的派发，这个时候就标志着我们首屏渲染的一个完成。 小程序采用逻辑层、视图层双线程运行机制，Native的工作准备它是先于这两个线程开始之前开始的，基础的执行环境准备好以后，逻辑层与视图层两个线程才开始工作，并且两个线程几乎是并发执行的。在视图层与逻辑层它代码完全注入以后，这个时间点它会对齐以后才会进入下一个阶段，也就是首屏渲染这个阶段的开始执行。 这些节点它并不是每一次小程序启动时都会经历的，有些会有，有些不会有。微信有运行环境预加载机制，如果小程序在启动时命中了预加载的环境，有关准备运行环境的节点就可以省略掉，这一部分的启动时间也可以节省了。对于开发者紧跟小程序框架的更新，及时使用用户覆盖率最广的基础库版本，让自己的小程序运行环境大众化、普通化，则有助于预加载环境的一个命中，终端类型不同经历的节点也不尽相同。 在Android上小程序启动的时候，微信它开启了新线程，在iOS上则没有 iOS上小程序它在启动的时候，它会复用与微信相同的一个进程，因此Android上有小程序进程与Activity初始化这样的一个节点，在iOS上则没有，再加上iOS的设备它普遍的性能是高于Android设备的，所以这使得iOS的设备的启动的效率普遍就高于Android。 对于相同版本的小程序在同一性能级别的设备上运行，iOS设备平均会比Android大概会少0.5的这样一个启动时间，另外还有启动方式对流程经历的节点也有影响。 下面我们看一下启动方式。小程序按启动方式不同分为冷启动和热启动两种方式。 什么是冷启动？什么是热启动？如果小程序在用户设备上是第一次打开或者是销毁后再次打开，这个时候的启动就是冷启动。热启动是相对冷启动而言的，热启动是小程序启动的一种优化机制，小程序进入后台30分钟以内再次进入前台，可以直接从后台状态然后恢复到前台，在这种热启动方式里面，像前面我们提到的小程序基本信息、拉取代码包的下载还有JS引擎初始化等等这些流程节点，甚至像App.onLaunch、Page.onLoad以及Page.onReady这些一次性的流程事件都不会有了。小程序第一次启动以及冷启动30分钟以后被系统回收重新再启动都是冷启动。 前面我们讲的启动流程的主要节点是冷启动流程的节点。我们说的小程序性能优化主要是指冷启动性能的一个优化以及运行时渲染性能的一个优化，在小程序冷启动流程里边涉及到一些程序以及页面事件。下面我们统一看一下这些事件。 在小程序中App与Page都有它们各自的一个生命周期函数，这些周期函数有一些与启动流程是密切相关的。我们先看一下App周期函数，这里面有三个事件需要我们注意： 第一个是onLaunch，它是监听小程序初始化的一个事件； 第二个是onShow 监听小程序启动或切前台这样一个事件； 第三个是onHide 监听小程序切后台这样的一个事件。 下面我们再看一下Page周期函数。这个里面有五个事件是与优化相关的： 第一个是onLoad它监听页面加载； 第二个是onShow监听页面显示； 第三个是onReady监听页面初次渲染完成； 第四个是onHide监听页面隐藏； 第五是onUnload监听页面卸载。 App.onShow事件和Page.onShow事件是视图界面开始显示时派发的，它们会重复派发与启动流程优化密切相关的一次性事件，主要有App.onLaunch Page.onLoad和Page.onReady这三个事件，在这三个事件节点恰当的安排执行合适的逻辑代码是优化的重要技巧一。 至于像App.onShow App.onHide以及Page.onHide Page.onUnload是与运行时性能优化十分相关的一些事件，下面我们根据小程序的冷启动流程以及与其相关的密切相关的一些八个生命周期函数大致讲一下有哪些节点是可以优化的。 第一条在这个环境准备阶段中，在拉取小程序基本信息阶段，这个阶段是有可能优化的。微信对用户设备上经常使用的小程序它会有轮询机制，在轮询的时候会自动拉取小程序的一个基本信息，正常情况下这个小程序的基本信息的一个拉取它是同步的，它会阻塞我们后续流程节点的一个执行，如果通过轮询节省了这样的一个过程，启动流程跳过这个节点时间是可以节约的，当然这个节点开发者基本上做不了什么事情，开发者并不能左右微信的轮询机制。但是越受用户欢迎的一个小程序因为它属于经常使用的小程序，它会命中轮询机制，启动的一个性能也会更好，而那些不被用户经常访问的小程序反而没有这个福利，这大概就是技术里面的一个马太效应，就是好的会更好然后坏的会越差。 针对环境准备阶段微信提供了环境预加载机制，微信客户端会根据用户设备的使用场景和设备资源的一个消耗情况，依据一定的一个策略，在小程序启动之前对运行环境进行部分的预加载，这个过程开发者基本也无法干涉，开发者能做的仅是紧跟小程序基础库的一个更新，积极使用最新的、最普遍的、最广泛的一个基础库版本以及提高预加载环境的一个命中率。 在代码注入阶段，逻辑层与视图层代码都需要注入，两个线程的代码都注入完成以后首屏渲染流程才能开始，Page.onLoad事件才能触发。我们可以想方设法减少代码的一个注入量和复杂度以期减少启动时间，小程序在这方面有分包、有独立分包、有按需注入、有用时加载和占位组件等等这些特性，这些都是这一阶段的一些优化技巧。这些技巧稍后我们在课程里面都会详细介绍。 在合适的生命周期函数节点执行合适的代码也可以优化启动性，Page.onReady事件派发于首屏渲染完成的时候，如果我们要从后端拉取数据并在首页上进行渲染，在这个事件函数里面执行拉取操作，势必会造成二次渲染的CPU资源浪费，但如果我们在Page.onLaunch这个事件触发的时候就开始数据拉取，又可能会阻塞小程序正常的一个启动流程，在这种情况下我们要怎么去做？我们可以使用异步转同步的编程范式以及使用并发复合命令，在多个文件里边对齐这个代码的执行点，这样的话就显得尤为重要了。具体的优化办法，稍后我们在课程里面会详细讲解。 从Page.onLoad事件派发页面开始渲染到Page.onReady这个事件派发首屏渲染完成，这中间涉及到的动态数据加载，其加载的数据量有多少、网络请求所需的时间有多少还有图片等静态资源它加载所需要的时间有多少，都会影响首屏渲染的一个效率，这个阶段使用骨架屏技巧包括压缩图片、提高服务器接口响应效率和数据传输效率等等，这些都可以优化首屏渲染的一个用户体验。针对小程序里面用到的一些数据，微信还提供了数据预加载周期性更新机制，不需要开发者自己去拉取微信就可以代为拉取，小程序在启动的时候，直接取用这些已经加载好的数据就可以了，这也是优化启动流程的一个技巧之一。 当然了这个技巧是微信团队特意为开发者而设计的，针对低端机首次渲染需要较长的一个时间，微信提供了初始渲染缓存机制，启用初始渲染缓存可以使视图层不需要等待逻辑层代码初始化完毕就可以直接提前将这个页面初始化的数据渲染的结果展示给用户。 以上就是针对启动流程中部分节点的一个性能优化技巧，稍后我们在课程里面都会详细地进行讲解在运行的时候针对小程序的双线程运行机制和视图重渲染机制也有相关的一些性能优化技巧。下面我们就再看一下这方面的一些技巧。

各位开发者： 下发统一消息 接口曾支持小程序与公众号统一的模板消息下发。由于小程序模板消息能力已于 2020 年 1 月下线（详见 小程序模板消息能力调整通知），当前下发统一消息能力仅限于公众号范畴。为了优化开发体验，避免多个同一功能接口对开发者造成困扰，微信团队将对下发统一消息接口进行如下调整： 自 2023 年 9 月 20 日起（以下简称 “生效期”），下发统一消息接口将被收回。自生效期起，调用下发统一消息接口将会显示 “45109” 错误码，无法下发小程序模板消息与公众号模板消息。如业务需下发公众号模板消息，请使用 公众号模板消息能力 满足能力需求，具体适配操作可参考下方适配指引。 注意点： 1、下发统一消息接口与公众号模板消息接口的差异对比如下： [图片] 2、本次接口回收仅影响使用旧的下发统一消息接口的方式下发模板消息的情况，不代表公众号模板消息能力被收回，使用 公众号模板消息接口 下发公众号模板消息的能力不受影响。例如小程序 A、B 当前正使用不同接口下发公众号模板消息： [图片] 3、小程序订阅消息能力不受本次接口回收的影响。 4、请已使用下发统一消息接口的开发者尽快适配。若 2023 年 9 月上旬仍未适配，官方团队将分阶段通过站内信、微信开发者工具通知等方式同步告知指引修改。 适配指引： [图片] 检查当前调用下发统一消息接口的用户身份信息： 1、若当前下发模板消息的用户身份信息为公众号 openid，按照 公众号模板消息接口文档 适配 2、若当前下发模板消息的用户身份信息为小程序 openid，检查 微信开放平台 是否将小程序与公众号绑定在同一个主体 a) 若小程序与公众号绑定在同一个主体下，按照 公众号模板消息接口文档 适配 b) 若小程序与公众号没有绑定在同一个主体下，先完成绑定工作，再按照 公众号模板消息接口文档 适配 微信团队 2023年8月22日

零售行业如何通过小程序实现数字化。

医保支付、互联网医院、线上问诊...小程序如何帮助传统医院数字化？

用的popup组件包裹的内容 [图片] 1.先写入canvas组件 [图片] 2.在methods中写入方法，并在onReady中调用绘制文本的方法 onReady() { this.capture() }, methods: { capture() { // canvas绘制文本 const ctx = uni.createCanvasContext('secondCanvas',this) // canvas布局 ctx.setFontSize(20) ctx.setTextAlign('center') ctx.fillText('缴费凭证', 162, 40) ctx.setFillStyle('#f95455') ctx.fillText( '¥' + this.information.Total + '.00', 162, 75) ctx.setFontSize(14) ctx.setFillStyle('#999999') ctx.fillText('缴费类型', 95, 100) ctx.fillText('缴费方式', 230, 100) // 绘制矩形，在矩形中添加文本 ctx.setFillStyle('rgba(225,225,225,0)') ctx.setFontSize(11) ctx.strokeStyle = "#333333"; ctx.moveTo(24,120) ctx.lineTo(172,120) ctx.lineTo(172,150) ctx.lineTo(24,150) ctx.lineTo(24,120) ctx.closePath(); ctx.fill(); this.drawText(ctx,this.information.GBTypeName, 90, 120, 20, 160) ctx.setFillStyle('#333333') ctx.setFontSize(13) ctx.fillText(this.information.Paytype==1?'现金缴费':'晋享生活', 230, 120) ctx.setFontSize(14) ctx.setTextAlign('left') ctx.setFillStyle('#999999') ctx.fillText('姓名',25,165) ctx.setTextAlign('right') ctx.setFillStyle('#333333') ctx.fillText(this.record.HName,300,165) ctx.setTextAlign('left') ctx.setFillStyle('#999999') ctx.fillText('手机号',25,195) ctx.setTextAlign('right') ctx.setFillStyle('#333333') ctx.fillText(this.record.Mobile,300,195) ctx.setTextAlign('left') ctx.setFillStyle('#999999') ctx.fillText('房号',25,225) ctx.setTextAlign('right') ctx.setFillStyle('#333333') ctx.fillText(this.record.RoomAddress,300,225) ctx.setTextAlign('left') ctx.setFillStyle('#999999') ctx.fillText('收费单位',25,255) ctx.setTextAlign('right') ctx.setFillStyle('#333333') ctx.fillText('国网晋中电力有限公司',300,255) // 绘制虚线 ctx.setLineDash([2, 4], 5); ctx.beginPath(); ctx.moveTo(25,280); ctx.lineTo(300, 280); ctx.stroke(); ctx.setTextAlign('left') ctx.setFillStyle('#999999') ctx.fillText('付款时间',25,310) ctx.setTextAlign('right') ctx.setFillStyle('#333333') ctx.fillText(this.information.PayTime,300,310) ctx.setTextAlign('left') ctx.setFillStyle('#999999') ctx.fillText('流水号',25,340) ctx.setTextAlign('right') ctx.setFillStyle('#333333') ctx.fillText(this.information.ID,300,340) // canvas画布转为图片 ，有时draw调用不成功，写了个定时器 ctx.draw(setTimeout(()=>{ uni.canvasToTempFilePath({ x:0, y:0, width:325, height:375, destWidth:325, destHeight:375, fileType:'jpg',     canvasId: 'secondCanvas',     success: (res) => {         uni.hideLoading()         // // 保存当前绘制图片         this.tempFilePath = res.tempFilePath     },     fail: function(err) {         console.log(err, '图片生成失败')     } }) },500)) }, // 控制绘制文本换行,百度CV的 drawText: function (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {     var lineWidth = 0;     var lastSubStrIndex = 0; //每次开始截取的字符串的索引     for (let i = 0; i < str.length; i++) {       lineWidth += ctx.measureText(str[i]).width;       if (lineWidth > canvasWidth) { //因为我这个在矩形中的文本进行的换行，用的ctx.strokeText，不行用在矩形中添加文本的用ctx.fillText         ctx.strokeText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分         initHeight += 11; //11为字体的高度         lineWidth = 0;         lastSubStrIndex = i;         titleHeight += 30;       }       if (i == str.length - 1) { //绘制剩余部分         ctx.strokeText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);       }     }     // 标题border-bottom 线距顶部距离     titleHeight = titleHeight + 10;     return titleHeight   }, // 保存图片到本地，下面保存到手机百度CV的 savePic() {     uni.getSetting({     //获取用户的当前设置     success: res => {     if (res.authSetting['scope.writePhotosAlbum']) {     //验证用户是否授权可以访问相册 uni.saveImageToPhotosAlbum({ filePath: this.tempFilePath, success: function(res2) { uni.hideLoading(); uni.showToast({ title: '保存成功，请从相册选择再分享', icon: 'none', duration: 2000 }); }, fail: function(err) { uni.hideLoading(); uni.showToast({ title: '保存失败', icon: 'none', duration: 2000 }); } });     } else {     uni.authorize({     //如果没有授权，向用户发起请求     scope: 'scope.writePhotosAlbum',     success: () => {     this.saveImageToPhotosAlbum();     },     fail: () => {     uni.showToast({     title: '请打开保存相册权限，再点击保存相册分享',     icon: 'none',     duration: 2000     });     setTimeout(() => {     uni.openSetting({     //调起客户端小程序设置界面,让用户开启访问相册     success: res2 => {     // console.log(res2.authSetting)     }     });     }, 2000);     }     });     }     }     }); }, } 3.效果图如下 [图片]

生成图片这个功能需要使用 Canvas ，先将要保存的图片使用 Canvas 画出来，然后调用相关方法保存到手机上。文中使用或是未使用的有关小程序中 Canvas 的 api 可以在 小程序Canvas相关Api 这里查看。 为了使用方便，我将这个需求的实现做成了一个组件，便于项目的其他地方复用，也遇到了一些因为使用自定义组件带来的问题 <!–more–> 要实现的效果图 [图片] 实现思路 相关的代码比较长，而且大部分为调用 Canvas 的 api 代码，整体贴出无必要。本文中只描述思路，具体代码看 小程序生成图片的微信代码片段 。 代码中的几个方法 [代码]drawRoundedRect[代码] ：用来绘制圆角矩形，此处不详述它的画图原理 [代码]point[代码] ：为方法 1 服务的，一看就懂 [代码]downFile[代码] ：对微信的下载方法进行了一层简单封装，传入 url ，返回一个 Promise [代码]save[代码] ： 保存图片的相关逻辑 [代码]doAuth[代码] ：当调用 [代码]wx.saveImageToPhotosAlbum[代码] 方法保存图片时，如果没有保存图片的权限会保存失败，此时需要让用户重新授权 [代码]computedPercent[代码] ：一个快捷的计算比例的方法，传入从设计图上量出来的像素数即可， [代码]oldWidth[代码] 是设计图上的 Canvas 区域宽度 [代码]initData[代码] ：数据初始化，获取设备相关信息，将网络图下载到本地 [代码]writeCanvas[代码] ： 主要画图逻辑，调用此方法时保证所需数据已处理完毕，开始画图 数据初始化 需求中需要显示用户头像和小程序码，小程序码后面是要挂参数的，可以简单理解为要挂个用户参数在后面，类似这样 [代码]?uid=2233[代码] ，这就是组件中要传入的 scene 的值，然后根据这个参数，在开始画图之前，先调用接口从服务端那里获取图片的链接，再利用微信的 [代码]wx.downloadFile[代码] 方法将图片下载到本地，在 Canvas 中使用本地路径，用户头像和小程序码都下载好了之后就可以开始画图了，否则的话，提示网络错误。 为了演示方便，本文中的网络图都换成了本地图片 画图 由于是在组件中，所以获取 Canvas 上下文的时候要传入 [代码]this[代码] ，根据设计图，从里向外依次往 Canvas 上叠加就是了，从设计图上量出的像素调用方法来获取比例，画完之后调用 Canvas 的 [代码]draw[代码] 方法技术绘画，并且将 loading 状态取消 保存图片 保存图片的时候，要注意保存的图片的宽高都乘一下设备的像素比，防止出来的图片太小了，保存图片需要相关权限，若用户为授权，要弹窗让他授权之后再进行保存操作 遇到的问题 以下部分问题有时效性，请大家理性看待。 canvas 结束绘画要调用 [代码]ctx.draw()[代码] 方法，不调用的话是什么都不会显示的 [代码]wx.createCanvasContext(string canvasId, Object this)[代码] ，在自定义组件下，当前组件实例的 [代码]this[代码] ，表示在这个自定义组件下查找拥有 [代码]canvas-id[代码] 的 [代码]<canvas>[代码] ，如果省略则不在任何自定义组件内查找。简而言之就是在页面级调用这个方法的时候，第二个参数可以不传，会默认传入 this ；但是在自定义组件中调用这个方法的话，要传入 this 部分手机上保存的图片分辨率太小，导致图片上的字看不清。最后使用了一个百分比的计算，所有的的坐标或者大小都是根据屏幕宽高和设计图宽高比例计算出来了，这样可以保证即使在不同手机上或者在不同的容器中，都是有恰当比例的；并且保存图片的时候，要注意保存的图片的宽高都乘一下设备的像素比 Canvas 中不能放网络图，所以网络图需要先下载到本地之后在使用 如果用到了下载网络图片的话，别忘记设置微信的 [代码]downloadFile[代码] 合法域名 结语 对于大部分同学来说，自己项目的需求和我这里实现的可能是有些出入的，所以本文只是起到一个例子的作用，可以帮助你快速上手这个模块的开发

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～ 这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能） 咱们不多说，直接上手就是干。 [图片] 首先我们新增一个自定义组件，在该组件的json中引入painter [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" } } [代码] 然后组件的WXML (代码片段在最后) [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> [代码] 重点来了 JS (代码片段在最后) [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() } }, // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' } } }, data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 }, methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' }) this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ { type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' }, }, { type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' } }, { type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' } }, { type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' } }, { type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' } }, { type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' } } ] } }) }, onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败，请刷新页面重试' }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') }, onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) } }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') } } }) [代码] 那么我们该如何引用呢？ 首先json里引用我们封装好的组件share-box [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" } } [代码] 以下示例为获取用户头像昵称后再生成图。 [代码]<button class="intro" bindtap="getUserInfo">点我生成分享图</button> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> [代码] 调用的地方： [代码]const app = getApp() Page({ data: { isCanDraw: false }, // 组件内部关掉或者绘制完成需重置状态 handleClose() { this.setData({ isCanDraw: !this.data.isCanDraw }) }, getUserInfo(e) { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: res => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 开始绘制海报图 }) }, fail: err => { console.log(err) } }) } }) [代码] 最后绘制分享图的自定义组件就完成啦~效果图如下： [图片] tips： 文字居中实现可以看下代码片段 文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号 代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5 附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。 最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。

生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件。然后附上楼下大哥做的可视化拖拽生成painter代码的工具：链接地址https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813

开门见山 工具地址 点我直达>>painter-custom-poster 由于挂载在github page上，打开速度会慢一些，请耐心等待或自行解决git网速问题 背景 在做小程序时候，我们经常会有一个需求，需要将小程序分享到朋友圈，但是朋友圈是不允许直接分享小程序，那我们还有其他的办法解决吗?答案肯定是有的，即 canvas 生成个性化海报分享图片到朋友圈 分析 小程序中有大量的生成图片需求，但是使用过 canvas 的人，都会发现一些难以预料的问题>>有关小程序的坑 直接在 canvas 上绘制图形，对于普通开发者来说代码会特别凌乱并且难以维护，经常会花费很久的时间去优化代码 不同的环境渲染问题，例如在开发者工具看起来好好的，一到 Android 真机，就出现图片不显示，位置不对应等等问题 解决 那可不可以开发一款生成海报的插件库呢? 首先，只需要提供一份简单的参数配置文件即可 解决掉小程序Canvas遇到的一些大大小小的坑 有严苛的测试环节，解决各种环境和各种机型遇到的问题，并提供稳定的线上版本 长期维护，并有专人更新迭代更新颖的功能 以上的要求当然是可以的，曾经的我也想尝试开发一款出来，但是后来尝试了几款现成的工具之后就放弃了，毕竟轮子这个东西，是需要不断维护更新的，另外已经有这么多优秀现成的插件了，我为何还要费力去写呢，贡献代码岂不更美哉，以下是我收集的几款 小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片>>Painter 小程序组件-小程序海报组件>>wxa-plugin-canvas 微信小程序：一个 json 帮你完成分享朋友圈图片>>mp_canvas_drawer 我想干什么 唠了这么多，好像提供给大家插件就没我什么事情了…想走是不可能的 为了能够制作出更酷炫的海报，我思考了许久 虽然有了插件后，只需要提供配置代码就能够制作出一款海报来，但是我发现还是有些许问题 制作海报效率还是不够高，微调一个元素的大小和位置，就需要不断的修改保存代码，等待片刻，查看效果，真的烦 一个小小的位置调整可能就需要来回调整无数次，这种最简单的机械化劳动，这辈子是不可能的 拿着完美的稿子，递给设计师看，这个位置不对，这个线太粗，这个颜色太重…你信不信我打死你 对于一些精美复杂的海报，实现起来真的不太现实 那我需要怎么做呢，请点击这个链接体验>>painter-custom-poster 点击左侧例子展示中的任意一个例子，然后导入代码就能看到效果图，这下你应该能猜到了我的想法了 如何实现 刚开始我想用简单的html和css加拖动功能实现，通过简单尝试之后就放弃了，因为这个功能真的太复杂了，简单的工具肯定是不行的 中间这个计划停滞了很长时间，一度已经放弃 直到发现了这个库fabric.js，真的太太优秀了，赞美之词无以言表，唯一的缺点就是中文教程太少，必须生啃英文加谷歌翻译 fabric介绍，你可以很容易地创建任何一个简单的形状，复杂的形状，图像;将它们添加到画布中，并以任何你想要的方式进行修改：位置、尺寸、角度、颜色、笔画、不透明度等 How To Use 目前工具一共分成4部分 例子展示 用来将一些用户设计的精美海报显示出来，通过点击对应的例子并将代码导入画布中 画布区 显示真实的海报效果，画布里添加的元素，都可以直接用鼠标进行拖动，旋转，缩放操作 操作区 第一排四个按钮 复制代码 将画布的展示效果转化成小程序海报插件库所需要的json配置代码，目前我使用的是Painter库，默认会转化成这个插件的配置代码，将代码直接复制到card.js即可 查看代码 这个功能用不用无所谓，可以直观的看到生成的代码 导出json 将画布转化成fabric所需要的json代码，方便将自己设计的海报代码保存下来 导入json 将第3步导出的json代码导入，会在画布上显示已设计的海报样式 第二排五个按钮 画布 画布的属性参数 详解见下方 文字 添加文字的属性参数 详解见下方 矩形 添加矩形的属性参数 详解见下方 图片 添加图片的属性参数 详解见下方 二维码 添加二维码的属性参数 详解见下方 第三排 各种元素的详细设置参数 激活区 激活对象是指鼠标点击画布上的元素，该对象会被蓝色的边框覆盖，此时该对象被激活，可以执行拖动 旋转 缩放等操作 激活区只有对象被激活才会出来，用来设置激活对象的各种配置参数，修改value值后，实时更新当前激活对象的对应状态，点击其他区域，此模块将隐藏 快捷键 ‘←’ 左移一像素 ‘→’ 右移一像素 ‘↑’ 上移一像素 ‘↓’ 下移一像素 ‘ctrl + z’ 撤销 ‘ctrl + y’ 恢复 ‘delete’ 删除 ‘[’ 提高元素的层级 ‘]’ 降低元素的层级 布局属性 通用布局属性 属性 说明 默认 rotate 旋转，按照顺时针旋转的度数 0 width、height view 的宽度和高度 top、left 如 css 中为 absolute 布局时的作用 0 background 背景颜色 rgba(0，0，0，0) borderRadius 边框圆角 0 borderWidth 边框宽 0 borderColor 边框颜色 #000000 shadow 阴影 ‘’ shadow 可以同时修饰 image、rect、text 等 。在修饰 text 时则相当于 text-shadow；修饰 image 和 rect 时相当于 box-shadow 使用方法： [代码]shadow: 'h-shadow v-shadow blur color'; h-shadow: 必需。水平阴影的位置。允许负值。 v-shadow: 必需。垂直阴影的位置。允许负值。 blur: 必需。模糊的距离。 color: 必需。阴影的颜色。 举例: shadow:10 10 5 #888888 [代码] 渐变色支持 你可以在画布的 background 属性中使用以下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 中点，半径为最长边，目前不支持自己设置。 [代码]linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%) radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%) [代码] ！！！注意：颜色后面的百分比一定得写。 画布属性 属性 说明 默认 times 控制生成插件代码的宽度大小，比如画布宽100，times为2，生成的值为200 1 文字属性 属性名称 说明 默认值 text 字体内容 别跟我谈感情，谈感情伤钱 maxLines 最大行数 不限，根据 width 来 lineHeight 行高（上下两行文字baseline的距离） 1.3 fontSize 字体大小 30 color 字体颜色 #000000 fontWeight 字体粗细。仅支持 normal， bold normal textDecoration 文本修饰，支持none underline、 overline、 linethrough none textStyle fill： 填充样式，stroke：镂空样式 fill fontFamily 字体 sans-serif textAlign 文字的对齐方式，分为 left， center， right left 备注: fontFamily，工具中的第一个例子支持文字字体，但是导入小程序为什么看不到呢，小程序官网加载网络字体方法>> 加载字体教程>> 文字高度 是maxLines lineHeight2个字段一起计算出来的 图片属性 属性 说明 默认 url 图片路径 mode 图片裁剪、缩放的模式 aspectFill mode参数详解 scaleToFill 缩放图片到固定的宽高 aspectFill 图片裁剪显示对应的宽高 auto 自动填充 宽度全显示 高度自适应居中显示 Tips（一定要看哦～） 本工具不考虑兼容性，如发现不兼容请使用google浏览器 painter现在只支持这几种图形，所以暂不支持圆，线等 如果编辑过程，一个元素被挡住了，无法操作，请选择对象并通过[ ]快捷键提高降低元素的层级 文字暂不支持直接缩放操作，因为文字大小和元素高度不容易计算，可以通过修改激活栏目maxLines lineHeight fontSize值来动态改变元素 如发现导出的代码一个元素被另一个元素挡住了，请手动调整元素的位置，json数组中元素越往后层级显示就越高，由于painter没有提供层级参数，所以目前只能这样做 本工具导出代码全是以px为单位，为什么不支持rpx， 因为painter在rpx单位下，阴影和边框宽会出现大小计算问题，由于原例子没有提供px生成图片方案，可以下载我这里修改过的demo>>Painter即可解决 文本宽度随着字数不同而动态变化，想在文本后面加个图标根据文本区域长度布局， 请参考Painter文档这块教程直接修改源码 由于本工具开发有些许难度，如出现bug，建议或者使用上的问题，请提issue，源码地址>>painter-custom-poster 海报贡献 如果你设计的海报很好看，并且愿意开源贡献，可以贡献你的海报代码和缩略图，例子代码文件在example中，按顺序排列，例如现在库里例子是example2.js，那你添加example3.js和example3.jpg图片，事例可以参考一下文件夹中源码，然后在index.js中导出一下 导出代码 代码不要格式化，会报错，请原模原样复制到json字段里 生成缩略图 刚开始我想在此工具中直接生成图片，但是由于浏览器图片跨域问题导致报错失败 所以请去小程序中生成保存图片，图片质量设置0.2，并去tinypng压缩一下图片 找到painter.js，替换下边这个方法，可以生成0.2质量的图片，代码如下 [代码] saveImgToLocal() { const that = this; setTimeout(() => { wx.canvasToTempFilePath( { canvasId: 'k-canvas', fileType: 'jpg', quality: 0.2, success: function(res) { that.getImageInfo(res.tempFilePath); }, fail: function(error) { console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`); that.triggerEvent('imgErr', { error: error }); } }, this ); }, 300); } [代码] TODO 颜色值选择支持调色板工具 文字padding支持 缩放位置弹跳问题优化 假如需求大的话，支持其他几款插件库代码的生成 ~ 创作不易，如果对你有帮助，请给个星星 star✨✨ 谢谢 ~

最近一直比较忙，答应大家的小程序解析excel一直没有写出来，今天终于忙里偷闲，有机会把这篇文章写出来给大家了。 老规矩先看效果图 [图片] 效果其实很简单，就是把excel里的数据解析出来，然后存到云数据库里。说起来很简单。但是真的做起来的时候，发现其中要用到的东西还是很多的。不信。。。。 那来看下流程图 流程图 [图片] 通过流程图，我看看到我们这里使用了云函数，云存储，云数据库。 流程图主要实现下面几个步骤 1，使用wx.chooseMessageFile选择要解析的excel表格 2，通过wx.cloud.uploadFile上传excel文件到云存储 3，云存储返回一个fileid 给我们 4，定义一个excel云函数 5，把第3步返回的fileid传递给excel云函数 6，在excel云函数里解析excel，并把数据添加到云数据库。 可以看到最神秘，最重要的就是我们的excel云函数。 所以我们先把前5步实现了，后面重点讲解下我们的excel云函数。 一，选择并上传excel表格文件到云存储 这里我们使用到了云开发，使用云开发必须要先注册一个小程序，并给自己的小程序开通云开发功能。这个知识点我讲过很多遍了，还不知道怎么开通并使用云开发的同学，去翻下我前面的文章，或者看下我录的讲解视频《5小时入门小程序云开发》 1，先定义我们的页面 页面很简单，就是一个按钮如下图，点击按钮时调用chooseExcel方法，选择excel [图片] 对应的wxml代码如下 [图片] 2，编写文件选择和文件上传方法 [图片] 上图的chooseExcel就是我们的excel文件选择方法。 uploadExcel就是我们的文件上传方法，上传成功以后会返回一个fildID。我们把fildID传递给我们的jiexi方法，jiexi方法如下 3 把fildID传递给云函数 [图片] 二，解下来就是定义我们的云函数了。 1，首先我们要新建云函数 [图片] 如果你还不知道如何新建云函数，可以翻看下我之前写的文章，也可以看我录的视频《5小时入门小程序云开发》 如下图所示的excel就是我们创建的云函数 [图片] 2，安装node-xlsx依赖库 [图片] 如上图所示，右键excel，然后点击在终端中打开。 打开终端后， 输入 npm install node-xlsx 安装依赖。可以看到下图安装中的进度条 [图片] 这一步需要你电脑上安装过node.js并配置npm命令。 3，安装node-xlsx依赖库完成 [图片] 三，编写云函数 我把完整的代码贴出来给大家 [代码]const cloud = require('wx-server-sdk') cloud.init() var xlsx = require('node-xlsx'); const db = cloud.database() exports.main = async(event, context) => { let { fileID } = event //1,通过fileID下载云存储里的excel文件 const res = await cloud.downloadFile({ fileID: fileID, }) const buffer = res.fileContent const tasks = [] //用来存储所有的添加数据操作 //2,解析excel文件里的数据 var sheets = xlsx.parse(buffer); //获取到所有sheets sheets.forEach(function(sheet) { console.log(sheet['name']); for (var rowId in sheet['data']) { console.log(rowId); var row = sheet['data'][rowId]; //第几行数据 if (rowId > 0 && row) { //第一行是表格标题，所有我们要从第2行开始读 //3，把解析到的数据存到excelList数据表里 const promise = db.collection('users') .add({ data: { name: row[0], //姓名 age: row[1], //年龄 address: row[2], //地址 wechat: row[3] //wechat } }) tasks.push(promise) } } }); // 等待所有数据添加完成 let result = await Promise.all(tasks).then(res => { return res }).catch(function(err) { return err }) return result } [代码] 上面代码里注释的很清楚了，我这里就不在啰嗦了。 有几点注意的给大家说下 1，要先创建数据表 [图片] 2，有时候如果老是解析失败，可能是有的电脑需要在云函数里也要初始化云开发环境 [图片] 四，解析并上传成功 如我的表格里有下面三条数据 [图片] 点击上传按钮，并选择我们的表格文件 [图片] 上传成功的返回如下，可以看出我们添加了3条数据到数据库 [图片] 添加成功效果图如下 [图片] 到这里我们就完整的实现了小程序上传excel数据到数据库的功能了。 再来带大家看下流程图 [图片] 如果你有遇到问题，可以在底部留言，我看到后会及时解答。后面我会写更多小程序云开发实战的文章出来。也会录制本节的视频出来，敬请关注。

一、地理位置接口新增说明 由于精确地理位置接口只允许部分类目的小程序申请使用，为了满足开发者在更多场景使用地理位置接口，自 2022 年 7 月 14 日起，新增获取模糊地理位置接口（wx.getFuzzyLocation）。同时为保障用户合法权益，该接口调用前需进行准入开通申请，该接口准入规则与 wx.chooseLocation 一致。 wx.getFuzzyLocation 接口说明： 1、该接口返回的是经过模糊处理的经纬度坐标； 2、该接口支持返回 wgs84 或 gcj02 两种类型的坐标； 3、该接口需要用户授权 scope.userFuzzyLocation。 二、app.json 的配置指引 为了开发者能够正常使用获取模糊地理位置等接口，以及后续对于代码提审环节的优化（见「三、地理位置接口使用流程」），自 2022 年 7 月 14 日起，开发者在使用地理位置相关接口时（共计 8 个，见表1），需要提前在 app.json 中进行配置。 1、需配置的接口列表 [图片] 表1 2、配置规则 1）在代码中使用的地理位置相关接口（共计 8 个，见表1），开发者均需要在 app.json 中 requiredPrivateInfos 配置项中声明，代码格式如下： [图片] 2）表1中模糊位置信息（序号1）和精确位置信息（序号2-5）是互斥的，即声明了模糊位置信息就无法声明精确位置信息。若同时声明模糊位置信息和精确位置信息，则在编译代码时出现错误； 3）注意：自 2022 年 7 月 14 日后发布的小程序，如果未在 app.json 中声明表1中的相关接口，则小程序调用这些接口（表1）时会出现错误，在 2022 年 7 月 14 日之前发布的小程序不受影响； 4）对于第三方开发者，需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口，配置规则和普通小程序的配置规则相同。 三、地理位置接口使用流程 自 2022 年 7 月 14 日起，开发者如需在最新版本发布后使用地理位置相关接口，除需完成接口权限开通外，还需在 app.json（或ext.json）配置环节，具体如下： 1、接口权限开通 以下 8 个接口需完成准入开通流程：wx.getFuzzylocation、wx.getLocation、wx.onLocationChange、wx.chooseAddress、wx.choosePoi、wx.chooseLocation、wx.startLocationUpdate、wx.startLocationUpdateBackground 1）普通开发者：需要在 “小程序管理后台 -「开发」-「开发管理」-「接口设置」” 中完成权限申请； 2）第三方开发者：可通过 apply_privacy_interface 接口完成权限申请。 2、app.json（或 ext.json）配置 1）普通开发者：需在 app.json 中声明其需调用的地理位置相关接口，具体配置流程见「二、app.json 的配置指引」； 2）第三方开发者：需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口（配置方式：可通过 commit 接口配置）。 同时，为了提升开发者体验，平台在代码提审环节会协助开发者对地理位置接口进行检测，如检测出代码中包含未完成准入开通的地理位置接口，平台将再次提醒开发者确认是否需使用相关接口。 1）普通开发者：若无需使用，开发者可在提审时确认不使用该接口，即可正常进行代码提审。小程序审核通过且新版本发布完成后，平台将对小程序确认不使用的接口关闭使用权限； 2）第三方开发者：若无需使用，可在提审时通过参数声明不使用该接口（声明方式：可通过 submit_audit 接口配置），即可正常进行代码提审，审核通过后发布上线，将对其声明不使用的接口关闭使用权限。 以上调整将仅对所有小程序生效。 微信团队 2022年6月1日

产品简介：通过生成小程序二维码（又称太阳码或葵花码，后文简称小程序码），并将印有小程序码的物料铺设在线下场景，或通过线上分享等方式，引导用户扫码或长按识别二维码进入小程序，实现小程序引流；并可通过配置带参数的小程序码，监控各来源渠道的转化效果。 优势：低成本，易生成，易推广；用户习惯养成，扫码、识别码易用。 接入方式：普通小程序二维码无须开发，可在后台直接生成；带参数小程序码须开发。 关键词：小程序引流，数据跟踪与分析。 01　应用场景 在时尚零售行业，品牌可基于不同的业务场景，将小程序码印在商品、包装、宣传物料、门店展架等等，引导用户通过扫码快速进入小程序。 1）线下场景如： 将小程序码印在宣传物料上，引导用户扫码进入小程序； 将小程序码印到商品瓶身、包装、货架上，引导用户扫描进入小程序，享受扫码购服务； 将小程序码印在亚克力牌上，放置在店内如收银台等位置，引导用户扫描进入小程序，快速创建会员、填写服务问卷等。 2）线上场景如： 在小程序内提供个性化分享卡片的生成功能，用户可将卡片自主转发给好友，好友可长按识别卡片进入小程序，体验小程序内的商品购买、预约等服务。 02　生成方式 小程序码的生成有两种方式，分别为通过小程序后台生成链接统一的普通小程序码，以及通过开发生成带参数的小程序码。 1）普通小程序码： 我们推荐你通过小程序后台（mp.weixin.com）-设置-基本设置-小程序码及线下物料下载，完成小程序码的下载。 下载完成后，你可以将其打印并铺设到线下场景，或者直接附于海报中用于线上传播。 2）带参小程序码： 如须生成带参数的小程序码，为每个宣传物料配上独一无二的小程序码，智能跟踪来源于不同渠道的明细数据，可通过后台接口生成不限数量且永久有效的带参数小程序码。 开发指引内容较长，建议使用电脑详细查阅。点击打开文档 3）兼容普通二维码： 我们还提供了扫描普通二维码跳转小程序的能力。如线下已铺设有二维码，无须更换二维码，即可通过该能力在线下推广小程序。 开发指引内容较长，建议使用电脑详细查阅。点击打开文档 03　进阶应用-带参数码详细介绍 通过带参数二维码的灵活应用，可以监控各个渠道的用户来源、活动转化，调配资源提升营销运营效果，它的应用场景有： 1） 大数据营销： 在不同渠道投放不同参数的小程序码，可以精准记录客户来源，为营销决策提供依据。 2）线下助销： 通过给每个销售人员、每个店铺分配带有参数的小程序码进行佣金统计、计算销售奖励等。 3）一物一码： 让每个产品都拥有一个独一无二的小程序码，实现产品的差异化控制。

获取当前的地理位置（wx.getLocation）接口申请一直不通过，请问是什么原因？ [图片] [图片]

各位微信开发者： 以下是微信云托管新能力及实践分享介绍、小程序用户头像昵称获取规则调整、微信网页授权能力调整及上周我们在社区收到的问题反馈的处理进度，希望与大家一同打造更好的小程序生态！ 资源复用支持消息推送和微信支付、服务 SSR 支持公众号授权登录 在资源复用场景下，微信云托管支持被关联账号配置 消息推送，实现无需加解密和签名，即可接收微信消息推送；同时支持被关联账号配置 微信支付，高效、安全接入微信支付能力。同时服务 SSR 支持 WebSDK 公众号授权登录，无需单独配置转发规则，快速实现登录，详情请查看 接口文档。 同时微信云托管上线 如何提升云托管项目构建效率 场景指南和 云托管消息推送配置使用 直播课程，便于开发者快速掌握微信云托管，高效应用云托管知识。 更多云托管相关内容，请点击查看 微信云托管功能周报。 小程序用户头像昵称获取规则调整公告 为减少不合理的强迫授权用户头像昵称的情况，微信团队对接口进行调整。自 2022 年 10 月 25 日 24 时后，小程序 wx.getUserProfile 接口将被收回，插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回，支持 头像昵称填写能力 获取用户头像昵称。详情点击查看原公告《小程序用户头像昵称获取规则调整公告》 微信网页授权能力调整公告 为进一步规范能力使用，保障用户合法权益，平台将对 微信网页授权能力 进行调整。当开发者在网页中在不规范使用发起 snsapi_userinfo 网页授权时，微信将默认打开网页快照页模式进行基础浏览。能力调整将于 2022 年 7 月 12 日 24 时生效。详情点击查看原公告《微信网页授权能力调整公告》 上周问题反馈和处理进度（5.02-5.06） 已修复的问题iOS 端 navigateToMiniProgram 无法二次唤起的问题 查看详情 iOS 15.4系统 video live-pusher 同时存在 video 播视频没有声音的问题 查看详情 修复中的问题 使用 RecorderManager 出现小程序视频、录音、直播互相冲突的问题 查看详情 苹果手机调用 wx.chooseMedia 拍照后，底部露出拍摄按钮的问题 查看详情 StorageAPI 基础库缓存值后，工具手动修改 bug 的问题 查看详情 微信团队 2022.5.12

为进一步规范开发者调用涉用户信息相关接口或功能，保障用户合法权益，平台将对如下地理位置相关接口调用实行准入开通： wx.getLocation、wx.onLocationChange、wx.chooseAddress、wx.chooseLocation、wx.choosePoi 自2022年4月18日开始，如使用以上接口，在代码审核环节将检测该接口是否已完成准入开通（申请路径：小程序管理后台 -「开发」-「开发管理」-「接口设置」），如未开通，将在代码提审环节进行拦截，请涉及相关接口的开发者尽快进行接口权限申请，第三方开发者申请方式：可通过 apply_privacy_interface 接口完成。 请广大涉及相关接口的开发者尽快进行相关接口准入申请，如未申请，后续将影响线上小程序相关接口的使用。

前言 navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。 思路 隐藏原生样式 获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度，进行适配 编写新的导航栏 引用到页面 正文 一、隐藏原生的navigationBar window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。 [代码]"window": { "navigationStyle": "custom" } [代码] 让我们看看隐藏后的效果： [图片] 可以看到原生的navigationBar已经消失了，剩下孤零零的胶囊按钮，胶囊按钮是无法隐藏的。 二、准备工作 1.获取胶囊按钮的布局位置信息 我们用wx.getMenuButtonBoundingClientRect()【官方文档】获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点： [代码]const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); [代码] width height top right bottom left 宽度 高度 上边界坐标 右边界坐标 下边界坐标 左边界坐标 下面是官方给的示意图，方便大家理解几个坐标。 [图片] 2.获取系统信息 用wx.getSystemInfoSync()【官方文档】获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。 [代码]const systemInfo = wx.getSystemInfoSync(); [代码] 三、计算公式 我们先要知道导航栏高度是怎么组成的， 计算公式：导航栏高度 = 状态栏高度 + 44。 实例 【源码下载】 自定义导航栏会应用到多个、甚至全部页面，所以封装成组件，方便调用；下面是我写的一个简单例子： app.js [代码]App({ onLaunch: function(options) { const that = this; // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏高度 + 44 that.globalData.navBarHeight = systemInfo.statusBarHeight + 44; that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right; that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight; that.globalData.menuHeight = menuButtonInfo.height; }, // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器 globalData: { navBarHeight: 0, // 导航栏高度 menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致） menuBotton: 0, // 胶囊距底部间距（保持底部间距一致） menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致） } }) [代码] app.json [代码]{ "pages": [ "pages/index/index" ], "window": { "navigationStyle": "custom" }, "sitemapLocation": "sitemap.json" } [代码] 下面为组件代码： /components/navigation-bar/navigation-bar.wxml [代码]<!-- 自定义顶部栏 --> <view class="nav-bar" style="height:{{navBarHeight}}px;"> <input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input> </view> <!-- 内容区域： 自定义顶部栏用的fixed定位，会遮盖到下面内容，注意设置好间距 --> <view class="content" style="margin-top:{{navBarHeight}}px;"></view> [代码] /components/navigation-bar/navigation-bar.json [代码]{ "component": true } [代码] /components/navigation-bar/navigation-bar.js [代码]const app = getApp() Component({ properties: { // defaultData（父页面传递的数据-就是引用组件的页面） defaultData: { type: Object, value: { title: "我是默认标题" }, observer: function(newVal, oldVal) {} } }, data: { navBarHeight: app.globalData.navBarHeight, menuRight: app.globalData.menuRight, menuBotton: app.globalData.menuBotton, menuHeight: app.globalData.menuHeight, }, attached: function() {}, methods: {} }) [代码] /components/navigation-bar/navigation-bar.wxss [代码].nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;} .nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;} [代码] 以下是调用页面的代码，也就是引用组件的页面： /pages/index/index.wxml [代码]<navigation-bar default-data="{{defaultData}}"></navigation-bar> [代码] /pages/index/index.json [代码]{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } } [代码] /pages/index/index.js [代码]const app = getApp(); Page({ data: { // 组件参数设置，传递到组件 defaultData: { title: "我的主页", // 导航栏标题 } }, onLoad() { console.log(this.data.height) } }) [代码] 效果图： [图片] 好了，以上就是全部代码了，大家可以文中复制代码，也可以【下载源码】，直接到开发者工具里运行，记得appid用自己的或者测试哦！ 下面附几张其它小程序的效果图，大家也可以尝试照着做： [图片][图片] 总结 本文写了自定义navigationBar的一些基础性东西，里面涉及组件用法、参数传递、导航栏相关。 由于测试环境有限，大家在使用时如果发现有什么问题，希望及时反馈，以供及时更新帮助更多的人！ 大家有什么疑问，欢迎评论区留言！