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 會分別調用相應環境的雲函數。

未完待續...

第一個頁面

第一個雲函數

參考

1. Taro官方文檔
2. Taro-ui官方文檔
3. 微信小程序開發相關文檔