Table of contents
1.2 Project creation and configuration
1.2.1 Register WeChat Mini Program
1.2.2 Developer tools and cloud development documents
1. Download and install developer tools
2. Cloud development documents
1.2.3 Create a cloud development template applet
1.2.4 Cloud development project initialization
2. Find the environment ID for cloud development
3. Specify the cloud development environment for developer tools
4. Specify the cloud development environment for the applet
5. Basic library version and developer tool settings
1.2 Project creation and configuration
To start small program cloud development, you first need to register a small program, open the cloud development service, and then download the developer tools and read the technical documents of small program development and cloud development. In addition, you also need to pay attention to some configuration details when creating a cloud development project.
1.2.1 Register WeChat Mini Program
The registration of the mini program is very convenient. Open the registration page of the mini program, fill in the personal information as required, verify the email address and mobile phone number, and scan the QR code to bind your WeChat ID. It will take about 3 minutes to complete.
When registering a mini program, you cannot use the email address that has registered on the WeChat official account or WeChat open platform, that is, you need to use another email address. The login pages of the Mini Program and the WeChat official account are the same page, and they will jump according to your different registered email addresses.
When we register successfully, we can automatically log in to the background management page of the applet. If you accidentally close the background page, you can also click on the background management login page of the applet to log in. After entering the background management page of the applet, click the development on the left menu to enter the setting page, and then click the development setting , you can see the AppID (mini program ID) in the developer ID , which will be useful to us later.
Note that the ID (AppID) of the applet is not your registered email address and user name, you need to check it in the background~
1.2.2 Developer tools and cloud development documents
1. Download and install developer tools
You can download the corresponding version according to your computer operating system, and generally choose the stable version of the Stable Build developer tool. But if you want to try new features released by applets or cloud development, it is recommended to choose to download the pre-release version RC Build and the development version Nightly Build.
Since small programs and cloud development are constantly adding new features, updates are very frequent, and many of its updates are closely related to developer tools, so make sure your developer tools are up to date.
We can see the version number of the current developer tool at the top of the developer tool. Note that the version number contains the date. For example, here 1.04.200804220 is 2020, and 0804 is the version on August 4. If your version number is too low Pay attention to timely updates.
2. Cloud development documents
Like learning any programming, the official technical documentation is the most worthwhile reference to read. You only need to spend about five minutes to understand the general structure of the technical documents, and then follow our teaching steps to read the specific knowledge details . The official technical documentation is too comprehensive and detailed. For beginners or friends with zero foundation, we will guide you how to learn the technical knowledge in the documentation step by step. The functions of applets and cloud development are updated very frequently, and the content of many online tutorials is relatively outdated, and only the technical documents are synchronized to the latest. Whether you are a beginner or a master, technical documentation is the foundation and foothold of our technology development, and it is often read and updated.
Technical Documentation: Official Documentation for Cloud Development
1.2.3 Create a cloud development template applet
After downloading and installing the Mini Program Developer Tools , we use WeChat to scan the QR code to log in to the Developer Tools, and then use the Developer Tools to create a new Mini Program project:
- Project name : This can be filled in according to your own needs;
- Directory : You can create an empty folder on the computer first, and then select it;
- AppID : It is the AppID (small program ID) we found before (you can also select AppID from the drop-down), and the test number cannot be used here;
- The development mode is applet (default);
- Backend service selection applet cloud development
After clicking New to confirm, you can see the cloud development QuickStart applet in the emulator of the developer tool , and see the source code of this applet in the editor.
Next, we click on the preview icon in the toolbar of the developer tool , and a QR code will pop up. Scan the QR code with WeChat to see the applet on your phone. If you do not use WeChat to log in to the developer tools, and your WeChat is not the developer of the Mini Program, you cannot preview it.
Operate this applet in the mobile phone (or emulator), click every button in the applet, and see what happens. We will find that "call failed" will be displayed in many places, which is very normal. Next, we will use a series of operations to prevent the applet from reporting errors.
1.2.4 Cloud development project initialization
1. Enable cloud development
Click the " Cloud Development " icon of WeChat Developer Tools (on the right of the debugger icon), click " Activate " in the pop-up box, and after agreeing to the agreement, a dialog box for creating an environment will pop up . At this time, you will be asked to enter the environment name and the basic environment quota of the current cloud development (it is recommended to choose "pay as you go", or the default is fine).
It is recommended that you use the name of the environment
xly. When there is a problem with your cloud development environment, you can provide your environment ID, and the cloud development team will have someone to answer it for you.
After filling in the dialog box prompts, click Create to initialize the environment. After the environment is successfully initialized, the cloud development console will pop up automatically, and our cloud development service will be activated. You can spend about two minutes to familiarize yourself with the interface of the cloud development console.
If you can’t see the icon of “Cloud Development” in your applet developer tool or can’t activate or open the cloud development service, it means that you haven’t filled in the corresponding appid (for example, the appid you filled in is a test number, or someone else’s appid of the applet), or you have not scanned and logged in to the WeChat developer tool, if you still have problems, it is recommended that you click Clear Cache - Clear All, restart the developer tool, and then scan the code to log in and fill in the appid.
2. Find the environment ID for cloud development
Click the settings icon in the cloud development console window , and find the environment name and environment ID in the tab page of environment variables .
After the user activates cloud development, he creates a cloud development environment. WeChat applets can have up to two environments, and each environment corresponds to a complete set of independent cloud development resources, including databases, cloud storage, cloud functions, static hosting, etc. Each environment is independent of each other. Each environment has a unique environment ID (environment names are not unique).
Pay attention to the difference between the environment name and the environment ID, especially the format when writing the environment ID. It is recommended to use copy and paste when filling in the following. We can switch the cloud development environment by clicking the drop-down triangle of the environment name.
3. Specify the cloud development environment for developer tools
When the cloud development service is enabled, we can see your environment name in the folder name of the applet source code cloudfunctions. If the name of the cloudfunctions folder is not the environment name, but " unspecified environment ", you can right-click the folder, and you can see that the first item in the pop-up window is "current environment", with a small triangle, here you can Select or switch the built cloud development environment. If the environment is blank, restart the developer tools and select again.
4. Specify the cloud development environment for the applet
Open the app.js file in the source code folder miniprogram in the developer tool , and find the following code:
wx.cloud.init({
// env 参数说明：
// env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境（第一个创建的环境）
// env: 'my-env-id',
traceUser: true,
})
env: 'my-env-id'Change it to your environment ID here. Note that you need to fill in your environment ID instead of the environment name. The results are as follows :
j
wx.cloud.init({
env: 'xly-xrlur',
traceUser: true,
})
Because cloud development can create multiple environments, for example, WeChat applets can create two free cloud development environments, one for testing and one for official release. If you do not specify an environment on the applet side, the first cloud development environment created for you will be selected by default. We can switch the cloud development environment used by the applet end by modifying the parameters of env.
The global cloud development capability only needs to be initialized once. Here, the traceUser attribute is set to true, and user access will be recorded in the user management. You can see the access records in the operation analysis of the cloud development console - user access .
5. Basic library version and developer tool settings
In addition to the version of the developer tool, the capabilities of small programs and cloud development are very dependent on the basic library. If the version of the basic library of the developer tool is too low, many APIs will report errors; the version of the basic library is the same as that of WeChat iOS, Android, and PC. There is a corresponding relationship with the Mac terminal. The higher version of the basic library cannot be compatible with the lower version of the WeChat client. We can see the proportion of different basic library user terminals in the developer tool.
Click the details in the upper right corner of the developer tool , and in the local settings , you can see that in addition to setting the basic library, there are some other settings.
-
If it is to experience the function, the higher the better when choosing the basic library, the higher version of the basic library means more function support and fewer bugs, what new functions have been added to the basic library, and what changes have been made, you can Read and understand the update log of the basic library ; however, in actual use, the distribution of users should be considered;
-
Enhanced compilation can enhance the ability to convert ES6 to ES5, and the applet can support most es6 and other JavaScript syntaxes, such as async/await commonly used in tables;
-
It is recommended to check "Do not verify legal domain name, business domain name, TLS version, and HTTPS certificate" when learning, so that the applet supports debugging external links;