🚀 一键部署

您可以点击 点击一键部署按钮，进行快速体验。

微信小程序案例

快速部署和体验 Serverless 架构下的 Typescript + hapi + Taro + React 的微信小程序项目。

源代码

• 服务端源代码
• 客户端源代码

Taro 介绍

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。

官方文档：https://taro-docs.jd.com/taro/docs/ GitHub：https://github.com/NervJS/taro/ 社区组件库：https://taro-docs.jd.com/taro/docs/treasures/#%E6%A0%B7%E5%BC%8F%E5%BA%93

客户端开发

前置条件

1. 您已经完成了服务端的应用部署。

体验步骤

1. 在微信公众平台上注册微信小程序。
2. 在阿里云函数计算控制台，找到服务端的“公网访问地址”。
3. 在微信公众平台的“开发管理” - “开发设置” 页面找到 AppID（小程序 ID）和 AppSecret（小程序密钥）
4. 在微信公众平台的“开发管理” - “开发设置” 页面中将第二步中找到的 “公网访问地址” 添加到小程序可以访问的“request 合法域名”中。
5. （可选）如果您希望启用小程序登录，从而获取微信用户的 id，你需要在阿里云函数计算控制台，进入“函数详情”-> “函数配置” 页面找到“环境变量”，然后点击“编辑”。并添加名称为APP_ID 和 SECRET 的环境变量，对应的值为您的小程序 ID 和小程序密钥。然后点击“保存”。
6. 更新本地代码库中 project.config.json 中的 appid 为您的小程序 ID。
7. 更新本地代码库中 config/prod.js 中的 API_HOST 设置为上一步中找到的“公网访问地址”。注意，这里要保留'"xxx"'这种单引号，双引号的写法。
8. 进入 weapp-client 目录，运行 npm install 安装依赖。
9. 运行 npm run build
10. 下载并安装微信开发者工具，用于发布小程序客户端。
11. 打开微信开发者工具，并选择我们的代码库。
12. 上传您的小程序客户端代码。版本号可以为 1.0.0
13. 在微信公众平台的“版本管理”页面中，设置为体验版本。
14. 用手机扫描体验二维码，开始体验！
15. 您也可以在微信公众平台的“成员管理”页面中，添加更多体验成员来使用这个 Demo。

本地开发

1. 更新本地代码库中 config/dev.js 中的 API_HOST 设置为上一步中找到的“公网访问地址”或您本地 API 的地址。注意，这里要保留'"xxx"'这种单引号，双引号的写法。
2. 打开您的微信开发者工具，然后在本地命令行中运行 npm run dev
3. 微信开发者工具中会显示您的小程序。修改代码后，开发者工具会自动刷新。
4. 如果您想开发支付宝等其他小程序，请参考Taro文档和package.json中的命令。

• Taro 官方文档：https://taro-docs.jd.com/taro/docs/
• Taro GitHub：https://github.com/NervJS/taro/
• Taro 社区组件库：https://taro-docs.jd.com/taro/docs/treasures/#%E6%A0%B7%E5%BC%8F%E5%BA%93

本地构建

运行 npm run build 将进行构建，然后您可以在微信开发者工具中点击“上传”发布您打包好的小程序。

注意：如果您在手机上发现版本没有更新，您需要在手机后台停止微信，重新启动微信。

• Serverless Devs 项目：https://www.github.com/serverless-devs/serverless-devs
• Serverless Devs 文档：https://www.github.com/serverless-devs/docs
• Serverless Devs 钉钉交流群：33947367