基于Taro + Taro-ui + 微信云开发 初步实现了一个小程序

小程序码

开始

CLI 工具安装

首先，你需要使用 npm 或者 yarn 全局安装@tarojs/cli，或者直接使用npx:

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

项目初始化

• 使用命令创建模板项目

taro init taro-timer

• 按提示进行相应的选择(微信云开发可直接选择wxcloud模板)

• 模板目录

注意：

• 开发时，进入 client 目录，在此目录下运行相关编译预览或打包命令
• 使用微信开发者工具调试项目，请将项目 整个文件夹 作为运行目录。 注意： 不是 client 中生成的 dist 文件夹

云开发配置

为区分开发环境及线上环境，需申请两个云资源环境，如： dev-id和 pro-id，分别用于开发环境及线上环境。然后修改以下文件进行适配。 微信云开发官方文档

1. 修改小程序项目配置文件 project.config.json, 如：

   // 注意：只有填写开通云开发后的appid, 微信小程序开发者工具中才会显示`云开发`按钮
   {
       "miniprogramRoot": "client/dist/",    // 小程序项目文件(taro编译后的)
       "cloudfunctionRoot": "cloud/functions/", // 小程序对应的云函数
       "projectname": "taro-timer",
       "description": "时间节点",
       "appid": "************",  // 小程序的appid
       "setting": {
           "urlCheck": true,
           "es6": false,
           "enhance": false,
           "postcss": false,
           "minified": false,
           "newFeature": true,
           "coverView": true,
           "nodeModules": false,
           "autoAudits": false,
           "uglifyFileName": false,
           "checkInvalidKey": true,
           "checkSiteMap": true,
           "uploadWithSourceMap": true,
           "babelSetting": {
               "ignore": [],
               "disablePlugins": [],
               "outputPath": ""
           },
           "bundle": false
       },
       "compileType": "miniprogram",
       "simulatorType": "wechat",
       "simulatorPluginLibVersion": {},
       "cloudfunctionTemplateRoot": "cloudfunctionTemplate",
       "condition": {}
   }

2. 修改Taro编译设置，用于区分开发环境及线上环境。

       // client/config/dev.js 开发环境
       module.exports = {
           env: {
               NODE_ENV: '"dev-id"' // 申请的微信小程序云开发资源id
           },
           defineConstants: {
           },
           weapp: {},
           h5: {}
       }
       // client/config/prod.js 线上环境
       module.exports = {
           env: {
               NODE_ENV: '"release-id"' // 申请的微信小程序云开发资源id
           },
           defineConstants: {
           },
           weapp: {},
           h5: {}
       }

3. 项目入口文件 app.jsx 适配开发环境，区分开发及线上环境。

   componentDidMount() {
       if (process.env.TARO_ENV === 'weapp') {
       Taro.cloud.init({
           env: process.env.NODE_ENV,
           traceUser: true
       })
       }
   }

4. 云函数配置 关于常量DYNAMIC_CURRENT_ENV

   // 云函数入口文件
   const cloud = require("wx-server-sdk");
   cloud.init({
       env: cloud.DYNAMIC_CURRENT_ENV
   });

顺利的话，此时于client文件夹下执行npm run dev:weapp 和 npm run build:weapp 会分别调用相应环境的云函数。

未完待续...

第一个页面

第一个云函数

参考

1. Taro官方文档
2. Taro-ui官方文档
3. 微信小程序开发相关文档

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/25254.html