Taro 小程序初体验

基于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 会分别调用相应环境的云函数。

完成 fetchAPI

统一处理 request 及 response，考虑到后期兼容其他端，故在此依然保留url，未完全丢弃fetch(url)的处理方式，同时增加常量 url2cloud将 url 匹配到相应的云函数， 从而使用微信小程序云函数开发。

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