What is a small program (understand)
Applet is a kind of application that can be used without downloading and installing. It realizes the dream of application “at your fingertips”. Users can open the application by scanning or searching it. It also embodies the concept of “use it and go”, so users don’t have to worry about installing too many apps. Applications will be everywhere, ready to use, but not installed or uninstalled.
Two, the type of small program (understand)
Micro channel small program, Alipay small program, headlines small program, Baidu small program, QQ small program
Iii. History of applets (Understanding)
Four, the advantages of small programs (understand)
For developers, small program development threshold is relatively low, less difficult than APP, can meet simple basic applications, suitable for life service offline stores and non-rigid low-frequency applications conversion. For users, it can save time cost and mobile phone memory space; It can also save development and promotion costs for developers.
Five, small program display (familiar with)
Wechat mini program - wechat home page drop-downCopy the code
Alipay small procedures - friends - small proceduresCopy the code
QQ small program - QQ home page pull downCopy the code
Toutiao Applets - Toutiao Search - Applets entry click the icon in the upper left cornerCopy the code
Baidu small program - Baidu APP drop downCopy the code
Vi. Introduction to wechat mini program (Understanding)
Wechat applet provides a simple and efficient application development framework and rich components and apis to help developers develop services with native APP experience in wechat.
Vii. Preparation (Master)
1. Apply for an account
Enter the mini program registration page and fill in the information and submit the relevant information according to the guidelines to apply for your own micro program account
Log in the applet background and view your APPID in “Settings” – “Development Settings”
The AppID of an applet is an ID card for the applet platform, and you’ll need it in many places later
2. Install developer tools
Developer tools download page to download wechat developer tools
Select a stable version to download according to your hardware environment
Eight, experience small program
Open developer tools, use their own wechat scan code to log in
After logging in to developer tools, you can see that there are two big categories, namely “small program project” and “public account project”.
[Small program project] including “small program”, “small game”, “code snippet”, mainly used for the development, debugging and release of wechat small program and wechat small game;
[Official account Project] Mainly used for the development and debugging of wechat official account, subscription account and service account and other web applications. I am here to take you to learn is the small program in the small program project.
Click on the “+”
The options we need to add to the page are [project name], [Directory], [AppID], [Development Mode], [Back-end service], [language],
The most important option is the AppID option. In step 7, we already know how to get our own AppID. We just need to fill it in correctly.
[Project Name] Set this parameter to Lesson_01
[Directory] is the address of its own project
[AppID] Enter the correct value
[Development Mode] Select “small program”
[Back-end Service] Select “Do not Use Cloud Service”
[Language] Select javascript.
Click “New” to successfully create a sample project provided by wechat official
Click the compile button on the tool to see the performance of this small program in the simulator interface on the left side of the tool. You can also click the preview button to experience your first small program on the phone by scanning wechat.
Ix. Interface function introduction of developer tools (Master)
Created after the success of the project, in the main interface with 13 TAB at the top, respectively, simulator 】 【 】 【 editor, debugger, cloud development 】 【 】, small program mode, compile 】 【 】, real machine debugging, cut the background 】 【 】, “clear cache” and “upload”, version management, community 】 【 】 and 【 】 for details.
1. Simulator TAB
Click the “Simulator” TAB to open and close the simulator. There is a status bar at the top of the simulator
The “iPhone5” column allows developers to select the model of the simulator and test how the code works on each model; The “100%” section allows you to resize the emulator so that developers can see the full picture. The “WiFi” section allows us to select different network environment to test the code; The “simulate action” column defaults to the Home option and the return option; To the right is the sound switch of the simulator; The middle click displays the emulator as a separate page; Click on the far right to adjust the position of the simulator, the default is left, click on the right to adjust the position,
2. Editor TAB
Click the [Editor] TAB to open and close the editor
3. Debugger TAB
Click the debugger TAB to turn the debugger on and off
4. Cloud Development TAB
Click the “Cloud Development” TAB, you can open “Small program · Cloud Development”
Cloud development for developers to provide complete primary support and the clouds WeChat service support, and weaken the back-end and operational concepts, do not need to set up the server, use the API provided by the platform in terms of core business development, can be realized fast on-line and iteration, this ability at the same time, with the developers are already using cloud services compatible with each other, are not mutually exclusive.
5. Applet mode TAB
Click the “Applet” TAB to select the plug-in mode
6. Compile TAB
Click the “Compile” TAB to specify which page to edit. By default, the small program edits the first page in the “Pages” option in the app.json file, using this function can improve the efficiency of development.
Click “Preview” to use the mobile phone wechat scan code for the real preview effect.
7. Real machine debug TAB
Click the “Real machine Debugging” TAB, you can scan the wechat code on the phone to see the effect directly
8. Cut the background TAB
Click the “Cut background” TAB to simulate the front and back background switching operation of the application in the simulator.
9. Clear the cache TAB
Click the “Clear Cache” TAB, several options will appear: “Clear data cache”, “Clear file cache”, “Clear authorization data”, “clear network cache”, “clear login status” and “Clear all”
10. Upload TAB
Click the “Upload” TAB, the current code will be uploaded to the wechat server, and automatically compiled, in the background of wechat small program to generate an experience of the TWO-DIMENSIONAL code, developers can test the code.
Version Management TAB
Click the [Version Management] TAB, you can use the Git tools provided by wechat to manage the code in the project.
12. Community TAB
Click the [Community] TAB to open the “wechat Open Community” using the default browser.
13. Details TAB
Click the Details TAB
[Details] The TAB mainly has three major functions: project setting, domain name information and Tencent cloud status, which will be introduced in subsequent courses
X. Common shortcut keys of wechat developer tools (familiar with)
As the saying goes, to do good work must first sharpen its tools, I bring you benefits, wechat small program developer tools shortcut keys, as follows:
1. Interface switch
Ctrl + Shift + T: Toolbar
Ctrl + Shift + D: Simulator
Ctrl + Shift + E: Editor
Ctrl + Shift + T: Directory tree
Ctrl + Shift + I: Debugger
2, tools,
Ctrl + B: compile
Ctrl + R: refresh
Ctrl + Shift + P: Preview (auto preview)
Ctrl + Shift + U: Upload
3, edit,
Ctrl + Shift + F: Format code
Ctrl + P: Jump file
Ctrl + E: Recent files
Ctrl + [: Indent lines to the left
Ctrl +]: Indent lines of code to the right
Ctrl + Shift + [: Collapses code blocks
Ctrl + Shift +]: Opens the code block
Alt + Up: Move a line Up
Alt + Down: Move a line Down
Shift + Alt + Up: Copies a row Up
Shift + Alt + Down: Copies a row Down
Ctrl + Shift + Enter: Inserts a line above the current line
Ctrl + Shift + F: Global search
4. Cursor correlation
Ctrl + End: Move to the End of the file
Ctrl + Home: Move to the beginning of the file
Ctrl + I: Select the current line
Shift + End: Selects from the cursor to the End of the line
Shift + Home: Select from the beginning of the line to the cursor
Ctrl + Shift + L: Select all matches
Ctrl +D: Select the most recent match
Ctrl + U: Cursor rollback