芋头小程序云开发实战

Taro是一个遵循React语法规范的多终端开发解决方案。

现在市场的高端形态多种多样，各种端如Web、React-Native、微信小程序等都很受欢迎。当业务需求同时在不同端表达时，为不同端编写多套代码的成本显然非常高。此时，极其需要通过只编写一组代码来适应多种目的的能力。

有了Taro，我们只能写一套代码，然后把源代码编译成可以在不同终端(微信/百度/支付宝/字节跳动/QQ/JD.COM小程序、快捷应用、H5、React-Native等)上运行的代码。)通过Taro的编译工具。

特性

Taro遵循REAT的语法规范。它采用与REAT一致的组件化思想，组件的生命周期与REAT一致。同时，它支持使用JSX语法，这使得代码更具表现力。使用芋头可以获得与REAT一致的开发经验。

安装

Taro项目是基于节点的，请确保有一个比较新的节点环境(=8.0.0)，建议使用节点版本管理工具nvm来管理节点，这样不仅方便切换节点版本，而且全局安装时也不需要添加sudo。

首先，需要使用npm或yarn全局安装@tarojs/cli，或者使用npx直接；

#使用npm安装CLI$ npm install -g @tarojs/cli#或使用yarn安装CLI $ Yarn Global Add @ tarojs/CLI #或安装cnpm，使用cnpm安装CLI$ cnpm install -g @tarojs/cli复制代码

项目初始化

创建带有命令的模板项目。

$ taro init myApp复制代码npm 5.2也可以使用npx创建模板项目，而无需全局安装。

$ npx @tarojs/cli init myApp复制代码选择wxcloud/applet云开发模板

模板目录结构

├── 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.sendAPI 的权限，详情

{  "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复制代码