小程序码
开始
CLI 工具安装
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
项目初始化
- 使用命令创建模板项目
- 按提示进行相应的选择(微信云开发可直接选择
wxcloud
模板)
- 模板目录
注意:
- 开发时,进入 client 目录,在此目录下运行相关编译预览或打包命令
- 使用微信开发者工具调试项目,请将项目 整个文件夹 作为运行目录。 注意: 不是 client 中生成的 dist 文件夹
云开发配置
修改小程序项目配置文件
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": {} }
修改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: {} }
项目入口文件
app.jsx
适配开发环境,区分开发及线上环境。componentDidMount() { if (process.env.TARO_ENV === 'weapp') { Taro.cloud.init({ env: process.env.NODE_ENV, traceUser: true }) } }
云函数配置 关于常量
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
会分别调用相应环境的云函数。
完成 fetchAPI
import { fetchAPI } from '../utils/request';
// 增 改
export function postTimer(data) {
return fetchAPI({
url: '/timer/post',
data
})
}
const USER = {
'/user/post': 'postUserInfo', // 新增或修改用户信息的云函数
}
module.exports = {
...USER
}
import * as Url2Cloud from '../constants/Url2Cloud';
Taro.cloud.callFunction({
name: Url2Cloud\[url\],
config: { env: process.env.NODE\_ENV },
data: data
})