小程序模板網(wǎng)

Taro 小程序云開發(fā)實(shí)戰(zhàn)

發(fā)布時(shí)間:2020-05-19 09:51 所屬欄目:小程序開發(fā)教程

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ù)制代碼


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/25209.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢