2024 年，为了与广大开发者朋友更直接高效地交流，微信团队全新升级开发者线下交流形式，与开发者们深度探讨井应用最新技术，期望与更多的开发者们共创小程序技术新价值！

众所周知，微信小程序的开发需要依赖微信官方提供的开发工具（IDE），在 IDE 中完成小程序的真机预览和上传，每次都要手动操作还是比较麻烦的。对于托管在 GitHub 的项目，我们可以利用 GitHub 提供的 GitHub Actions 这一能力，实现小程序的持续集成（CI/CD）。 我们主要利用了 GitHub Action for WeChat MiniProgram 这个 Action，实现了以下自动化流程： 当 Commit 推送到 [代码]master[代码] 分支时，触发小程序预览并显示预览二维码 当有人创建了 Pull Request 时，触发小程序预览并显示预览二维码 当创建版本 Tag 并推送到 GitHub 时，触发小程序的构建和上传 更多有关小程序 GitHub Actions 的玩法，也欢迎探索和交流~ 准备工作 在使用 GitHub Action for WeChat MiniProgram 前，需要先准备好小程序代码上传密钥，这是用于小程序开发者身份鉴权的凭证。获取步骤如下： 登录微信小程序管理后台 https://mp.weixin.qq.com 登录后在左侧菜单依次找到「开发」—「开发管理」，在右侧界面找到「开发设置」Tab。向下滚动找到「小程序代码上传」模块，点击「生成」按钮。管理员使用微信扫码后，获得密钥文件并下载 关闭「IP 白名单」功能。因为执行 GitHub Actions 的机器 IP 范围我们无法获得，这里需要关闭此功能 [图片] 打开 GitHub 小程序项目的「Settings」，在左侧菜单依次找到「Secrets」—「Actions」，点击右上角按钮「New repository secret」，「Name」输入 [代码]PRIVATE_KEY[代码]，「Secret」粘贴第 2 步中密钥文件的内容，点击「Add secret」保存 [图片] 至此，准备工作已完成，我们已经给项目配置了 GitHub Actions 所需的密钥。 在项目中使用 示例项目：crazyurus/recruit-miniprogram 首先在项目根目录下创建 [代码].github/workflows[代码] 文件夹，再根据我们的需求编写 YAML 文件 实现小程序预览 在 [代码]workflows[代码] 目录下新建 [代码]preview.yaml[代码]。我们需要当 Commit 推送到 [代码]master[代码] 分支时触发小程序预览。因此在 [代码]preview.yaml[代码] 中添加： [代码]name: 提交 Commit 预览小程序 on: push: branches: - master [代码] 命中该条件时，这个 YAML 就会被 GitHub Actions 执行，我们可以在项目的「Actions」中看到执行进度和结果： [图片] 接下来需要给 [代码]preview.yaml[代码] 定义具体的行为，在其中添加： [代码]jobs: preview: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - id: preview name: Compile uses: crazyurus/miniprogram-action@1.0.0 with: action_type: preview env: PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }} - name: QR Code uses: peter-evans/commit-comment@v2 with: body: | Copy the following content to the address bar of the browser to open the preview QR code ``` ${{ steps.preview.outputs.preview_qrcode }} ``` [代码] 其中，[代码]jobs.preview[代码] 是 Job 的名称，[代码]runs-on[代码] 是 Job 运行环境，[代码]steps[代码] 是运行步骤。这个 Job 主要有 3 步： Checkout 项目代码 运行 [代码]crazyurus/miniprogram-action[代码] 这个 Action（即前面提到的 GitHub Action for WeChat MiniProgram），[代码]id[代码] 是 Step 的唯一标识（用于后面取 [代码]outputs[代码]），[代码]with[代码] 传递参数 [代码]action_type[代码]，[代码]env[代码] 传递密钥内容。这个 Action 会对小程序进行编译，并生成预览二维码，二维码图片的 Base64 内容会通过 [代码]outputs.preview_qrcode[代码] 返回 运行 [代码]peter-evans/commit-comment[代码] 这个 Action，用来给 Commit 增加评论。我们把上一步获取到的二维码图片 Base64 评论到这个 Commit 上，在 Commit 左边即可看到一个评论图标： [图片] 点击后即可看到这条评论和二维码内容。由于 GitHub Markdown 的限制，我们暂时无法使用图片格式语法展示 Base64 图片，需要将内容复制后粘贴到浏览器地址栏即可预览。 [图片] 如果我们要实现有人创建了 Pull Request 时，触发小程序预览并显示预览二维码。只需要： 新建 [代码]pull-request.yaml[代码] 更换 [代码]on[代码] 中的触发条件，改为 [代码]pull_request[代码] 修改第 3 步中的 Action，替换为 [代码]dannyskoog/pull-request-comment[代码]，用来给 Pull Request 增加评论 完整配置如下： [代码]name: 创建 Pull Request 预览小程序 on: pull_request: branches: master types: [opened, synchronize, reopened] jobs: preview: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - id: preview name: Compile uses: crazyurus/miniprogram-action@1.0.0 with: action_type: preview env: PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }} - name: QR Code uses: dannyskoog/pull-request-comment@v1 with: message: | Copy the following content to the address bar of the browser to open the preview QR code ``` ${{ steps.preview.outputs.preview_qrcode }} ``` [代码] 如果需要预览时指定场景值、页面路径、页面参数等，GitHub Action for WeChat MiniProgram 也同样支持，在 [代码]with[代码] 增加参数即可。支持的参数如下： 参数 是否必填 描述 默认值 action_type [代码]false[代码] Action 类型, [代码]preview[代码] 或 [代码]upload[代码] [代码]upload[代码] project_path [代码]false[代码] 项目路径，需包含 [代码]project.config.json[代码] 文件 [代码].[代码] page_path [代码]false[代码] 预览的页面路径，例如 [代码]pages/index/index[代码] [代码]app.json[代码] 中第一个页面 page_query [代码]false[代码] 预览的页面参数，例如 [代码]a=b&c=1[代码] scene [代码]false[代码] 场景值，详细见 微信官方文档 [代码]1011[代码] version [代码]false[代码] 上传的版本号 [代码]1.0.0[代码] description [代码]false[代码] 上传的版本描述 需要注意的是，如果你的小程序代码不在项目的根目录下，则需要配置 [代码]project_path[代码] 参数指定小程序的目录（[代码]project.config.json[代码] 文件所在的目录）。例如使用了 [代码]Taro[代码] 等框架，需要由框架编译后再运行，则需要指定 [代码]project_path[代码] 为编译后的目录 [代码]dist[代码]，并且在 YAML 文件中的 Compile Job 前需要增加框架依赖安装和编译的步骤。YAML 如下： [代码]jobs: preview: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Install dependencies run: npm ci - name: Taro compile run: npm run build:weapp - name: Compile uses: crazyurus/miniprogram-action@1.0.0 with: action_type: preview project_path: dist env: PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }} [代码] 实现小程序上传 我们使用 Git Tag 触发小程序的发布，例如执行以下命令： [代码]$ git tag 2.3.4 $ git push --tags [代码] 此时会在最新的 Commit 创建一个 [代码]2.3.4[代码] 的 Tag。我们基于这个 Commit 发布小程序的 [代码]2.3.4[代码] 版本，因此需要 GitHub Actions 触发小程序上传。 在 [代码]workflows[代码] 目录下新建 [代码]upload.yaml[代码]，并添加： [代码]name: 上传小程序 on: push: tags: - "*.*.*" jobs: upload: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Upload uses: crazyurus/miniprogram-action@1.0.0 with: action_type: upload version: ${{ github.ref_name }} env: PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }} [代码] 其中，[代码]github.ref_name[代码] 这里代表标签名称，我们将标签名称作为版本号传递给 Action，再由 Action 上传到微信服务端。上传后效果如下： [图片] 接下来在微信小程序管理后台提交审核即可。 给项目增加 Badge 至此小程序项目就成功接入了 GitHub Actions，我们还可以给项目 [代码]README.md[代码] 增加徽章（Badge），用于显示项目的持续集成状态。将以下图片添加到 [代码]README.md[代码] 中： [代码] [代码] 其中，[代码]crazyurus/recruit-miniprogram[代码] 需要替换为你的项目名称，[代码]preview.yaml[代码] 需要替换为你的 YAML 文件名。 效果如下： [图片] 更多方式可参见 GitHub 官方文档 Adding a workflow status badge 实现原理 Action 实现：crazyurus/miniprogram-action GitHub Action for WeChat MiniProgram 基于微信官方提供的 [代码]miniprogram-ci[代码] 实现了小程序的预览和上传。主要逻辑如下： 输入参数读取，使用 [代码]@actions/core[代码] 提供的 [代码]getInput[代码] 方法 使用环境变量 [代码]process.env.PRIVATE_KEY[代码] 获取密钥，[代码]process.env.GITHUB_WORKSPACE[代码] 获取小程序项目路径 读取小程序 [代码]project.config.json[代码] 文件，获取 [代码]AppID[代码]、[代码]compileType[代码]、[代码]miniprogramRoot[代码] 以及 [代码]es6[代码]、[代码]minified[代码] 等编译参数，转换后传递给 [代码]miniprogram-ci[代码] 若小程序项目存在 [代码]package.json[代码]，则在预览或上传前调用 [代码]ci.packNpm[代码] 对小程序中的 NPM 依赖进行构建 根据参数 [代码]action_type[代码] 决定调用 [代码]ci.preview[代码] 还是 [代码]ci.upload[代码] 小程序预览执行完成，通过 [代码]@actions/core[代码] 提供的 [代码]setOutput[代码] 方法将二维码输出 总结 我们使用 GitHub Action for WeChat MiniProgram 实现了小程序项目的持续集成，在 Commit 或 Pull Request 时触发预览并生成二维码，在添加 Tag 时上传小程序到管理后台。 总而言之，GitHub Actions 的功能十分强大，接下来你还可以探索： 给项目增加更多的自动化流程，例如 Pull Request 被合并后也触发上传。推荐阅读阮一峰的 GitHub Actions 入门教程 了解更多用法 给项目引入更多的 GitHub Actions 让流程更强大，例如将生成的二维码通过飞书机器人发送给自己或群、基于 [代码]miniprogram-automator[代码] 实现小程序的自动化测试等。更多的 GitHub Actions 可以到 GitHub Actions 市场 获取 当现有的 GitHub Actions 无法满足项目的需求时，可以参考 GitHub Actions 开发文档 和 GitHub Action for WeChat MiniProgram 的代码自己实现一个

如题 👆 附： 想实现列表项 懒加载+进入可视区过渡动画 的效果， 如果不能使用 IntersectionObserver  API ， 有什么比较好的其他方案吗？ 计算 scrollTop 的方法有点担心性能问题

skyline模式下的scroll-view，在滚动时有明显卡顿skyline的相册，打开大图返回后，不停的request相同的图片，直到内存爆掉[图片]

在学习 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 混用体验的有效方式，需要根据实际情况进行调整和优化，以达到最佳的预加载效果。

[图片] windows rc版 [图片]

<scroll-view type="list" scroll-y bindscrolltolower="{{h}}" bindscroll="{{i}}" > 如题，Skyline模式下， bindscrolltolower，会正常执行， 但是 bindscroll 一直不执行，是咋回事？

如代码片段中设置的样式，文本设置的是超出两行省略号显示，标签中包裹了显示为‘自营’的另外一个标签，在开发工具和安卓机测试都可以正常显示，但在iphone机型上有些展示为一行省略号 下图为代码片段在开发工具中的正常显示效果： [图片] 下图是iphone13的不正常显示效果，本应该显示两行省略号，结果显示为一行省略号，机型：iphone13 iOS系统：17.2.1 微信版本：8.0.42 [图片] 下图是华为mate60 pro的显示效果, 两行省略号显示正常，微信版本：8.0.44 [图片] 用多台iphone真机测试结果如下： iphone12pro ios16.0 微信：8.0.45 显示正常 Iphone8plus iOS13.3.1 微信：8.0.45 显示正常 iphone14pm ios17.2 微信：8.0.45  显示不正常 iphone13 ios17.2.1 微信：8.0.42 显示不正常 测试发现： 如果外层标签中不包裹‘自营’的标签，用iPhone13真机测试显示也可以正常 [图片] 望官方尽快回复

view{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } [图片]

前言 自从iphoneX问世之后，因为iphoneX、iphoneXR和后续全面屏手机设备，因为物理Home键被底部小黑条代替了，这时候很多前端小伙伴在开发的过程都会遇到 “全面屏”和“非全面屏”的兼容性问题，普遍问题就是底部按钮或者选项卡与底部黑线重叠 解释 根据官方解释： 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。 具体区域如图展示 [图片] 适配方案 当前有效的解决方式有几种 使用已知底部小黑条高度34px/68rpx来适配 使用苹果官方推出的css函数env()、constant()适配 使用微信官方API，getSystemInfo()中的safeArea对象进行适配 使用已知底部小黑条高度34px/68rpx来适配 这种方式是根据实践得出，通过物理方式测出iPhone底部的小黑条（Home Indicator）高度是34px，实际在开发者工具选中真机获取到高度也是34px，所以直接根据该值，设置margin-bottom、padding-bottom、height也能实现。同时这样做要有一个前提，需要判断当前机型是需要适配安全区域的机型。 但是这种方案相对来说是不推荐使用的。比较是一个比较古老原始的方案 使用苹果官方推出的css函数env()、constant()适配 这种方案是苹果官方推荐使用env()，constant()来适配，开发者不需要管数值具体是多少。 env和constant是IOS11新增特性，有4个预定义变量： safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area-inset-top：安全区域距离顶部边界的距离 safe-area-inset-bottom ：安全距离底部边界的距离 具体用法如下： Tips: constant和env不能调换位置 [代码] padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/ [代码] 其实利用这个能解决大部分的适配场景了，但是有时候开发需要自定义头部信息，这时候就没办法使用css来解决了 使用微信官方API，getSystemInfo()中的safeArea对象进行适配 通过 wx.getSystemInfo获取到各种安全区域信息，解析出具体的设备类型，通过设备类型做宽高自适应，话不多说，直接上代码 代码实现 [代码] const res = wx.getSystemInfoSync() const result = { ...res, bottomSafeHeight: 0, isIphoneX: false, isMi: false, isIphone: false, isIpad: false, isIOS: false, isHeightPhone: false, } const modelmes = result.model const system = result.system // 判断设备型号 if (modelmes.search('iPhone X') != -1 || modelmes.search('iPhone 11') != -1) { result.isIphoneX = true; } if (modelmes.search('MI') != -1) { result.isMi = true; } if (modelmes.search('iPhone') != -1) { result.isIphone = true; } if (modelmes.search('iPad') > -1) { result.isIpad = true; } let screenWidth = result.screenWidth let screenHeight = result.screenHeight // 宽高比自适应 screenWidth = Math.min(screenWidth, screenHeight) screenHeight = Math.max(screenWidth, screenHeight) const ipadDiff = Math.abs(screenHeight / screenWidth - 1.33333) if (ipadDiff < 0.01) { result.isIpad = true } if (result.isIphone || system.indexOf('iOS') > -1) { result.isIOS = true } const myCanvasWidth = (640 / 375) * result.screenWidth const myCanvasHeight = (1000 / 667) * result.screenHeight const scale = myCanvasWidth / myCanvasHeight if (scale < 0.64) { result.isHeightPhone = true } result.navHeight = result.statusBarHeight + 46 result.pageWidth = result.windowWidth result.pageHeight = result.windowHeight - result.navHeight if (!result.isIOS) { result.bottomSafeHeight = 0 } const capsuleInfo = wx.getMenuButtonBoundingClientRect() // 胶囊热区 = 胶囊和状态栏之间的留白 * 2 (保持胶囊和状态栏上下留白一致) * 2(设计上为了更好看) + 胶囊高度 const navbarHeight = (capsuleInfo.top - result.statusBarHeight) * 4 + capsuleInfo.height // 写入胶囊数据 result.capsuleInfo = capsuleInfo; // 安全区域 const safeArea = result.safeArea // 可视区域高度 - 适配横竖屏场景 const screenHeight = Math.max(result.screenHeight, result.screenWidth) const height = Math.max(safeArea.height, safeArea.width) // 状态栏高度 const statusBarHeight = result.statusBarHeight // 获取底部安全区域高度（全面屏手机） if (safeArea && height && screenHeight) { result.bottomSafeHeight = screenHeight - height - statusBarHeight if (result.bottomSafeHeight < 0) { result.bottomSafeHeight = 0 } } // 设置header高度 result.headerHeight = statusBarHeight + navbarHeight // 导航栏高度 result.navbarHeight = navbarHeight [代码]

[图片]

<view class="iconfont icon-gongzuotai"></view> 在IDE里面90%的时候不生效，但是偶尔能生效，真机上不生效。有的帖子说是放到 data 里面然后通过变量访问，试过也不行。哪位大佬能帮忙解答一下 skyline 引擎 iconfont 应该怎么使用？

app.json配置skyline后，无法使用插件组件， [图片] 删除skyline配置后就正常了 [图片] 代码片段：https://developers.weixin.qq.com/s/mO6yxpmh7iSa

场景： 在小程序中大家应该都有这样的场景，在onLaunch里用wx.login静默登录拿到code，再用code去发送请求获取token、用户信息等，整个过程都是异步的，然后我们在业务页面里onLoad去用的时候异步请求还没回来，导致没拿到想要的数据，以往要么监听是否拿到，要么自己封装一套回调，总之都挺麻烦，每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案，公司内部已接入两年很稳定： 1.可完美解决异步问题 2.不污染原生生命周期，与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现，接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景，以下有部分是伪代码，请勿直接粘贴使用，具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = {   // 是否已拿到token   token: '',   // 用户信息   userInfo: {     userId: '',     head: ''   } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({  'Login':{     name:'Login',     watchKey: 'token',     onUpdate(token){       //有token则触发此钩子       return !!token;     }   },  'User':{     name:'User',     watchKey: 'userInfo',     onUpdate(user){       //获取到userinfo里的userId则触发此钩子       return !!user.userId;     }   } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }） //关键点来了 //Page.js，业务页面使用 Page({   onLoadLogin() { //拿到token啦，可以使用token发起请求了 const token = getApp().globalData.token },   onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo },   onReadyUser() { //页面初次渲染完毕 && 拿到用户信息，可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) },   onShowUser() { //页面每次显示 && 拿到用户信息，我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github：https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快，记得star哦

简述：使用开启CORS的woff字体格式(或ttf)的https资源地址，使用[代码]wx.loadFontFace[代码] API(css原生[代码]@font-face[代码]语法)加载使用。 ⚠️ 注意：字体商用需授权许可，目前免费可商用的大部分字体，可见参考索引5。以下示例使用的是开源字体：得意黑和钉钉进步体。 1. wx.loadFontFace使用wx.loadFontFace 加载字体，配合wxss和wxml使用，参见文档 & 官方示例 // -- wxss -- // .DingTalk-JinBuTi { // font-family: 'DingTalk-JinBuTi'; // } wx.loadFontFace({  family: 'DingTalk-JinBuTi',  source: 'url("https://xxx/font/DingTalk-JinBuTi.woff")', //此处需替换为真实字体地址  success(res) {    console.log(res.status) },  fail: function (res) {    console.log(res.status) },  complete: function (res) {    console.log(res.status) } }); 注意： 格式支持常见的基本所有类型(ttf、woff、woff2（web主流）、otf、sfnt)，建议格式为 TTF 和 WOFF（推荐），WOFF2 在低版本的 iOS 上会不兼容。字体链接仅支持https链接字体链接访问需满足浏览器同源策略，字体文件资源设置CORS的[代码]Access-Control-Allow-Origin[代码]为小程序域名：[代码]servicewechat.com[代码]或者*才可以。经过测试，ios和小米手机对于未设置CORS的字体文件仍然可以正常加载，荣耀和vivo无法正常加载，需要设置正确的CORS即可正常加载在加载成功之后，会自动刷新字体显示不需要设置downloadFile合法域名及业务域名。扩展：一次加载，全局使用如下在app.js中加载添加全局参数（global: true），即可在任意页面中的font-family中使用该字体。 onLaunch() {  wx.loadFontFace({    family: 'DingTalk-JinBuTi',    global: true,    source: 'url("https://xxx/font/DingTalk-JinBuTi.woff")', //此处需替换为真实字体地址    success(res) {      console.log(res.status)   },    fail: function (res) {      console.log(res.status)   },    complete: function (res) {      console.log(res.status)   } }); }, 2. @font-face同css加载字体的规则，见MDN文档， 注意：字体链接访问需满足浏览器同源策略。支持常见格式。 @font-face { font-family: "SmileySans-Oblique"; src: url("https://xxx/font/SmileySans-Oblique.woff"); //此处需替换为真实字体地址 } ​ .SmileySans-Oblique { font-family: 'SmileySans-Oblique'; } 扩展：全局使用在app.wxss中引入字体即可全局使用。 @font-face {  font-family: "SmileySans-Oblique";  src: url("https://xxx/font/SmileySans-Oblique.woff"); //此处需替换为真实字体地址 } ​ .SmileySans-Oblique {  font-family: 'SmileySans-Oblique'; } 3. face-font base64 因源码过大致小程序增加包体积，暂不考虑。英文字体可以考虑。参见此。 扩展：在canvas中使用小程序canvas渲染时需要字体加载完成，css方式字体加载完成不容易监听，小程序文档提到可使用wx.loadFontFaced的回调中渲染canvas。参考文档及代码示例。 另外wxml-to-canvas中不支持font-family属性，可参考链接4修改源码实现。 参考wx.loadFontFace(Object object) | 微信开放文档微信小程序使用自定义字体的三种方法 - 掘金loadFontFace 支持全局生效 | 微信开放社区wxml-to-canvas没有fontWeight的相关支持？ | 微信开放社区光明正大用字体——2023年“不要钱”的字体集合！哔哩哔哩bilibili[图片]

[视频] 本视频主要介绍小程序的启动流程和关键步骤，以及全新的引擎与框架能力。