您可以点击 点击一键部署
按钮,进行快速体验。
快速部署和体验 Serverless 架构下的 Typescript + hapi + Taro + React 的微信小程序项目。
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
- 您已经完成了服务端的应用部署。
- 在微信公众平台上注册微信小程序。
- 在阿里云函数计算控制台,找到服务端的“公网访问地址”。
- 在微信公众平台的“开发管理” - “开发设置” 页面找到 AppID(小程序 ID)和 AppSecret(小程序密钥)
- 在微信公众平台的“开发管理” - “开发设置” 页面中将第二步中找到的 “公网访问地址” 添加到小程序可以访问的“request 合法域名”中。
- (可选)如果您希望启用小程序登录,从而获取微信用户的 id,你需要在阿里云函数计算控制台,进入“函数详情”-> “函数配置” 页面找到“环境变量”,然后点击“编辑”。并添加名称为
APP_ID
和SECRET
的环境变量,对应的值为您的小程序 ID 和小程序密钥。然后点击“保存”。 - 更新本地代码库中
project.config.json
中的appid
为您的小程序 ID。 - 更新本地代码库中
config/prod.js
中的API_HOST
设置为上一步中找到的“公网访问地址”。注意,这里要保留'"xxx"'
这种单引号,双引号的写法。 - 进入
weapp-client
目录,运行npm install
安装依赖。 - 运行
npm run build
- 下载并安装微信开发者工具,用于发布小程序客户端。
- 打开微信开发者工具,并选择我们的代码库。
- 上传您的小程序客户端代码。版本号可以为
1.0.0
- 在微信公众平台的“版本管理”页面中,设置为体验版本。
- 用手机扫描体验二维码,开始体验!
- 您也可以在微信公众平台的“成员管理”页面中,添加更多体验成员来使用这个 Demo。
- 更新本地代码库中
config/dev.js
中的API_HOST
设置为上一步中找到的“公网访问地址”或您本地 API 的地址。注意,这里要保留'"xxx"'
这种单引号,双引号的写法。 - 打开您的微信开发者工具,然后在本地命令行中运行
npm run dev
- 微信开发者工具中会显示您的小程序。修改代码后,开发者工具会自动刷新。
- 如果您想开发支付宝等其他小程序,请参考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