First, we finally use the cloud development of small program, small program code is as follows:

Small program name for the museum, is mainly used to manage items in the home, involving user account system, item management, classification and search functions, the use of cloud development cloud function, database, storage, CMS content management and other capabilities.

Start fast

If you are not familiar with cloud development, you can first according to the official documents, quickly create a small cloud development program for reference. The document does not need to see too much for the moment, the small program can run (to tell the truth, the cloud development of the document is too much, if you just want to read the document first that is absolutely meng circle, we will give specific links to the content involved below).

Because we want to develop small procedures involving databases, cloud functions and cloud storage, the following will be introduced in accordance with these parts.

Ii. Database

2.1 Content management system

Handwritten table structure is really a little slow, and not careful and may make mistakes, so the use of content management system, which can greatly improve work efficiency. However, there is a big hole: the content management section of the applet documentation is simply not detailed enough. For more detailed documentation, go to CloudBase CMS (applet documentation can sometimes crash your computer).

Using the content management system above, we can not only manage the content model (be careful not to change the name of the content model, otherwise the content piece will be wrong, so be careful to name), but also create content, and even use RESTful API to retrieve data, which at first glance is absolutely love.

However, there are still some problems in using RESTful apis in applets. (I believe these problems will not be a problem in future versions) :

  • Update data in RESTful apismethodThe use ofPATCH, small programwx.requestIt’s not supported.
  • RESTful apis in which command is automatically translated in applets, such as$eqCommand:

So we ended up ditching RESTful apis to get data and writing cloud functions instead.

2.2 Database of cloud development panel

In addition to the content management system above, we can also manage the database in the cloud development panel. The diagram below:

In addition, advanced operations provide examples of database operations, as shown below:

2.3 Add, delete, change and check the database

Here, remember the three steps of operating the database (we will continue the specific instance operations in the cloud function) :

1. Select the environment database

const DB = wx.cloud.database({
  env: 'test' // Which environment
});
Copy the code

2. Select which collection

const users = DB.collection('users');
Copy the code

3. Add, delete, change and check the collection

const user = users.doc('_id');
Copy the code

More detailed documentation reference: database add delete change check SDK.

2.4 document ID

In the content management system, the document ID belongs to the system field and can only be automatically generated but cannot be customized. However, in some cases, we still want to be able to customize the document ID, such as uniformly classified data.

Fortunately, there is another way. Customizations are supported in the cloud Development panel database, so if you really need a custom document ID, you can define it directly in the cloud development Panel database. However, the cloud development panel database custom ID field input field, there is a length limit (but the automatic generated document ID is exceeded, this is a bit unclear).

Document ids are useful when querying individual data records, such as getting information about a user:

// Use openID as the custom document ID
// If found, the user information is returned
// If the user information is not found, the user is not registered.
users.doc('openid').get().then((res) = > { console.log(res.data) }).catch((e) = > { console.log('Unregistered')}); 
Copy the code

Third, cloud function

3.1 Implement the first cloud function

First we implement our first cloud function against my first cloud function document.

There are mainly one library and two apis to note:

  • A library document: WX-server-SDK
  • Two API documents: getWXContext (be aware that different calls may return different data) and callFunction.

Next, we can follow the documentation of the cloud functions all the way to the local debugging.

With this in mind, we can begin cloud function development in earnest. Let’s take the user cloud function as an example.

3.2 Actual practice of cloud function

1. Create a new User cloud function (right-click on the root directory of the cloud function, and choose Create a new Node.js cloud function named User from the right-click menu).

2. Install dependency files

Right-click the user folder, select open in the built in terminal, and enter the NPM I command to install dependency files.

3. Enable local debugging of cloud functions

After the dependency files are installed, right-click the user folder and choose Enable cloud function local debugging.

The local debug panel for cloud functions opens as follows, note the check on the right:

4. Write cloud functions

The code looks like this:

5, small program side call

First, complete the initialization of cloud capability in app.js, and the code is as follows: (Please refer to the document: Initialization document of small program side cloud capability)

App({
  onLaunch() {
    if(! wx.cloud) {console.error('Please use base library 2.2.3 or above to use cloud capabilities');
    } else {
      wx.cloud.init({
        env: 'cloud1-xxx'.traceUser: true}); }}});Copy the code

Call the cloud function user where needed, with the following code:

wx.cloud.callFunction({
  // Cloud function name
  name: 'user'.// The parameters passed to the cloud function
  data: {
    type: 'get'
  },
})
.then(res= > {
  console.log(res.result)
})
.catch(console.error)
Copy the code

6. Upload and deploy

After debugging and development, it can be uploaded and deployed, as shown below:

3.3 Cloud Function Management

All of our cloud functions can be managed from the cloud Development panel, as shown below:

4. Cloud storage

In fact, in fast start inside, the default to create a small program inside there is a cloud development instance of uploading pictures, copy the inside of the instance, print out some information to see will be used.

For details, see File storage

Of course, for users to upload pictures, it is best to have a cutting function, small program cutting picture components online also have a lot of, find a suitable yourself.

For the stored content, we can also view it through the cloud development panel, as shown below:

Open data

Cloud development also provides a new way to invoke open data: open data verification and decryption.

Let’s take the phone number as an example.

1. Use button component with open-type as getPhoneNumber

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
Copy the code

2. Get cloudID in getPhoneNumber

3. Write the cloud function User and call the getOpenData API. The main code is as follows:

const { type, cloudID } = event;
// Phone number authorization
if (type === 'getPhone') {
  const res = await cloud.getOpenData({
    list: [cloudID],
  });

  const resPhone = res.list[0].data.phoneNumber;
  return resPhone;
}
Copy the code

3. The applet side calls the cloud function and gets the phone number.

wx.cloud.callFunction({
  // Cloud function name
  name: 'user'.// The parameters passed to the cloud function
  data: {
    type: 'getPhone',
    cloudID, // This is cloudID
  },
})
.then(res= > {
  console.log(res.result)
})
.catch(console.error)
Copy the code

conclusion

In general, small program cloud development fulfills our dream of full stack, a person shuttling is happy, but the process of exploration is actually painful. The plate is too big, and the continuous development of optimization, there is always a hole to jump.