Taro is introduced

Introduction to the

Taro is a multi-terminal development solution that follows the React syntax specification.

Now at the top of the market form is varied, the Web, the React – Native, WeChat small programs and other side, when the business requirements in different side are required to show at the same time, more than to write code for different end cost is very high, obviously at that time only a set of code can be adapted to varying ability is very need.

Using Taro, we can only write one set of code, and then compile the source code separately to run on different applications (wechat, Baidu, Alipay, Bytedance, QQ, JINGdong miniprogram, Kuaiapp, H5, React-native, etc.) by using Taro’s compilation tool.

features

Taro follows the React syntax. It adopts the same componentization concept as React, and maintains the same component life cycle as React. It also supports the USE of JSX syntax to make code more expressive.

The installation

The Taro project is based on Node. Please ensure that you have a relatively new Node environment (>=8.0.0). It is recommended to use NVM to manage Node.

First, you need to install @tarojs/cli using NPM or YARN, or use NPX directly.

$yarn global add @tarojs/ CLI # OR install CNPM, $CNPM install -g@tarojs/CLICopy the code

Project initialization

Create a template project using the command

$ taro init myApp
Copy the code

NPM 5.2+ can also create template projects using NPX without a global installation

$ npx @tarojs/cli init myApp
Copy the code

Select the WxCloud/Applets Cloud development template

├ ─ ─ the client applet back-end directory │ ├ ─ ─ the config directory configuration │ │ ├ ─ ─ dev. The development of a js configuration │ │ ├ ─ ─ index. The js default configuration │ │ └ ─ ─ the prod. Js packaging configuration │ ├ ─ ─ dist directory │ compile results ├ ─ ─ package. Json │ ├ ─ ─ the SRC source directory │ │ ├ ─ ─ app. The SCSS total project general style │ │ ├ ─ ─ app. Js project entry documents │ │ ├ ─ ─ components component files directory │ │ │ └ ─ ─ │ │ ├─ ├─ ├─ ├.scss │ │ ├─ ├─ download.scss │ │ ├─ download.scss │ │ ├─ download.scss │ ├─ ├─ ├─ ├─ ├─ ├─ index.js login │ ├─ ├─ ├.js login ├ ─ └─ package.json └─ project.config.jsonCopy the code

Use the point

  • At development time, go to the Client directory and run the relevant build preview or package commands there

  • Use wechat developer tools to debug the project, please use the entire project folder as the running directory. Note: This is not the dist folder generated in client

Applets cloud functions

Example login cloud function

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,
 }
}
Copy the code

Called in the page

Taro.cloud
 .callFunction({
 name: "login".data: {}
 })
 .then(res= > {
 this.setState({
 context: res.result
 })
 })
Copy the code

Cloud development trample pits

screening

The Collection time query and Aggregate time filter of apPLETS cloud development database are different.

Collection

db.collection('record').where({
        date: _.and([_.gte(first_day), _.lte(last_day)]),
      })
      .get()
Copy the code

To filter dates in Aggregate, use dateFromString to convert the date format before querying

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()
Copy the code

Timing trigger

You need to add config.json to the directory

{
  "triggers": [{"name": "timeTrigger"."type": "timer"."config": "0 0 9 * * * *" // Triggered every morning at 9am}}]Copy the code

Subscribe to news

Step 1: The applet adds the message template

Those who have not been opened should first open the subscription message function on wechat public platform

Step 2: Obtain the TEMPLATE ID

Step 3: get issued authority wx. RequestSubscribeMessage

Step 4: Invoke the interface to deliver subscription messagessubscribeMessage.send

For cloud invocation, the permissions of subscribeMessage.send API need to be configured in config.json

{
  "permissions": {
    "openapi": [
      "subscribeMessage.send"."subscribeMessage.getTemplateList" // Get the list of subscription message templates]}}Copy the code

Send message subscribe message

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: 'Yesterday's bill'
                    },
                    date12: {
                        value: common.dateFormat("YYYY-mm-dd HH:MM:SS", date)
                    }
                },
                templateId: data[0].priTmplId // Now there is only one subscription message
            })
            return result
Copy the code

The project of actual combat

“Easy accounting” – a credit card bill accounting small program