小程序码

开始

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 文件夹

云开发配置

  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:weappnpm 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

})


未完待续...

参考

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