Applet is based on the WEB specification, using HTML, CSS, and JS framework such as a building, the official micro letter to them to take the name: WXML, WXSS, but the essence is still under construction throughout the WEB system. WXML, the final analysis is a subset of the xml. WXML micro letter from a small label WXSS defined, it can be understood as is the custom CSS. ES JS achieve universal specification or logical part, and runtime or Webview (IOS WKWEBVIEW, ANDROID X5)
A complete small program consists of the following components:
an entry file: app.js
a global style: app.wxss
a global configuration: app.json
page: next pages, each page press folder is divided, each page 4 files
view: wxml, wxss
logic: js, json (page configuration is not required)
Note: pages which can also be subdivided according to a subdirectory module, fill in the path grandson directory, only you need to register in app.json on the line.
Project Package:
editor, which itself is based on the realization of WEB technology system, nwjs + react, nwjs simply say that node + webkit, node api available to our local capabilities, and provide us with webkit web-enabled, you can make a combination of both we use JS + HTML for local application. Since there nodejs, that the above package option in the function like true. ES6 turn the ES5: introducing babel-core packet of node
CSS Complement: introducing postcss autoprefixer and the packet node (postcss principles and autoprefixer see here)
code compression: introduction of node packet uglifyjs
Note: for use on android x5 kernel support is not good for ES6, to be compatible, then either use the syntax ES5 or the introduction of babel-polyfill compatible library.
After packing the directory structure:
All applets are substantially above the final structure are labeled
1, WAService.js frame JS libraries, the API provides the ability to layer underlying logic
2, WAWebview.js frame JS libraries, API provides the ability to view base layer
3, WAConsole. js framework JS libraries, console
4, complete configuration app-config.js small program that contains all the configuration app.json in us, the combination of the default configuration type
5, app-service.js our own JS code, all this file is packaged in
6, the template file page-frame.html applet view, all the pages are rendered using this add-in, and all WXML are disassembled to pack JS achieve here
7, pages all pages, this is not our wxml files before, mainly WXSS conversion process using the header area js inserted.
Applet architecture:
Applet micro-channel frame consists of two parts View View layer, App Service logic level, View layer structure used to render the page, the AppService layer for logic processing, data request interface calls, which are running in the two processes (two Webview) in .
And logical view of the system through communication JSBridage layer, the logical layer to the view change notification data layer, layer view of a page update is triggered, the layer view event trigger notification service processing logic layer.
It will download a small program from a small startup CDN complete package, usually named with numbers, such as: _- 2082693788_4.wxapkg
Applet technology:
the UI view and a small program logic is implemented using a plurality webview, JS code logic is loaded into a processing all Webview which, called the AppService, the entire program has only a small, and permanent throughout the life cycle memory, and all views (wxml and wxss) are carried by separate Webview called AppView. So a small program to open at least there will be two webview process, officially because each view is a separate webview process, taking into account the performance overhead, applets are not allowed to open more than five levels of the page, of course, the same is also to experience better.
AppService
be appreciated a simple page AppService i.e., the main function is responsible for performing logic processing section, a bottom WAService.js api file to provide various interfaces, mainly the following parts:
message communication package as WeixinJSBridge (Development Environment is window.postMessage, under the IOS to WKWebview window.webkit.messageHandlers.invokeHandler.postMessage, android with the WeixinJSCore.invokeHandler)
1, logging component Reporter package
2, wx following objects api method
3, the global App, Page, getApp, getCurrentPages other global method
4, there is achieved the module specification for AMD
Then the entire page is loaded a bunch of JS files, including small program configuration config, above WAService.js (there asdebug.js debug mode), and the rest is all js file to write our own, one-time are loaded.
Online environment
while in the on-line application part will be packaged as two files, and the name of the app-config.json app-service.js, and micro-channel open webview to load. Line section should be micro letter itself provides the appropriate template file is not found inside the archive.
1, WAService.js (bottom support)
2, App-config.json (application configuration)
. 3, App-service.js (application logic)
Then run JavaScriptCore engine inside.
AppView
herein will be understood as h5 page, rendering a UI, a bottom WAWebview.js to provide underlying functionality, as follows:
1, packaged as a message communication WeixinJSBridge (development environment for window.postMessage, the window is WKWebview under IOS. webkit.messageHandlers.invokeHandler.postMessage, android with the WeixinJSCore.invokeHandler)
2, log Reporter package assembly
. 3, api under wx objects, here in the api with WAService also not the same, there are several functions almost like there, but most of them are related to the UI display processing method
4, applets and components to achieve registration
5, VirtualDOM, Diff and Render UI achieve
6, page events triggered
On this basis, AppView have a html template file to load a specific page by the template file, the template mainly on a method, $ gwx, mainly returns the specified page of VirtualDOM, and in the packing time, will advance to all pages the WXML ViirtualDOM converted into a template file, and write their own micro-channel two tools wcc (the WXML convert VirtualDOM) and wcsc (WXSS to convert a string of JS by style label append to the header inside).
View Service and communication
using message publish and subscribe mechanism for communication between two Webview, implementation is a unified package WeixinJSBridge objects, packages and different environmental interface is not the same, the specific techniques to achieve the following:
windows environment
by window.postMessage achieved (Extended interface injection using a chrome contentScript.js, which encapsulates postMessage method, communication between Webview, and it is also by way chrome.runtime.connect, also provides a direct operation chrome Native native method Interface)
send a message: window.postMessage (data, '*' );, // data webviewID specified in
the received message: window.addEventListener ( 'message', messageHandler ); // message processing and distribution, also supports calls nwjs native ability.
See a word in contentScript inside, it confirms appservice is achieved through a webview, with the view to achieve on the same principle, but the business logic processing is not the same.
'webframe' === b ? postMessageToWebPage(a) : 'appservice' === b && postMessageToWebPage(a)
IOS
micro-channel navite handler code implements two message processors through the window.webkit.messageHandlers.NAME.postMessage WKWebview:
InvokeHandler: for native ability
publishHandler: the message distribution
Summary
to achieve the underlying or applet-based Webview, did not invent the creation of new technologies, the entire framework, relatively clear and simple, Web-based standards, ensure maximum value of existing skills, you need to know to use the existing framework to govern Web technology development. Easy to understand and develop.
MSSM: logic and UI were completely isolated, with this popular react, agular, vue are essentially different, small program logic and UI fully operational in two separate Webview inside, and behind these frameworks still running a webview inside, if you want, or you can directly manipulate dom object, ui rendering.
Component mechanism: the introduction of the components of the mechanism, but not entirely based on component development, like most of vue or templated UI rendering component introduced mechanisms to better regulate development model, more convenient to upgrade and maintain.
A variety of control: You can not open more than 10 windows, packed files can not be greater than 2M, dom object can not be greater than 16000, etc., which are designed to ensure a better experience.