What are the reasons for choosing uni-app?
Introduction to HBuilder X tool and WeChat applet tool
How to download HBuilder X tool and WeChat applet tool
How to use WeChat mini program tools
what is uni-app
uni-app is a framework that uses vue.js to develop all front-end applications. Developers write a set of codes that can be published to iOS, Android, H5 and various small programs (WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk/ Taobao, etc.), Kuai App and other platforms.
What are the reasons for choosing uni-app?
1. More developers/cases
2. Stronger cross-platform capabilities and expansion flexibility
3. Excellent performance experience
4. Rich surrounding ecology
5. Low learning cost
6. Low development cost
Tools needed
The tools required to develop WeChat using uni-app technology are: HBuilder X tool and WeChat applet tool .
Introduction to HBuilder X tool and WeChat applet tool
HBuilder X tool:HBuilderX , H is the first letter of HTML, Builder is the constructor, and X is the next generation version of HBuilder. We also call it short HX. HXIt is a combined version that is as light as an editor and as powerful as an IDE . The HBuilder X tool is highly scalable , HXsupports java plug-ins, nodejs plug-ins, and is compatible with many vscode plug-ins and code blocks. You can also easily call various command line functions through external commands and set shortcut keys. If you are used to the shortcut keys of other tools (such as vscode or sublime), you can switch between them in the menu Tools-Shortcut Key Scheme. Moreover, the HBuilder X plug-in market has a wealth of plug-ins, which is of great help in improving work efficiency. If you want to download a plug-in, you can download it from the plug-in market. Plug-in market address:
WeChat Mini Program Tool: The WeChat Mini Program Development Tool is a development tool officially developed by WeChat and is designed to help developers quickly develop WeChat Mini Programs. Through WeChat mini program development tools, developers can complete a series of functions such as front-end code writing, code debugging, real-device preview, upload and release of mini programs.
WeChat mini program development tools have the following main functions:
- Code editing: Mini program development tools provide a complete development environment, including code editors, consoles, debugging tools, code management, etc., which can facilitate code editing and management.
- Real machine debugging: Mini program development tools support simulated debugging on real machines. Developers can load the code directly into the WeChat client for real-time preview.
- Page preview: The mini program development tool provides a convenient page preview function. You can preview the mini program directly in the WeChat client by scanning the QR code.
- Automatic saving: Mini program development tools can automatically save code to ensure that the code will not be lost due to forgetting to save.
- Code compression: Mini program development tools provide an automatic code compression function, which can compress the code into the smallest size and improve the loading speed of the mini program.
How to download HBuilder X tool and WeChat applet tool
Steps to download HBuilder X tool:
1. Open the official website: HBuilderX-Efficient Geek Skills
2. Follow the steps below to download:
After opening the official website, place the mouse at the location shown below:
If it is a Windows system, click the following image location to download:
If it is an Apple (MacOS) system, click the following picture location to download:
Steps to download WeChat mini program tool :
1. Open the official website: WeChat Open Document
2. Click Tools. If it is a Windows 7 or above system, you can download version No. 1 or No. 2. If it is a Windows 7 system, download version No. 2.
How to use the HBuilderX tool
Step 1: Open HBuilderX, click File->New->Project in the toolbar , the operation is as shown below.
Step 2: Select uni-app , enter the project name, select the storage path , select the default template , and then click Create . The specific operations are as follows.
Finally: After the project is created, it can be run. Open any file of the project, such as App.vue, and select the "Run" --> "Run to built-in browser" command.
How to use WeChat mini program tools
Step 1: You need to configure the relevant path of the mini program IDE before it can run successfully. As shown in the figure below, you need to enter the installation path of the WeChat developer tools in the input box. Select "Run" --> "Run to Mini Program Simulator" --> "Run Settings" command and enter the installation path of the WeChat Mini Program Developer Tools in the location shown.
Step 2: To run the mini program on the WeChat mini program on a real machine, you need to apply for a mini program account on the WeChat public platform. The process is:
1. Enter the official website of the WeChat public platform , and then click the "Register Now" link in the upper right corner (if you have already registered, you can log in directly. The login method can be to log in with your account and password or scan the WeChat QR code to log in).
2. Click the "Register Now" link to enter the registration page. This page provides four types of account registration, namely: subscription account, service account, mini program , and corporate WeChat. We choose the mini program to register. Enter the mini program registration page and fill in the relevant information. After filling in the account information, click the "Register" button below to enter the email activation page. At this time, you need to log in to the email address in the previous step and check the official mini program account activation email sent by Tencent. Click the activation link. After clicking the activation link, proceed to the next step of the registration process, select the registration subject type, and complete the subject information and administrator information. (Just select individual as the subject type )
3. After successfully applying for a mini program account, you can log in again by entering the official website . After successful login, enter "Development"-->"Development Management"-->"Development Settings" in the mini program management interface . You can see that this page has an AppID (mini program ID). Remember how to obtain this ID, you will need it later.
Step 3: Open the service port of the WeChat Mini Program Developer Tool, enter the WeChat Mini Program Developer Tool, select the "Settings" --> "Security Settings" command, and change the "Service Port" to the open state, as shown in the figure .
Then use the HBuilderX tool to run the WeChat applet, click "Run" --> "Run to applet simulator", the operation steps are as follows.
end
If you want to know how to use the HBuilderX tool, you can view the official documentation: HBuilderX-Efficient Geek Tips
If you want to know how to download plug-ins with the HBuilderX tool, you can check the plug-in market at: https://ext.dcloud.net.cn/
If you want to learn about the use of WeChat developer tools, you can view the official documentation: WeChat Open Documentation