Create a mini program
Click the button in the upper left corner of HBuilderx: File->New->Project
Then open the interface, enter the project name, click the Browse button, you can select the directory where the project is saved, and click the Create button after completing this.
For example, Xiaoying’s project name is: test-ying
If you run the WeChat applet simulator for the first time, you need to configure its information.
Configure the WeChat applet running address
Click the buttons in sequence: Run -> Run to Mini Program Simulator -> Run Settings (s) (this is the last one in the menu, just find the last one), and then you will see the following interface:
The place circled by Xiaoying is where you need to configure the WeChat developer tool path.
Run applet
When everything is ready, start running. First select your project, and then click the buttons in sequence: Run -> Run to Mini Program Simulator -> WeChat Developer Tools (remember to compress the code: check whether to compress the code during runtime) code)
Then the WeChat developer tools will open by themselves.
Although you can see the appearance of the mini program in the developer tools, if you want to use your phone to see the effect, you will find that the area circled by Xiaoying is disabled. What should you do at this time? The prompt says: The logged in user is not the mini program. If you are a developer, then just configure a developer account and configure your WeChat mini program AppID to the mini program we created.
Configure WeChat applet AppID
manifest.json configuration
Open the manifest.json file, find the WeChat applet configuration, and fill in the WeChat applet AppID. This AppID must be an ID that you have permission to use. The specific configuration is as shown below.
Get AppID
Log in to the WeChat public platform and click Development Management -> Development Settings to view it.
Then copy and paste the AppID into manifest.json, and then re-run the mini program. Then we find that it can be previewed and debugged on a real device.
Mobile preview
Click the preview button in the WeChat developer tools, then scan the QR code with your phone, and then you can see what the mini program looks like on your phone.
digression
When we run the mini program, there is code quality in the lower right corner of the WeChat developer tools
For this, we click on the project's manifest.json -> source code view (the last one) in HBuilderx
Add "lazyCodeLoading": "requiredComponents" to it, then re-run the applet, and then click Rescan under the code quality. If there is no response from the re-scan, close the WeChat Developer Tools, stop running, and then run again. Just click Rescan in the newly entered interface.
Nugget address: HBuilderx Create and run the uniapp project