Applet Profile
Is a small program do not need to download and install to use rapid application that implements the application "within reach" of the operation; user or sweep the search about to open applications, all without installation, so not only can small program improve the user's application experience, but also facilitate dispersal applications.
Getting started with this paper we develop a small way, to build understanding from the environment to develop a simple hello world program, which started small program development, allowing you to quickly succeed applet developers. After that, I want to develop what kind of small program, you can own research and hard work.
The following is a step by a gradual and:
1, registration applet
Prior to the development, of course, need to inject registered a small program account .
Enter the "micro-channel public platform" to register.
It should be noted that the mailbox must be micro-channel public platform are not registered, not registered WeChat open platform, not only effective personal micro-signal binding.
Login After submitting your registration by mail, you will receive a message of "activate your micro letter applets", click on the activation link in the email to complete "information registration" to activate the account.
2, get AppID
After logging applet account we need to fill in the "applet Information", then you can find the "development" option in the left menu bar, clicking tab in the "Development Settings" option to click into the field. We can see part of our AppID , which is a small program ID on the micro-channel public platform. Micro-channel is determined by its applet "identity" and provides the corresponding functional interfaces.
3, micro-channel installation tools
In the "micro-channel official document - a small program," the development of the page, we can find the "Tools" option, choose their own computer system version for download (here I use Windows 64), double-click the downloaded software then "under step "in the end can be automatically added to the desktop after you install the Developer tools" micro-channel Developer tools "shortcut icon. Open the micro-channel applet development tool by clicking on the "micro letter Developer Tools" icon, and then use their own micro-channel software to scan two-dimensional code login, you can enter the micro-letter web developer tools.
4, Integrated Development Environment
After installing the development tools can be developed.
Use your registered applet micro-channel scan code account login "micro-channel Developer Tools" you can begin to create a small program project.
The following is a display interface after the "micro-channel Developer Tools" to open the project.
The official code editing tool functionality is weak, only the basic code editing capabilities can not meet the needs of rapid development support project.
(However tune and test the preview function is very powerful).
So we can use the "micro-channel Developer Tools" and then with an IDE to develop together. For example: VSCode , VSCode is a free open source lightweight cross-platform code editor that integrates an advantage of most of the code editor, integrated GIT, code debugging, syntax highlighting. The most important is to have a wealth of powerful plug-in system, supports almost all major development languages and stable operation, low memory footprint system is well suited to build IDE.
5, the development of the first small program start: Create a project
Create a small project.
"Micro-letter Developer Tools" support applets, games, code snippets and page number of the public development projects, selected by default applet.
Click on the right margin of the "+" sign to create a new project or import an existing project, where the AppID is the time to get in front of registered applet.
When the initial operation, should create an empty directory for storing project files.
6, create a file app.js
App.js created in the directory in a file as an entry file for the project, a small application to register the program through the App () function. This function takes a parameter object (function and data), such as a function of the life cycle of the applet. Here we first whether those life-cycle function, as long as the definition of an empty argument App ({}) function can be registered applet.
//app.js
App({})
7, create a hello world page
We need to display "Hello World" content, so here we need to create a page. Helloworld.wxml create a file in the directory, and here I use a container view view tab to display "Hello World" content.
// helloworld.wxml <view>Hello World</view>
8, registration helloword page
Applet in each page need to be registered in the corresponding page js file, so here we need to create a file in the directory and helloworld.js by Page () function is used to register a page. The function also accepts a parameter object, it may be the initial data of the page lifecycle functions, such as event handler. Here we first whether those life-cycle function, as long as the definition of an empty argument Page ({}) function to the registration page.
// helloword.js
Page({})
9, create a file app.json
Page Register Well we need to configure the Page path, and told where to load the applet page. This requires us to create a app.json file in the root directory, be configured globally by the applet file. The pages of which the object is used to specify which pages are composed of small programs, each of which corresponds to the path of a page (including file name) information.
Note: File names do not need to write the file extension, the framework will automatically go looking for .json position, .js, .wxml, .wxss four files for processing. An array of first term represents the applet initial page (ie Home), a small program to add / reduce need to modify the pages array of the page.
// app.json file
{
"Pages and the": [
"the HelloWorld" // Because the file is currently stored in the root directory, file name directly fill in here
],
}
10, commissioning
Then we can open the "micro-channel Developer Tools" and switch to "Import items" screen, select our project folder in the Contents tab. AppID no visitor can select mode, click on the "Import" button. The program will automatically generate configuration files and sitemap.json project.config.json site map configuration files (you can ignore), in the simulator on the left we can see that our "Hello Word" content in the applet.
Here we will create a simple "Hello Word" applet.
I would like to beautify the page display
If you want to beautify the page display style. We can continue to create a helloword.wxss file, where we can control components WXML style. WXSS similar wording and CSS, very easy to use!
This, the above simple steps 10, 10 minutes. We developed a small program, we had developed a small program entry.
You have is a small application developers a.
Additional knowledge
Applet directory structure
The body needs at least a small program app.js and app.json these two files and must be placed in the root directory of the project (the file name must also be app).
app.wxss global style sheets, mainly used to beautify the visual style, can not, can realize the function.
Usually applet page consists of four documents, namely the definition of the page: architecture, style, function logic, configuration information .
Make the following brief:
app.js file
Each applet will need to call a method in app.js the App to register the applet instance, it is the entry file applet .
Meanwhile, the file is used to define small program global data and functions , control, monitor applet lifecycle.
Defined functions and data are globally shared, other pages can use global functions and data directly.
The life cycle of a function can be called different life cycle functions for different scenarios, such as:
onlaunch: Listener small program initialization;
onshow: monitor applet displays;
onhide: monitor applet hide;
Note: App () must be registered in app.js in one and only one instance of App, you can get to the globally unique App instance by getApp method, but not in the App () function call getApp () method, using this you can get App instance.
Here revisit a little advanced techniques , it is important for you to do a small program development in the future: code protection !
Also known by the file name, which is app.js a js file. As we know, js files are plain text, and applets also can decompile. If you worked hard to develop a small program, decompile others, you can easily get the code you write, it is easy to modify, copy your program.
So, we need to have a product protection awareness: the code is to protect up. There is a platform, called JShaman , before and after the traditional end development programmers do know that this is a platform JS code protection tool that can encrypt obfuscate JS code, making the code unreadable and analysis, its purpose is to prevent myself from anything else code is copied someone else to use repaired .
In the small program development, can also use this platform, you can put app.js code by JShaman encrypted, and then release the applet. So even if someone decompile your little program, he can not use the code inside.
Moreover, there was a magical for: over the trial . Because many small programs, many copies of each other a lot of small programs, the code is almost the same, but small program does not allow the same or similar release too high of a small program, so a lot of small cards in the program over the trial session. And with JShaman encrypted code over the trial because the code will not be identical cards.
Back to the topic, speaking above the app.js. Next, tell the other three important documents applet.
app.json file
This file is a json object for small global configuration program ( not annotated the document ).
It can be configured Page path, the performance of the window, the tabBar tab navigation network timeout, Debug mode, wherein the object to which pages configuration applet pages all paths (the object is a first array and a home applet), page no need to write any suffix path, the system will automatically load .json go the same name, .js, .wxml, .wxss file. The window object is used to set performance applet window, including status bar, navigation bar, title, window background color and so on. tabBar object is used to set up the tab navigation is a menu bar at the bottom of the applet window, you can achieve fast switching pages.
WXML file
WXML is a set of HTML-like markup language, is used to build the page structure. Although HTML tags a little different, but basically the same usage, but also has characteristics similar to the Vue framework to support a list of loops, conditional rendering, template references and data binding functions. Period of complete WXML statement consists of a start tag and an end tag composed in the label may be content may also be other WXML label. It should be noted that WXML labeling requirements must be strictly closed, there is no closure will result in a compilation error.
WXSS file
WXSS style is a language for describing the style WXML components. By defining WXSS to control the rendering style of the page, similar to this in HTML with CSS features (WXSS has most of the features and CSS has been expanded and modified based on CSS). The difference .wxss file app.wxss the page that its scope is global, and .wxss document page to only the current page.
Master the above, you will be a small entry program development, it is the name of a small application developers.