Taro 小程序云開發(fā)實(shí)戰(zhàn)
Taro是一套遵循 React 語(yǔ)法規(guī)范的 多端開發(fā) 解決方案。
現(xiàn)如今市面上端的形態(tài)多種多樣，Web、React-Native、微信小程序等各種端大行其道，當(dāng)業(yè)務(wù)要求同時(shí)在不同的端都要求有所表現(xiàn)的時(shí)候，針對(duì)不同的端去編寫多套代碼的成本顯然非常高，這時(shí)候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。
使用 Taro ，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節(jié)跳動(dòng)/QQ/京東小程序、快應(yīng)用、H5、React-Native 等）運(yùn)行的代碼。
特性
Taro遵循 React 語(yǔ)法規(guī)范，它采用與 React 一致的組件化思想，組件生命周期與 React 保持一致，同時(shí)支持使用 JSX 語(yǔ)法 ，讓代碼具有更豐富的表現(xiàn)力，使用 Taro 進(jìn)行開發(fā)可以獲得和 React 一致的開發(fā)體驗(yàn)。
安裝
Taro項(xiàng)目基于 node，請(qǐng)確保已具備較新的 node 環(huán)境（>=8.0.0），推薦使用 node 版本管理工具 nvm 來(lái)管理 node，這樣不僅可以很方便地切換 node 版本，而且全局安裝時(shí)候也不用加 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 復(fù)制代碼
項(xiàng)目初始化
使用命令創(chuàng)建模板項(xiàng)目
$ taro init myApp 復(fù)制代碼
npm 5.2+ 也可在不全局安裝的情況下使用 npx 創(chuàng)建模板項(xiàng)目
$ npx @tarojs/cli init myApp 復(fù)制代碼
選擇wxcloud / 小程序云開發(fā)模板
模板目錄結(jié)構(gòu)
├── client 小程序端目錄 │ ├── config 配置目錄 │ │ ├── dev.js 開發(fā)時(shí)配置 │ │ ├── index.js 默認(rèn)配置 │ │ └── prod.js 打包時(shí)配置 │ ├── dist 編譯結(jié)果目錄 │ ├── package.json │ ├── src 源碼目錄 │ │ ├── app.scss 項(xiàng)目總通用樣式 │ │ ├── app.js 項(xiàng)目入口文件 │ │ ├── components 組件文件目錄 │ │ │ └── login login 組件目錄 │ │ │ └── index.weapp.js login 組件邏輯 │ │ └── pages 頁(yè)面文件目錄 │ │ └── index index 頁(yè)面目錄 │ │ ├── index.scss index 頁(yè)面邏輯 │ │ └── index.js index 頁(yè)面樣式 ├── cloud 服務(wù)端目錄 │ └── functions 云函數(shù)目錄 │ └── login login 云函數(shù) │ ├── index.js login 函數(shù)邏輯 │ └── package.json └── project.config.json 小程序項(xiàng)目配置 復(fù)制代碼
使用要點(diǎn)
-
開發(fā)時(shí)，進(jìn)入 client 目錄，在此目錄下運(yùn)行相關(guān)編譯預(yù)覽或打包命令
-
使用微信開發(fā)者工具調(diào)試項(xiàng)目，請(qǐng)將項(xiàng)目 整個(gè)文件夾 作為運(yùn)行目錄。 注意： 不是 client 中生成的 dist 文件夾
小程序云函數(shù)
登陸云函數(shù)示例
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,
}
}
復(fù)制代碼
在頁(yè)面中調(diào)用
Taro.cloud
.callFunction({
name: "login",
data: {}
})
.then(res => {
this.setState({
context: res.result
})
})
復(fù)制代碼
云開發(fā)踩坑
篩選
小程序云開發(fā)數(shù)據(jù)庫(kù)的 Collection 的時(shí)間查詢和 Aggregate 的時(shí)間篩選是不一樣的。
Collection
db.collection('record').where({
date: _.and([_.gte(first_day), _.lte(last_day)]),
})
.get()
復(fù)制代碼
Aggregate 中篩選日期，需要先使用 dateFromString 轉(zhuǎn)換日期格式，再進(jìn)行查詢
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()
復(fù)制代碼
定時(shí)觸發(fā)器
需要在目錄添加 config.json
{
"triggers": [
{
"name": "timeTrigger",
"type": "timer",
"config": "0 0 9 * * * *" // 每天早上 9 點(diǎn)觸發(fā)
}
]
}
復(fù)制代碼
訂閱消息
步驟一：小程序添加消息模板
沒開通的要先在微信公眾平臺(tái)開通訂閱消息功能
步驟二：獲取模板ID
步驟三：獲取下發(fā)權(quán)限 wx.requestSubscribeMessage
步驟四：調(diào)用接口下發(fā)訂閱消息 subscribeMessage.send
云調(diào)用需在 config.json 中配置 subscribeMessage.send API 的權(quán)限， 詳情
{
"permissions": {
"openapi": [
"subscribeMessage.send",
"subscribeMessage.getTemplateList" // 獲取訂閱消息模板列表
]
}
}
復(fù)制代碼
發(fā)送消息訂閱消息
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 // 目前只有一個(gè)訂閱消息，后期要加這里記得改
})
return result
復(fù)制代碼
