Taro 小程序云開發實戰
Taro是一套遵循 React 語法規范的 多端開發 解決方案。
現如今市面上端的形態多種多樣，Web、React-Native、微信小程序等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。
使用 Taro ，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動/QQ/京東小程序、快應用、H5、React-Native 等）運行的代碼。
特性
Taro遵循 React 語法規范，它采用與 React 一致的組件化思想，組件生命周期與 React 保持一致，同時支持使用 JSX 語法 ，讓代碼具有更豐富的表現力，使用 Taro 進行開發可以獲得和 React 一致的開發體驗。
安裝
Taro項目基于 node，請確保已具備較新的 node 環境（>=8.0.0），推薦使用 node 版本管理工具 nvm 來管理 node，這樣不僅可以很方便地切換 node 版本，而且全局安裝時候也不用加 sudo 了。
首先，你需要使用 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 myApp 復制代碼
npm 5.2+ 也可在不全局安裝的情況下使用 npx 創建模板項目
$ npx @tarojs/cli init myApp 復制代碼
選擇wxcloud / 小程序云開發模板
模板目錄結構
├── client 小程序端目錄 │ ├── config 配置目錄 │ │ ├── dev.js 開發時配置 │ │ ├── index.js 默認配置 │ │ └── prod.js 打包時配置 │ ├── dist 編譯結果目錄 │ ├── package.json │ ├── src 源碼目錄 │ │ ├── app.scss 項目總通用樣式 │ │ ├── app.js 項目入口文件 │ │ ├── components 組件文件目錄 │ │ │ └── login login 組件目錄 │ │ │ └── index.weapp.js login 組件邏輯 │ │ └── pages 頁面文件目錄 │ │ └── index index 頁面目錄 │ │ ├── index.scss index 頁面邏輯 │ │ └── index.js index 頁面樣式 ├── cloud 服務端目錄 │ └── functions 云函數目錄 │ └── login login 云函數 │ ├── index.js login 函數邏輯 │ └── package.json └── project.config.json 小程序項目配置 復制代碼
使用要點
-
開發時，進入 client 目錄，在此目錄下運行相關編譯預覽或打包命令
-
使用微信開發者工具調試項目，請將項目 整個文件夾 作為運行目錄。 注意： 不是 client 中生成的 dist 文件夾
小程序云函數
登陸云函數示例
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async () => {
const wxContext = cloud.getWXContext()
return {
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
復制代碼
在頁面中調用
Taro.cloud
.callFunction({
name: "login",
data: {}
})
.then(res => {
this.setState({
context: res.result
})
})
復制代碼
云開發踩坑
篩選
小程序云開發數據庫的 Collection 的時間查詢和 Aggregate 的時間篩選是不一樣的。
Collection
db.collection('record').where({
date: _.and([_.gte(first_day), _.lte(last_day)]),
})
.get()
復制代碼
Aggregate 中篩選日期，需要先使用 dateFromString 轉換日期格式，再進行查詢
let queryStart = $.dateFromString({new Date('your start date').toJSON()
})
let queryEnd = $.dateFromString({new Date('your end date').toJSON()
})
.aggregate()
db.collection('day_record').addFields({
matched: $.and([$.gte(['$date', queryStart]), $.lte(['$date', queryEnd])])
})
.match({
matched: true,
type: type,
_openid: openid
})
.group({
_id: null,
total_money: $.sum('$money')
})
.end()
復制代碼
定時觸發器
需要在目錄添加 config.json
{
"triggers": [
{
"name": "timeTrigger",
"type": "timer",
"config": "0 0 9 * * * *" // 每天早上 9 點觸發
}
]
}
復制代碼
訂閱消息
步驟一：小程序添加消息模板
沒開通的要先在微信公眾平臺開通訂閱消息功能
步驟二：獲取模板ID
步驟三：獲取下發權限 wx.requestSubscribeMessage
步驟四：調用接口下發訂閱消息 subscribeMessage.send
云調用需在 config.json 中配置 subscribeMessage.send API 的權限， 詳情
{
"permissions": {
"openapi": [
"subscribeMessage.send",
"subscribeMessage.getTemplateList" // 獲取訂閱消息模板列表
]
}
}
復制代碼
發送消息訂閱消息
const result = await cloud.openapi.subscribeMessage.send({
touser: _openid,
page: 'pages/start/index',
data: {
amount4: {
value: pay + '元'
},
amount5: {
value: income + '元'
},
amount10: {
value: sum + '元'
},
thing9: {
value: '昨日賬單'
},
date12: {
value: common.dateFormat("YYYY-mm-dd HH:MM:SS", date)
}
},
templateId: data[0].priTmplId // 目前只有一個訂閱消息，后期要加這里記得改
})
return result
復制代碼
