视频号本地生活小店最新接口文档： https://docs.qq.com/doc/DSGRGTVZnakhCaURS?u=1bccddf3447545b5ba3dd058c6b3c9d9 主要支持：商品，价库，发券同步。 核心业务时序图[图片]

用完即走，小程序已经成为连接用户与服务的重要桥梁，无论是购物、出行还是娱乐，小程序都以其便捷性和高效性赢得了用户的青睐。 那小程序是否有边界，能否拓展到 App？ 微信开发者工具的最新升级，为这一问题提供了创新的解答。现在，开发者们可以轻松将已有的小程序代码构建为全功能的 App，而无需从零开始开发，这不仅节省了大量的人力和时间成本，更为小程序开发者们打开了通往 App Store 巨大流量的大门。 在这篇文章中，我们将深入探讨微信开发者工具支持小程序 App 化的五大步骤，分析其潜在价值，并通过实际案例来展示这一过程的效果。 背景：个人开发者，将小程序代码构建为 iOS App，以下为整体流程，适合 iOS 开发 / 上架零基础的同学。 [图片] 缘起 一个周末，突然奇想，我还没有搞过 App，要不搞搞玩玩😄 从 0 开始学还是很慢的，毕竟时间有限，好在了解过提示工程 [代码]《ChatGPT 进阶：提示工程入门 陈颢鹏 李子菡》[代码]，问了一下助手 ChatGPT 几个常见的问题。 开发适用于 iPhone 的 App 的流程是什么 注册开发者账号 -> 下载 Xcode -> 学习 Swift -> 设计 + 编码 + 测试 -> TestFlight 内测 -> 准备上架 (准备) -> 提交审核 -> 应用上架 -> 应用更新和维护 很好，请给出可运行的应用实例，完成查询本机 IP 地址 我是一个新手，请问在 XCode 中如何运行你提供的代码 几轮对话后，大约用了 1 个小时，一个 iOS Demo 在模拟器上跑成功了，有点意思😄 不过功能有点简单，几年前用 Vue 写过一个还在跑的网站，同时我知道 ChatGPT 的编程能力，于是我丢了一个问题给他。 [代码]你是一个开发，会 Vue 、iOS 开发（使用 SwiftUI 框架 ）两种语言，现在需要你根据 Vue 的代码重写为 iOS 代码，以下是 Vue 代码 [代码] [图片] 笔者是一个运维平台的产品，为了不忘记运维场景和技能，自己维护一个业务场景，开发语言：golang + Vue，部署架构：腾讯云 CLB+TKE+ 服务网格，运营系统：CLS+ 云函数 +Kafka+Doris+Flink+Hadoop+Streamsets。 结果惊奇的发现，真的可以执行，不服不行 👍 [图片] 1. 转折：把小程序代码构建为 iOS App 测试包（1 小时） 如果仅仅只是这样，那么这篇文章标题就该叫“GPT 如何将 Vue 改写为 App”。 万万没想到，过了 2 周从朋友那里获悉 微信开发者工具可以直接将小程序代码构建为 App，就像 Golang 一样，可以通过参数 [代码]GOARCH[代码] 控制构建的程序是在跑在 [代码]amd64[代码]，还是 [代码]arm64[代码] CPU 架构上。 [图片] 现实就是这么巧，几年前使用 Vue 开发站点时，同时也开发了同款小程序。 有点意思，参照文档 构建你的第一个应用 花了 1 个小时，在我的 iPhone 上跑了 测试版 的 App. [图片] 此处应该给多端应用的产品和开发点个赞👍🏻 搞到这里，我其实进入了这款的第一个哎哈时刻，确实很爽，因为我不需要花心思用 GPT 来迁移 Vue 程序，直接用微信开发者工具构建为 App 即可，交互完全一致。 另外记录构建过程中遇到的两个问题 问题 1：小程序的图片在 App 中无法渲染 启用 Media SDK 即可 [图片] 问题 2：App 带有 Vconsole 入口 一开始以为在模拟器中才有，最后发现是一个配置，需要自己主动关闭。 [图片] 2. 构建正式包 谁不想在 App Store 能搜到自己的 App 呢，第二步，构建正式包。 2.1 准备苹果开发者账号 在 MacBook Air 或 iPhone 中安装 Apple Developer，然后注册苹果开发者账号 [图片] 一年 688 元会费 [图片] 正常情况下，交完会费后，第二天会收到一封欢迎加入 Apple Developer Program 的邮件，代表苹果开发者账号注册成功。 很遗憾，我注册时提示“未知错误，请再试一次” 找 Apple Developer 客服反馈，最后答复 [代码]由于一个或多个原因，您无法完成 Apple Developer Program 的注册。我们目前无法继续处理您的注册。[代码]。 好吧，估计是被风控命中了，于是找了家人的账号来注册，直接成功😄 2.2 生成 Bundle ID/ 证书 /Profile 生成 App 备案和构建正式包都需要的 Bundle ID/ 证书 /Profile。 生成 Bundle ID Bundle ID 是一个唯一的标识符，用来识别你的应用程序。它通常采用反向域名格式，例如 com.example.myapp。在开发和发布应用程序时，你需要在苹果的开发者账户中注册一个 Bundle ID，这样苹果的服务才能识别出你的应用程序。 参照 文档 生成 Bundle ID。 生成 证书 /Profile 证书（Certificates）用于建立开发者的身份，并确保应用是由已注册的开发者发布的。开发者需要从苹果开发者中心申请证书，用来对应用进行签名，这样 iOS 设备才会信任并运行这个应用程序。 配置文件（Provisioning Profiles）是一个包含证书、应用程序 ID、设备 ID 和其他信息的文件，它告诉 iOS 设备一个应用程序可以被安装和运行。配置文件将应用、开发者和设备联系起来，控制哪些设备可以安装和运行你的应用程序。 参照 文档 生成 iOS 证书和 Provisioning Profile。 [图片] 拓展资料：创建证书签名请求 问题：申请的 iPhone Distribution 证书不受信任 导入 Apple WWDRCA 证书 即可，可能原因：大致是分发的根证书没有导入你的 Mac 上。 更多资料详见 Apple PKI。 [图片] 2.3 备案（10 天 +） App 如果没有备案，在中国大陆将无法上架，这是苹果官方的说明。 中国工业和信息化部（MIIT）要求 App 必须具备有效的互联网信息服务提供者（ICP）备案号，了解更多 [图片] 其实备案比较简单，参照 App 备案 ，使用上一部分申请的 [代码]Bundle ID[代码]、证书（可查看 [代码]公钥[代码]、[代码]签名 MD5 值[代码]）即可，不需要把 App 开发完，再来备案。 备案最长需要 20 个工作日，笔者用了 10 个工作日，在一个周五的下午收到了工信部发来的备案通过短信。 2.4 创建移动应用 移动应用是为了让 App 能用上微信的能力（比如分享到朋友圈或发送给朋友、微信登录 / 支付等），在移动应用中同时登记了 Bundle ID 和 Universal Links，这将会传递给下一步的多端框架，这是构建可正式包（采用苹果的分发证书）的必备条件。 先介绍一下 Universal Links。当用户使用 iPhone 手机访问你的网站，同时安装了 App 时，能在网站顶部快速跳转到 App。具体可以看下苹果官方的文档 Supporting associated domains 你需要有一个网站，未来要放 Universal Links 要用到的 [代码]apple-app-site-association[代码] 文件，不过对于我来说，这个功能好像用处不大，我更需要的是当用户用 iPhone 访问网站，引导他去 Apple Store 安装 App. 这里有一个关键信息，如果你不需要微信支付 / 微信登录 / 微信卡券的能力，不需要做开发者认证（开发者认证不能是个人主体） 访问 微信开放平台，创建移动应用，提交审核，几个小时就审核通过了。 [图片] 2.5 绑定多端框架 在 Donut 开发平台 中将 多端应用绑定上一步创建的移动应用，这样可以用到移动应用中登记的 Bundle ID 和 Universal Links，官方这么做比较合理，关键信息必须通过移动应用这关人工审核来起到一定的约束。 [图片] 绑定后，在多端应用中可以看到 Bundle ID 和 Universal Links 了。 [图片] 2.6 准备 App icon 等资料 App Icon 先用工具为你的 App 设计一个 1024px X 1024px 的图标，然后在 App Icon Generator 上生成 iPhone 所有规格的图标，之后在 [代码]project.miniapp.json[代码] 配置。 [图片] 启动图片 App 启动一般需要 2~4 秒，如果没有启动图片是白屏，用户会有点慌，不知道当前 App 是否正在启动，启动图片就是解决这个问题，同时在启动图片中传达 App 的价值主张。 我是直接用 Sketch 设计的，分辨率为 1290px x 2796px，这是兼容性最强的 6.7 寸（iPhone 15 Pro Max/15 Plus/14 Pro Max）手机的分辨率。 考虑到启动图片在不同机型上的兼容性，如果你用 Xcode 开发，苹果官方会推荐使用 Launch Screen Storyboard 隐私信息访问许可描述 小程序虽然没有用到摄像头、麦克风等权限，但多端的 SDK 中有（具体详见 Donut 官方文档 上架应用市场常见问题），所以得提前申明，不然把包通过 [代码]Transporter[代码] 上传后，会收到苹果发出的不合规邮件。 [图片] 以下是根据苹果官方打回的邮件中定义的隐私信息访问许可描述，应该是最基础的了，可以贴到你的 [代码]project.miniapp.json[代码] 文件中（用编辑器打开）。 [代码]{ "privateDescriptions": { "NSBluetoothPeripheralUsageDescription": "为了提供完整的功能，我们的应用程序需要访问蓝牙外设。这将用于与其他设备进行通信和数据交换。我们承诺保护用户隐私和数据安全。", "NSMicrophoneUsageDescription": "为了提供完整的功能，我们的应用程序需要访问麦克风。这将用于录制音频和进行语音交互。我们承诺保护用户隐私和数据安全。", "NSCalendarsUsageDescription": "为了提供完整的功能，我们的应用程序需要访问日历。这将用于提醒和日程管理。我们承诺保护用户隐私和数据安全。", "NSLocationAlwaysAndWhenInUseUsageDescription": "","NSBluetoothAlwaysUsageDescription":" 为了提供完整的功能，我们的应用程序需要始终访问蓝牙外设。这将用于与其他设备进行通信和数据交换。我们承诺保护用户隐私和数据安全。","NSPhotoLibraryUsageDescription":" 为了提供完整的功能，我们的应用程序需要始终访问相册。这将用于 IP 查询时显示 ISP 的图标。我们承诺保护用户隐私和数据安全。","NSCameraUsageDescription":" 为了提供完整的功能，我们的应用程序需要访问摄像头。这将用于录制视频。我们承诺保护用户隐私和数据安全。","NSLocationWhenInUseUsageDescription":" 为了提供完整的功能，我们的应用程序需要在使用时访问位置信息。这将用于提供定位服务和相关功能。我们承诺保护用户隐私和数据安全。" } } [代码] 2.7 构建正式版版本包 参照 打包生成 IPA 生成正式版的版本，注意使用分发证书。 [图片] 报错：file must be in miniprogram project 解决：把 mobileprovision 放在 miniprogram 目录下，因为 profile 不像 App icon 一样会自动上传到 miniprogram/ 目录下。 2.8 使用 Transporter 上传版本 参照 官方文档 上传正式版的 APK 包。 [图片] 遇到问题： Transporter，无法为 App “comxxxx.ipa” 创建临时 .itmsp 软件包。No suitable application records were found. Verify your bundle identifier ‘com.xxxx’ is correct and that you are signed into Xcode with an Apple ID that has access to the app in App Store Connect. [图片] 解决办法：去 App Store Connect 添加 App，绑定 [代码]Bundle id[代码]，这样 Transporter 可以验证包在 App Store Connect 中已注册。 3. 使用 TestFlight 测试 在 App Store Connect 的 TestFlight 页面，可以选择内部、外部测试，外部测试版本需要 Apple 官方审核，把 公开链接发给朋友即可。 [图片] 在测试的同时，可以同步准备上架 App Store 的资料了。 4. 准备上架 Apple Store 审核资料 截屏 截屏是用来在 App Store 中显示你的 App 产品介绍页的，具体参照 截屏规范 [图片] 有 [代码]iPhone 15 Plus[代码] 和 [代码]iPhone 8 Plus[代码] 这两款机型就足够了，其他型号的手机能复用，分辨率应该是等比率缩放。 如果你像我一样，没有这两款手机，那用 iOS 模拟器。 Xcode -> 工具栏 Windows -> Devices and Simulators -> Create a new simulator -> Download more simulator runtimes [图片] 在微信开发者工具中运行这两款模拟器，利用模拟器自带截屏工具即可。 隐私政策 找一下常见 App 的隐私政策，在其产品介绍页中可以跳转过去。 如果你有网站就放在网站上，如果没有可以放在腾讯文档上。 [图片] 选择 App 供应的地区范围 哪些地区的用户可以下载你的 App。 [图片] 提交审核 一切准备好了后（包含备案），开启提交审核。 下午 5:35 提交审核，第二天早上 3:40 上架成功。✌🏻 [图片] 5. App Store 的数据 上架后刚好一周，看看最近一周的数据，还不错。 [图片] 这是评分数据 [图片] 6. 引流 二维码引流：草料二维码 通过草料二维码生成 App 的下载链接，放在网站上，引导用户跳转至 App。 Universal Links 参照 Apple 官网文章 Supporting associated domains 准备 Universal Links。 前面已经介绍了这个东东是干嘛的。 准备 [代码]apple-app-site-association[代码] 文件，放在网站的 [代码].well-known[代码] 目录下，完整路径为 [代码]/.well-known/apple-app-site-association[代码] 以下为示例，特别注意的是 [代码]appID[代码] 是由 [代码]团队 ID[代码] + [代码]Bundle ID[代码] 组成。 [代码]{ "applinks":{"apps":[], "details":[ { "appID":"<team_id>.<bundle_id>", "paths":["*"] } ] } } [代码] team_id 从 开发者账户 中获取 [图片] 顶部导航 当用户访问网站时，顶部引导用户跳转到 App 下载页。 等有空了搞搞。 7. 后记 小程序转 App，让个人或企业可以快速拥有 App，获取应用市场的流量，让开发者把精力放在业务逻辑上。 同时在开发小程序的过程中，发现开发者生态会散落在多个地方，比如 github，提供一些小程序模版、组件等能力，无法集中在一个地方比较方便的找到整个开发者生态的能力，和 VSCode 插件生态有点区别。 [图片] 先说 IDE 插件，比如我用 GPT4-Turbo 来写先代码或排查问题会在微信开发者工具和 Web 间跳转，操作流不太顺，如果能在微信开发者工具的插件入口中找到对应的 AI 代码助手，用起来应该很爽。 一旦平台的开放能力放出来，这些能力将源源不断的涌入到这个市场中，而不是作为平台方来集成这些能力，毕竟精力有限，同时还不一定做的最好，用插件可以让用户有更多的选择。 再说说 小程序组件，以大模型为例，目前市场有备案的大模型基座模型有好几家，在小程序开发过程中其实比较缺整体组件（UI + 背后的 API），有点像商场一样，平台方构建开放的能力，引导各个供应商提供开箱即用的能力，让用户可以快速上手，赶上这波大模型的技术趋势。 比如我自己在设计开放能力时的思考，平台专注骨架功能的开发，让开发者能参与到平台的建设中来，把生态盘活起来，最终提升大家研发运营的效率。 最后就是管理后端比较分散，比如 开放平台、donut、we 分析、云测、云托管，云开发，产品矩阵看不清，不容易知道整体的能力，缺少一个集中的控制台。 最后希望小程序越来越好 😄

老虎机抽奖功能实践 具体活动我在下面的文章中进行了基本的介绍的，但是每个功能细节没有细说，这里具体说下 供相关开发进行参考 本次介绍的功能为老虎机 ~ 春节营销活动小程序复盘? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/00048c0a7b0218870d11bf0096d813 ~ 老虎机这次的代码主要参考了，之前凹凸实验室开源的一个营销活动项目，这里面的大转盘亦如此， 所以呢在这里我最感谢的还是凹凸实验室，这个项目虽然已经不再维护了，但是基本的功能还是在的 具体开源地址如下所示： ~ 发现开源小程序之美五，营销组件库? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000c4235c98740a1dc2a1a6045b013 ~ 在实现的时候遇到几个问题，就是这个开源项目里面的老虎机有一个回调函数，但是其实这个回调函数并未入预期返回转到的结果，而是没有任何返回，这个时候，具体的结果怎么拿到呢？ 其实是在初始化的时候记忆已经确定了，跟我们的抽奖一样，其实进入页面的时候，结果 已经确定了 [图片] ~ [图片] ` [图片] ~

“5.25秒变0.023秒：小程序图片优化全攻略” 最近在公司在写微信小程序，该小程序主要展示一些高清图片，所以图片数量非常多，而且图片尺寸也比较大，导致小程序的加载时间非常长。所以这里记录一下如何减少小程序图片的加载时间。 优化前 这里我挑选了一些项目里面比较大的图片，还有我之前保存的一些背景图，共计[代码]12[代码]张，上传到[代码]阿里云oss[代码]，然后写了一个demo去渲染图片，这里我们先看看加载时间。 [图片] 可以看到，一旦文件大小到了[代码]1M[代码]以上，加载基本都在[代码]1秒[代码]以上了，而且加载最慢的一张图片大小为[代码]2.4M[代码]；加载耗时[代码]5.27[代码]秒。然而在这个小程序中，有非常多的瀑布流图片展示，需要加载的图片也非常多，这对于这种图片展示类的小程序来说，简直是非常糟糕的体验。下面我们就分析一下，如何提升用户体验，缩短加载时间。 分析优化 这里我总结了一些常见图片优化策略，方法如下： [图片] 下面我们就根据总结的优化策略进行优化，具体如下： 优化1：使用[代码]webp[代码]格式的图片 首先我们知道，在小程序中是支持[代码]webp[代码]格式的图片的，所以我们可以将图片转换为[代码]webp[代码]格式，这样可以减少图片体积，提升加载速度。 公司使用的[代码]阿里云oss[代码]进行图片存储，阿里云oss是支持格式转换的，只需要在图片url后面加一定的参数即可，我们可以给图片后面加上[代码]?x-oss-process=image/format,webp[代码]即可。 [代码]// 原本图片路径： let url =' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png' // 转化为webp格式的图片路径： let url =' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/format,webp' [代码] 清除缓存，刷新页面，再来看加载时间： [图片] 可以看到，加载时间大幅缩短，图片格式转化后，图片大小已经非常小了，最大的一张图片仅仅有[代码]730kb[代码]；随之加载时间也大幅缩短，最慢的一张图片从之前的5.27秒缩短为1.71秒，加载速度提升了[代码]3倍[代码]！其他的图片加载基本都在[代码]500ms[代码]左右，加载速度提升也是比较明显。 这里我们还需要注意一下[代码]webp[代码]图片格式的支持范围，我这里使用的[代码]uni-app[代码]做为demo，查了一下文档，支持范围如下： Android4以上（含）、iOS14以上（含）系统内置支持webp，此时，不管web、小程序、app，也不管vue/nvue/uvue都可以直接使用webp； iOS14以下，app-vue下，iOS不支持；app-nvue/uvue下，iOS支持；微信小程序2.9.0起，配置属性webp为true时iOS支持； 所以如果考虑一些特殊情况，我们可以进行一些特殊情况下的处理。 如果文件是直接放在服务器上的，我们可以借助一些第三方工具来把图片批量转化为[代码]webp[代码]格式；比如convertio.co 优化2：根据需求设置适当的分辨率 阿里云oss支持在图片后面加上参数来设置图片的分辨率，我这里写的demo中，[代码]image[代码]标签图片宽度均为小程序图片默认宽度；即为[代码]width: 320px;[代码]，所以我们可以给图片url后面加上[代码]/resize,w_320[代码]即可，其中[代码]w_320[代码]表示图片宽度为[代码]320px[代码]。 [代码]// 原本图片路径： let url =' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/format,webp' // 设置宽度后的图片路径： let url =' https://lonjin.oss-cn-beijing.aliyuncs.com/weixin-test/3%20%282%2917047050403470042.png?x-oss-process=image/format,webp/resize,w_320' [代码] 清除缓存，刷新页面，再来看加载时间： [图片] 图片大小大幅度减少，最大的一张图片仅仅有[代码]15.4 kB[代码]；随之加载时间也大幅缩短，最慢的一张图片从之前的1.71秒缩短为316毫秒，加载速度提升了[代码]5倍[代码]！这时候所有图片的加载速度全部没有超过1秒，最大不超过[代码]350ms[代码]；基本上算是质的飞跃了。不过需要注意的是，图片分辨率还是需要结合业务需求进行调整的，如果要求必须高清，不建议设置太小的分辨率。不过我们可以写一个检测用户网络状态的方法，在不同的网络环境下加载不同分辨率的图片；后面我会专门来写一篇文章来实现这个功能。 优化3：使用雪碧图 雪碧图，也叫[代码]Sprite[代码]，是将多个小图片合并成一张大图，然后在页面中使用[代码]background-image[代码]和[代码]background-position[代码]属性来显示其中的某一张图片。这样可以减少图片的加载次数，减少图片的大小，同时减少图片的加载时间。在项目中难免会有很多小图标，我们就可以使用雪碧图的方式来使用，减少请求次数。这里我就不做展示了。 优化4：合理使用占位图片 通常情况下，为了内容的动态展示，需要通过网络请求从接口中获取图片的url。如果在网络慢的情况下，image加载图片的过程可能会非常慢，在请求完成之前页面都会因为没有数据而呈现一片空白，这是非常差的用户体验，这里我们可以借助小程序image标签上的[代码]@error[代码]和[代码]@load[代码]事件来实现占位图片的展示。我们可以根据需求去封装一个[代码]LoadImage[代码]组件统一处理，上面提到的[代码]优化1[代码]、[代码]优化2[代码]也可以通过定义参数实现批量添加，同时我们也可以给组件加上[代码]lazyLoad[代码]，减轻小程序加载压力。 组件具体代码如下： [代码]<template> <view class="loadImage-wrapper"> <image v-if="isLoading" :src="defaultImage" :mode="mode" :lazy-load="lazyLoad" /> <image :class="[isLoading ? 'before-load' : '']" :src="imageUrl" :mode="mode" :lazy-load="lazyLoad" @load="imageLoad" /> </view> </template> <script> export default { props: { /** * 占位图 * @default /static/images/load-image.png */ defaultImage: { type: String, default: '/static/load-image.png', }, /** * 是否使用webp * @default false */ useWebp: { type: Boolean, default: false, }, /** * 图片的显示模式 * @default scaleToFill */ mode: { type: String, default: 'scaleToFill', }, /** * 图片加载分辨率-宽度 * @default */ width: { type: String, default: '', }, /** * 是否懒加载 * @default true */ lazyLoad: { type: Boolean, default: true, }, /** * 图片地址 * @default */ src: { type: String, default: '', }, }, data() { return { isLoading: true, } }, methods: { imageLoad() { this.isLoading = false }, }, computed: { imageUrl() { let url = this.src + '?' this.useWebp && (url += 'x-oss-process=image/format,webp') this.width && (url += '/resize,w_' + this.width) return url } }, } </script> <style lang="scss" scoped> .loadImage-wrapper { .before-load { width: 0; height: 0; opacity: 0; } } </style> [代码] 使用方式如下： [代码]<template> <view class="list"> <load-image v-for="(item, index) in list" :src="item" :lazyLoad="false" useWebp :width="320" :key="index" /> </view> </template> [代码] 优化后效果对比 我们再来看一下优化前后的加载时间对比： 优化前： [图片] 优化后： [图片] 我们用一张图片来做对比： 图片名称 大小 加载时间 优化前 wallhaven-we3z86.jpeg 2.4MB 5.27s 优化后 wallhaven-we3z86.jpeg 15.3KB 23ms 可以看到相对体积而言，缩小了[代码]99.4%[代码]；相对加载时间，缩短了[代码]5.25[代码]秒，在几乎不影响图片质量的情况下，极大的提升了用户体验。 总结 关于小程序的图片优化，我们可以根据业务需求以及技术支持来选择不同的方案，这里我只列出了几个最常用的方案，如果业务需求比较复杂，可以多尝试一些方案。欢迎关注我的专栏🏷️前端进阶班 往期文章 5分钟get：Uni-App网络请求完美封装指南！ uni-app开发小程序：项目架构以及经验分享 小程序TabBar创意动画(文末附完整源代码) 本文首发于lonjin个人博客，转载请注明出处！

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

很简单，把 <button open-type="agreePrivacyAuthorization" /> 做成登录页中常见并且需要勾选的【已阅读并同意《用户协议》、《隐私协议》】的那个radio就行了 <template> <view> <view class="flex"><text>手机号</text><text>18612341234</text></view> <view class="flex"><text>短信验证码</text><text>1234</text></view> <button v-if="!isChecked" @click="handlegetPhonenumberFake">获取手机号（假）</button> <button v-else open-type="getPhoneNumber" @getphonenumber="handlegetPhonenumber"> 获取手机号（真）</button> <view class="flex"> <button class="radio" :class="{ current: isChecked }" open-type="agreePrivacyAuthorization" @click="handleClick" /> 已阅读并同意《隐私协议》、《用户协议》 </view> <button @click="handleLogin">登录</button> </view> </template> <script> export default { data() { return { isChecked: false }; }, mounted() {}, methods: { handlegetPhonenumberFake() { uni.showToast({ title: '请先阅读并勾选隐私协议、用户协议', icon: 'none', duration: 2000, }); }, handlegetPhonenumber(event) { if (this.isChecked) { const { iv, code } = event.detail; console.log('iv', iv); console.log('code', code); } else { uni.showToast({ title: '请先阅读并勾选隐私协议、用户协议', icon: 'none', duration: 2000, }); } }, handleClick() { this.isChecked = !this.isChecked; }, handleLogin() { if (this.isChecked) { // 登录业务代码...  // 登录成功后返回页面 uni.navigateBack(); } else { uni.showToast({ title: '请先阅读并勾选隐私协议、用户协议', icon: 'none', duration: 2000, }); } }, }, };

虽然都说不要重复造轮子, 但还是屡见不鲜, 下面给大家推荐几款实用的小程序npm包, 欢迎各位同志评论区继续补充. 1.mobx-miniprogram, mobx-miniprogram-bindings, 小程序状态管理, 类似于vuex; mobx-miniprogram用于创建状态数据, mobx-miniprogram-bindings用于对页面或组件绑定状态数据;使用文档: https://github.com/wechat-miniprogram/mobx; import { observable, action } from 'mobx-miniprogram'; export const store = observable({   // 数据字段   numA: 1,   numB: 2,   // 计算属性   get sum() {     return this.numA + this.numB;   },   // actions   update: action(function () {     this.numA++;   }), }); // 页面使用 import{ createStoreBindings }from'mobx-miniprogram-bindings' import{ store }from'./store' Page({   data:{     someData:'...'   },   onLoad(){     // 绑定      this.storeBindings = createStoreBindings(this,{           store,           fields:['numA','numB','sum'],           actions:['update'],     })   },   onUnload(){     this.storeBindings.destroyStoreBindings()   }, }) 2.dayjs, 时间处理工具, 包含时间解析, 时间格式化, 时间比较等常用功能, 最重要的尺寸较小, 非常适合移动端来使用, 使用文档: https://dayjs.fenxianglu.cn/category/; dayjs().format('YYYY-MM-DD HH:mm:ss'); // 2022-10-27 13:50:12 dayjs().add(7, 'day') // 7天后 dayjs().isBefore(dayjs('2011-01-01')) // 是否在2011-01-01之前 3.mp-html, 富文本解析利器, 小程序提供的rich-text组件虽然可以解析富文本, 但存在若干缺陷: 1. 文字无法选择; 2. 链接无法跳转; 3.图片无法预览和自适应尺寸等, 使用mp-html可以很好解决上述问题, 使用文档: https://www.npmjs.com/package/mp-html; 1.安装npm npm i mp-html 2.在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "mp-html" } } 在需要使用页面的 wxml 文件中添加

背景：最近的chatGpt类的应用十分火爆。Gpt官网有个输入的效果。作为前端开发如何实现这种交互。 利用js实现。renderContent(item: MsgType, number) { const that = this; // showContent 是逐渐显示的内容。content是完整的显示内容。 function typing() { if (item.showContent && item?.showContent?.length < item.content.length) { // 每次需要截取的步长。步长加一。 let index = item.showContent.length + 1 item.showContent = item.content.substring(0, index); item.timer = setTimeout(typing, 100); } else { item.showContent = item.content; item.timer && clearTimeout(item.timer); } that.setData({ [`msgList[${number}].showContent`]: item.showContent, [`msgList[${number}].timer`]: item.timer, }); } typing(); } 2. 利用css实现。 wxml的代码 <view class="typing">简易中文打字效果</view> WXSS的效果 .typing { width: 15em; white-space: nowrap; border-right: 2px solid transparent; animation: typing 3.5s steps(15, end), blink-caret .75s step-end infinite; overflow: hidden; } /* 打印效果 */ @keyframes typing { from { width: 0; } to { width: 15em; } } /* 光标闪啊闪 */ @keyframes blink-caret { from, to { box-shadow: 1px 0 0 0 transparent; } 50% { box-shadow: 1px 0 0 0; } }