Mini program cloud development from zero-based project creation to specific operations

1 Introduction

1.1 What is WeChat cloud development?

WeChat Cloud Development is a professional small program development service launched by the WeChat team and Tencent Cloud.

Developers can use cloud development to quickly develop mini programs, mini games, official account web pages, etc., and natively open up WeChat's open capabilities.

Developers do not need to build a server and can directly use the API provided by the platform for business development without authentication.

1.2 How to learn quickly?

Method 1: Go to the official website  for more information

2- Introduction


2.1 Concept:
Quickly build small programs and public accounts without setting up a server;

There is no need to build a server, just use the capabilities provided by the platform to quickly develop your business.

To put it bluntly, small program cloud development is to allow front-end programmers to have back-end capabilities.

2.2 Capability Overview
Cloud development includes the following (refer to cloud development documentation):

Store data and files
Cloud database: document database; supports calls in mini-terminals and cloud functions.

Storage: Cloud file storage supports direct upload/download on the front end and can be managed visually in the cloud development console.

Run back-end code
Cloud function: developers only need to write their own business logic code

Expansion capabilities
Static website: Quickly deploy the website, support custom domain names, website anti-brushing and other configurations.

Content management (CMS): One-click deployment, visual management of text, Markdown, images and other content, using cloud database to read and use data.

Opening up the WeChat ecosystem
and cloud calls: Open interfaces for calling small programs within cloud functions without authentication, including server-side calls, access to open data and other capabilities.

WeChat payment: no authentication, no signature calculation, no access_token, and the WeChat payment interface is natively called in the cloud function.

Environment sharing: cross-account resource and capability reuse, and cloud development resources can be authorized for use by other mini programs/official accounts.

2.3 Process
Write the cloud function on the front end ==> Upload to the cloud server ==> Define a custom cloud deployment ===>

The front end calls the cloud function ==> Indirectly operates the database through the cloud function

Front end ==> full stack

3- Build a cloud development template

3.1 Create project

Open and log in to the WeChat Developer Tools, create a new mini program project, fill in the AppID, select "WeChat Cloud Development" for the back-end service and check to agree to the "Cloud Development Terms of Service":

insert image description here

3.2 Activate cloud development and create an environment

Before using cloud development capabilities, you need to enable cloud development first.

On the left side of the toolbar of the developer tools, click the "Cloud Development" button to open the cloud console, follow the prompts to enable cloud development, and create a new cloud development environment.

insert image description here

Note: Free trial for 1 month, only for new users who have not used WeChat cloud development

  • Each environment is isolated from each other and has a unique environment ID, including independent database instances, storage space, cloud function configuration and other resources;
  • The initially created environment automatically becomes the default environment;
  • 4- Cloud development capabilities


  • WeChat mini program cloud development provides database, cloud storage, cloud functions, cloud calls, HTTP API and other functions.

    4.1 Database
    4.1.1 Introduction
    Cloud development provides a JSON database. As the name suggests, each record in the database is an object in JSON format. A database can have multiple collections (equivalent to tables in relational data). The collection can be regarded as a JSON array. Each object in the array is a record, and the format of the record is a JSON object.

    The conceptual correspondence between relational database and JSON database is as follows:
    insert image description here

  • 4.1.2 Create

  • Create a collection
  • insert image description here 

  • Add record 

 insert image description here

 

4.2 Storage


Cloud storage provides high availability, high stability, and strong security cloud storage services, supports the storage of any quantity and form of unstructured data, such as videos and pictures, and provides visual management on the console.

4.3 Cloud function


4.3.1 Introduction


Cloud functions are functions that run on the cloud (server side). In terms of physical design, a cloud function can be composed of multiple files and occupy a certain amount of computing resources such as CPU memory. Each cloud function is completely independent and can be deployed in different regions. Developers do not need to purchase or build a server. They only need to write function code and deploy it to the cloud to call it on the mini program. At the same time, cloud functions can also call each other.

4.3.2 Create


Right-click to create a cloud function
 

  insert image description here 

 

  • Call cloud functions in the page
  • insert image description here

 

4.3.3 Operation


How to operate cloud data in cloud functions

Initialize
var db = cloud.database()
1
Get
var data = await db.collection("feedback").get()
1
Add
var data = await db.collection("feedback").add(data:{Add data} )
1


4.4 HTTP API


Cloud development resources can also be accessed through the HTTP interface, that is, accessed outside the mini program. For the interface, see the HTTP API documentation.

5- Cloud upload


5.1 Introduction


wx.cloud.uploadFile

Upload local resources to cloud storage space. If uploaded to the same path, it will be overwritten;

insert image description here

 

5.2 Usage examples

  • Callback style
wx.cloud.uploadFile({
  cloudPath: 'example.png',
  filePath: '', // 文件路径
  success: res => {
    // get resource ID
    console.log(res.fileID)
  },
  fail: err => {
    // handle error
  }
})
  • Promise style
  • wx.cloud.uploadFile({
      cloudPath: 'example.png',
      filePath: '', // 文件路径
    }).then(res => {
      // get resource ID
      console.log(res.fileID)
    }).catch(error => {
      // handle error
    })
    

    6- Sort

    6.1 Introduction

    Collection.orderBy(fieldPath: string, string: order):Collection

    Support end: mini program, cloud function, Web

    Specify query sorting conditions

    6.2 Parameters


  • fieldPath: string
    string: order

    6.3 Return value
    Collection

    6.4 Parameter description


  • The method accepts a required string parameter fieldName to define the field that needs to be sorted, and a string parameter order to define the sorting order. order can only take asc or desc.

    If you need to sort nested fields, you need to use "dot notation" to connect the nested fields. For example, style.color represents the nested field color in the field style.

    It also supports sorting by multiple fields. Just call orderBy multiple times. The order when sorting multiple fields will be based on the order of calling orderBy.

    6.5 Sample code: Sort by a field and
    get to-do items in ascending order by progress

  • db.collection('todos').orderBy('progress', 'asc')
      .get()
      .then(console.log)
      .catch(console.error)
    

    7- Pagination

    7.1 Introduction

    Collection.skip(offset: number):Collection

  • Support end: mini program, cloud function, Web

  • 7.2 Parameters

    offset: number

    7.3 Parameters

    Collection

    7.4 Sample code

    When specifying a query to return results, return results starting from the specified sequence. It is often used for paging.

  • db.collection('todos').skip(10)
      .get()
      .then(console.log)
      .catch(console.error)
    

     Attention points and details

  • insert image description here

 insert image description here

 insert image description here

 insert image description here

 insert image description here

 insert image description here

 

Guess you like

Origin blog.csdn.net/lyinshaofeng/article/details/127932275