基于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. 微信小程序開發相關文檔

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/25254.html