Taro 小程序初体验

小程序码

Taro 小程序初体验

开始

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模板)

Taro 小程序初体验

  • 模板目录

Taro 小程序初体验

注意:

  • 开发时,进入 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. 微信小程序开发相关文档