This is the 10th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

We’ve already described creating a QuickStart applet for cloud development using the templates that come with the developer tools. Here’s a practical example of a QuickStart applet for cloud development.

A review of preparations for the cloud development project

Before we start a cloud development project, we need to do a series of preparations, otherwise there will be some problems, these preparations have been introduced in the previous, here to sort out, don’t understand the place can read the previous article oh:

  • Have you successfully registered an applet and obtained its AppID?
  • Have you downloaded the latest version of wechat developer tools? Do you know how to tell if your developer tools are behind?
  • Is the cloud development environment enabled and the environment ID of the environment obtained? Can you open the Cloud Development console?
  • Cloudfunctions Folder name Indicates whether the environment name is displayed. If the environment is not specified, right-click the folder and choose More Settings. Then click The Settings icon, select the environment, and confirm.
  • Is the app.js function already in the applet’s life cycleonLaunchIn the use ofwx.cloud.init()To initialize the cloud development environment;
  • How to determine the version of the base library of the small program project? Is the base library version set to the latest version?
  • Do you know how to set “local Settings” for developer tools?
  • Do you have the Node.js environment installed? And how do you know if it was installed successfully? And know how to download cloud function dependencies?

Whether you are a new project, an old project, or an imported project, you need to check these questions first.

Cloud development applet initial

There are a lot of redundant pages and some style information in the QuickStart template applet for cloud development. We need to empty the files/folders in the Pages, images, Components and style folders under the MiniProgram folder and only keep the 4 empty folders.

For example, if the app.json pages configuration is set to the following value, the developer tool will create a new index page:

"pages": [ 
    "pages/index/index",
    "pages/user/user",
 ],
Copy the code

Configure tabbar for app.json:

"tabBar": { "list": [{ "pagePath": "pages/index/index", "iconPath": "images/home.png", "selectedIconPath": "Images/home - Amy polumbo ng", "text", "home page"}, {" pagePath ":" pages/user/user ", "iconPath" : "Images /user.png", "selectedIconPath": "images/user-a.png", "text":" my "}]}, "images/user-a.png", "selectedIconPath": "images/user-a.png", "text": "my"}]},Copy the code

At this point, the basic framework of the project is in place. In the next article we will continue to implement a small application cloud development project.

Click “like” to encourage you