Hello, everyone, I’m Miss Hupiao Cat. I’ve been working on cloud development and decided to share my every step from start to finish for everyone to learn and improve.

Step 1: Create a routine number

Step 2: After completing the basic information, add developers

Step 3: We developers began to develop applets ~

(I) Create one of our cloud development projects

We first open wechat small program developer tools in our mp.weixin.qq.com/ website to find our small program appID

Fill in the id, check cloud Development, and click New

First of all, THE author thinks that if you are not familiar with cloud development, I suggest that the home page should be reserved first, there are some basic tutorials, you can try to learnThat’s what happens when you get inside

We can try to get OpenID first, if not, we should first right-click CloudFunctions in the small program, select the current environment, and then we can get openID

(2) Download a UI framework (Vuant-downloadp)

I plan to write the front-end static page first, and then create a new cloud function ~~ and then tune

Here I choose to use the Vant framework, in fact, the final effect of using any framework is the same, it happens that I have not used Vant before, want to try.

1. View component library styles

Youzan.github. IO/vant-appellate /…

2. Initialize the package.json file

Open a terminalThen enter the command: NPM init to all press enter default options

A JSON file pops up on success

NPM I app-eapp-s –production to app-eapp-eapp-eapp-e

NPM for cloud development needs to be built manually for a variety of reasons: click Tools and then click Build NPM

After a successful build, there will be a popover:

At this point we can see that our UI framework has been added

After successful introduction, let’s check and use the NPM module

(3) Use of THE UI Framework (Vuant-eAPPp)

Youzan.github. IO/vant-appellate/appellate /…

Find the component we want to use, for example I’m now going to use the framework’s TAB:

Try incorporating the examples from the official website into our project

In app.json, change the path based on your actual situation

Introduce file tags in WXML

Write variables and methods in js

Next want to implement: create a new page, leave the home page, add a button, click it to jump to the new page (our first page)

Right-click on Pages and create a new folder. In the new folder, you can copy the files in the Index folder and delete them. You can also create a new folder under Pages, right-click the folder and click New Page, and you’ll have clean files. This method will automatically add routes to the route, you do not have to manually add

Then we will configure the route, and add a button in the home page to jump to our real home page (choose to leave the home page temporarily, in order to learn to create cloud function later).

The next step is to create three buttons on the real home page, which is relatively simple. Authentication will be involved in this project later, and I will write it separately to make the logic clearer when I conclude later

Create the page to which these three buttons jump

Click on the event and jump to the method and the original wechat small program written

Today I will write this first, after a little bit of update, their next problems and solutions to post ~

Next I’m going to write my second page, the order list, and I’m going to put a tabs in the top part of the order list and a list in the next part

I encountered a problem when importing a vant component. It is not the same as other imported components. It seems to be their problem

Is that it will prompt

At this time, I went to the folder under my relevant directory to check that there was no file I wanted to import… So… I did some research and finally chose to reinstall the dependencies I had installed. I first deleted a file and the line of code in the package.json file, and then downloaded the dependency code from the official website

npm i @vant/weapp -S –production

When I rebuilt NPM with the tool, I found that the name of the folder I just deleted was changed, and the files in it also had the files we wanted. It is estimated that the downloaded dependencies were incomplete.

Next we need to change the path, because the name of the folder has changed, but at this point we find that although the component does not report the error, the style is gone…

Finally, after a bit of research, I found that the style was fine after rebooting… And then you keep typing code

There was also a small problem during the introduction of van-swipe cell, but it did not work. When I checked whether the latest component library was downloaded and whether this file really existed, the file I introduced did exist, and no error was reported when I introduced it, but it did not work. Baidu did a long search and found that the problem was… Did not introduce its parent component… Is not very pit.. And the website didn’t ask you to introduce it, so we don’t know…

After this introduction, we can normally display the effect of hot ~

Now and then I wrote a share button function, and then I Shared with a friend, a friend over there because not developers can’t point of view, he proposed that let me open to experience, the code, and then I do not know how yet, the next step by step Then,,,, actually very simple, because this project is a start is a start on the local, I am directly on the wechat developer tool

Click on the upper right to upload, and then confirm all the way, and finally go to the version management of wechat public platform to put the development version into the experience version

(4) Create cloud functions

Create a cloud function before creating a cloud function

(1) Specify this directory as the following directory of cloud functions.

In the project.config.json file of your project, set the value of the “cloudfunctionRoot”: field to your cloudfunctionRoot, as shown in the following image

When this is done, the new cloud function root directory on the left becomes a folder with cloud symbols. If there is a path, you don’t need to set it

(2) Specify the environment ID of cloud development in the app.js file of the project

The env field is the environment ID of the cloud development. Right-click the root directory of the cloud function and select the cloud environment set for the env variable below. At this point, the cloud function environment for cloud development is set up. But I didn’t fill it in here, so I’m using the default environment

Ii. Steps for creating cloud functions:

(1) Right-click the root directory of the cloud function and create node.js cloud function

Right-click the Cloudfunctions file, click on the New Node.js cloudfunction, and give your method a business name, because I want to make a small application, the user will query the identity of the user is manager or responsible, or pedestrian ~~ so the name: get permission

(2) Right-click the newly created cloud function and open it in the terminal

Right click on the new cloud function and open it in terminal. Then enter NPM install node-xlsx. This command installs dependency modules for the NPM management tool using Node.js. After the installation is complete, node_modules and package-lock.json files will be generated in the newly created cloud function directory to complete the installation of cloud function dependencies.

(3) Write cloud function content

The business logic of the cloud function is written at the entrance of the cloud function

It started like this:

Const cloud = require('wx-server-sdk') cloud.init() // cloud function entry function exports.main = async (event, event) context) => { return await cloud.database().collection('guest').get({ success: function (res) { return res; }, fail: function (res) { return res; }});Copy the code

The cloud function takes two parameters, an event object and a context object. Event refers to the event that triggers the cloud function. When the small program side calls the cloud function, event is the parameter passed in when the small program side calls the cloud function, plus the openID and appID of the small program user automatically injected by the back end. The Context object contains the call information and the running state of the call here, which you can use to understand how the service is running. The template also requires wX-server-SDK by default, which is a library provided by wechat to help us operate database, store and call other cloud functions in the cloud

We can try this: Let’s change the return value of the template,

// ...
exports.main = async (event, context) => {
  // ...
  return {
    sum: event.a + event.b
  }
}
Copy the code

These lines of code represent the sum of a and B passed in and returned to the caller as the sum field. Before calling the cloud function in the applet, we need to deploy the cloud function to the cloud. Right click on the cloud functions directory. From the right click menu, we can package the whole cloud functions, upload them and deploy them to the online environment.

Local debugging methods

1 Write the following cloud function code

2 Right-click the cloud function directory and choose Start Local Debugging of cloud functions.

Then let’s do some local debugging, first right-click the cloud function to open the terminal NPM install, then right-click the function to enable local debugging

3 The local debugging window is open and the TAB of the cloud function is also open. If not, select the function from the list on the left and double-click TAB

4 If “Enable local Debugging” in the control panel on the right is not selected, local debugging of the cloud function will be enabled after it is selected, and all requests in the simulator will be requested to the locally debugged cloud function instance

5 Operate in the small program simulator and initiate the call to the cloud function

6 The local instance of the cloud function is triggered and you can perform debugging operations such as breakpoints

Click it and execute successfully!! Next I’m going to write a cloud function that queries the database

(a) cloud development how to operate the database, query the data in the database?

At first I followed the official tutorial to write, I do not know why there is a problem that the function has been called but there is no return value. Later I delete after the new cloud function, can write normal return… Same code… It is amazing

And then I’m writing something in the database, and I’m trying to write json and I’m failing, and I’m trying to upload the data from the exported JSON and I’m still failing, I think they’re having a problem with that and I’m still manually typing in 4 pieces of data

At this time we put the method of obtaining the database into the home page implementation, can really get our database things

My side is going to get the database things out of the store in a small program, so that the later data acquisition does not need to call the interface

Now what I want to do is to query the data in my userList according to the user’s openId when entering the page, and now modify the original method:

First, the database looks like this:

And then we can write the cloud function like this

Call this method on the home page and pass in the openId for the user

We successfully get the data we want, and then judge the display and hiding of a part of the page by the type of the user list

(two) cloud development how to operate the database, to the new data in the database?

Add an event to the Create New button and write it directly to the event method

Or very simple actually do not call the function other places want to operate the database directly to write it seems to be possible! But considering the reuse of the method, so still write in the database, and then go to the database check, add success!

(three) cloud development how to operate the database, delete the data in the database?

Here are the document: uniapp. Dcloud. IO/uniCloud/cf…

// db.collection('users_list').doc(_id).remove({ // success: The function (res) {/ / / / the console log (res, 'res') / / wx showToast ({/ / title:' head was removed successfully, / /}) / /} / /})Copy the code

In writing of the development of cloud to delete, I fall into a pit, I directly in small program on the js like new call delete database method, because found out many such written, written documents in the same way, but this time, even if my code and, they also didn’t delete success (that is, the only kind of writing above)… The deletion is successful, but the database is still the same. This time I found a statement, is the small program end delete invalid. You have to write to the cloud side.

So I changed the method to the cloud side and I was able to successfully delete the code as follows

Js code:

The code on the cloud side is as follows:

(four) cloud development how to operate the database, modify the data in the database?

On the cloud side, modify and delete are written the same way

Then in the small program side, as long as I want to modify the data splicing good directly after the past good ~

Then I encountered a problem, that is, when I edited the order, even though I got the latest order list, I returned to the page without refreshing the data. Then I checked and found that I could solve the problem like this: I returned to the page after obtaining the latest order data and reload the page, four lines to solve the problem!

        let pages = getCurrentPages()
        let prevPage = pages[pages.length - 2]
        prevPage.onLoad()
        wx.navigateBack()
Copy the code