taro 重新加载小程序_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

复制代码