基于Taro + Taro-ui + 微信云開發(fā) 初步實(shí)現(xiàn)了一個(gè)小程序

小程序碼

開始

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

項(xiàng)目初始化

• 使用命令創(chuàng)建模板項(xiàng)目

taro init taro-timer

• 按提示進(jìn)行相應(yīng)的選擇(微信云開發(fā)可直接選擇wxcloud模板)

• 模板目錄

注意：

• 開發(fā)時(shí)，進(jìn)入 client 目錄，在此目錄下運(yùn)行相關(guān)編譯預(yù)覽或打包命令
• 使用微信開發(fā)者工具調(diào)試項(xiàng)目，請(qǐng)將項(xiàng)目 整個(gè)文件夾 作為運(yùn)行目錄。 注意： 不是 client 中生成的 dist 文件夾

云開發(fā)配置

為區(qū)分開發(fā)環(huán)境及線上環(huán)境，需申請(qǐng)兩個(gè)云資源環(huán)境，如： dev-id和 pro-id，分別用于開發(fā)環(huán)境及線上環(huán)境。然后修改以下文件進(jìn)行適配。 微信云開發(fā)官方文檔

1. 修改小程序項(xiàng)目配置文件 project.config.json, 如：

   // 注意：只有填寫開通云開發(fā)后的appid, 微信小程序開發(fā)者工具中才會(huì)顯示`云開發(fā)`按鈕
   {
       "miniprogramRoot": "client/dist/",    // 小程序項(xiàng)目文件(taro編譯后的)
       "cloudfunctionRoot": "cloud/functions/", // 小程序?qū)?yīng)的云函數(shù)
       "projectname": "taro-timer",
       "description": "時(shí)間節(jié)點(diǎn)",
       "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編譯設(shè)置，用于區(qū)分開發(fā)環(huán)境及線上環(huán)境。

       // client/config/dev.js 開發(fā)環(huán)境
       module.exports = {
           env: {
               NODE_ENV: '"dev-id"' // 申請(qǐng)的微信小程序云開發(fā)資源id
           },
           defineConstants: {
           },
           weapp: {},
           h5: {}
       }
       // client/config/prod.js 線上環(huán)境
       module.exports = {
           env: {
               NODE_ENV: '"release-id"' // 申請(qǐng)的微信小程序云開發(fā)資源id
           },
           defineConstants: {
           },
           weapp: {},
           h5: {}
       }

3. 項(xiàng)目入口文件 app.jsx 適配開發(fā)環(huán)境，區(qū)分開發(fā)及線上環(huán)境。

   componentDidMount() {
       if (process.env.TARO_ENV === 'weapp') {
       Taro.cloud.init({
           env: process.env.NODE_ENV,
           traceUser: true
       })
       }
   }

4. 云函數(shù)配置 關(guān)于常量DYNAMIC_CURRENT_ENV

   // 云函數(shù)入口文件
   const cloud = require("wx-server-sdk");
   cloud.init({
       env: cloud.DYNAMIC_CURRENT_ENV
   });

順利的話，此時(shí)于client文件夾下執(zhí)行npm run dev:weapp 和 npm run build:weapp 會(huì)分別調(diào)用相應(yīng)環(huán)境的云函數(shù)。

未完待續(xù)...

第一個(gè)頁面

第一個(gè)云函數(shù)

參考

1. Taro官方文檔
2. Taro-ui官方文檔
3. 微信小程序開發(fā)相關(guān)文檔

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.cjxv.cn/25254.html