WeChat applets run on Chrome browser and use of WebStorm, chromewebstorm

The applet runs on the Chrome browser and uses WebStorm, chromewebstorm

The development framework of "mini-programs" is quite good-it comes with the UI framework. But the problem is that his IDE is quite bad-in fact, it was mainly because I had bought WebStorm License for many years. Therefore, I think his IDE is really better than my pay-as-you-go.

In addition, as a free and open source "GitHub China head Markdown programmer 」. The "applet" guides the Web to open and close, and we can no longer happily share our code.

If we let it go, the future Web world will be worrying.

All right, you have finished speaking nonsense:

The article is too long to read. You can view the Demo directly. Haha:

GitHub: https://github.com/phodal/weapp-webdemo
Preview: http://weapp.phodal.com/

Three basic elements of MINA in the real world

The "applet" runs a framework named MINA. In the previous articles, we have introduced it almost. Now let's introduce pipeline:

Transform wxml and wxss

When we modify WXML and WXSS, we need to re-compile the project to see the effect in the browser. At this time, the background will execute some transform actions:

1. wcc is used to convert wxml into a genrateFun. After this method is executed, a virtual dom is obtained.
2. wxss will convert wxss to css.

Wcc and wxss can be obtained from the vendor directory. In the "web Developer tool", enter help and you will get the following stuff:

Run openVendor () and you will get the preceding four files: wcss, wxss, WAService. js, and WAWebview. js.

Transform js File

For JavaScript files, it is an assembly process. The following is our app. js file:

App({onLaunch: function () { }})

After conversion, it will become:

Define ("app. js ", function (require, module) {var window = {Math: Math}/* compatible with babel */, location, document, navigator, self, localStorage, history, Caches; app ({onLaunch: function () {}})}); require ("app. js ");

I pretend that you already know what this is, and I don't want to explain it anymore ~~. Likewise:

Define ("pages/index. js ", function (require, module) {var window = {Math: Math}/* compatible with babel */, location, document, navigator, self, localStorage, history, Caches; page ({data: {text: initData}); require ("pages/index. js ");

I will not explain how it replace or apend to html.

How does MINA run?

To run a Page, we need a virtual dom, that is, the function converted with wcc, such:

 

/* V0.7cc _ 20160919 */var $ gwxc var $ gaic ={}$ gwx = function (path, global) {function _ (a, B) {B &. children. push (B);} function _ n (tag) {$ gwxc ++; if ($ gwxc> = 16000) {throw 'Enough, dom limit exceeded, you don \'t do stupid things, do you? '}; Return {tag: tag. substr (0, 3) = 'wx -'? Tag: 'wx-'+ tag, attr :{}, children: []} function _ s (scope, env, key) {return typeof (scope [key])! = 'Undefined '? Scope [key]: env [key]} function _ wl (tname) {console. warn ('template' + tname + ''' is being call recursively, will be stop. ')} function _ ai (I, p, e, me) {var x = _ grp (p, e, me); if (x) I. push (x); else {console. warn ('path'' + p + ''' not found from ''+ me + ''')} function _ grp (p, e, me) {if (p [0]! = '/') {Var mepart = me. split ('/'); mepart. pop (); var ppart = p. split ('/'); for (var I = 0; I <ppart. length; I ++) {if (ppart [I] = '.. ') mepart. pop (); else if (! Ppart [I]) continue; else mepart. push (ppart [I]);} p = mepart. join ('/');} if (me [0] = '. '& p [0] ='/') p = '. '+ p; if (e [p]) return p; if (e [p + '. wxml']) return p + '. wxml';} // The following words are omitted.

Then add a script in our html, as shown in figure

document.dispatchEvent(new CustomEvent("generateFuncReady", {  detail: {   generateFunc: $gwx('index.wxml')  } }))

The event will be sent together. I simply split WXWebview. js and got several functional components:

1. Define. js, which defines AMD Modularization
2. Exparser. js, used to convert WXML tags to HTML tags
3. Exparser-behvaior.js, defining some behavior for different labels
4. Mobile. js should be an event library, as though I don't care about it.
5. Page. js, the core code, that is, the definition of Page and App.
6. Report. js, everything you said can be used as your evidence.
7. Virtual_dom.js, a virtual domis actually used in combination with wcc. there should also be component.css, or weui
8. Wa-wx.js that defines various APIs and where WebView and Native conflict with the following WX.
9. Wx. js, same as above, but slightly different.
10. WxJSBridge. js, Weixin JS Bridge
    

As a result, I can use the following components to define different positions. When we trigger a custom generateFuncReady event, virtual_dom.js will take over this Render:

document.addEventListener("generateFuncReady", function (e) { var generateFunc = e.detail.generateFunc; wx.onAppDataChange && generateFunc && wx.onAppDataChange(function (e) {  var i = generateFunc((0, d.getData)());  if (i.tag = "body", e.options && e.options.firstRender){   e.ext && ("undefined" != typeof e.ext.webviewId && (window.__webviewId__ = e.ext.webviewId), "undefined" != typeof e.ext.downloadDomain && (window.__downloadDomain__ = e.ext.downloadDomain)), v = f(i, !0), b = v.render(), b.replaceDocumentElement(document.body), setTimeout(function () {    wx.publishPageEvent(p, {}), r("firstRenderTime", n, Date.now()), wx.initReady && wx.initReady()   }, 0);  } else {   var o = f(i, !1), a = v.diff(o);   a.apply(b), v = o, document.dispatchEvent(new CustomEvent("pageReRender", {}));  } })})

Therefore, here is the place responsible for DOM initialization. The Dom result is as follows:

<wx-view class="btn-area"> <wx-view class="body-view">  <wx-text><span style="display:none;"></span><span></span></wx-text>  <wx-button>add line</wx-button>  <wx-button>remove line</wx-button> </wx-view></wx-view>

The wxml we wrote is as follows:

<view class="btn-area"> <view class="body-view"> <text>{{text}}</text> <button bindtap="add">add line</button> <button bindtap="remove">remove line</button> </view></view>

Obviously, the view will be converted to wx-view, the text will be converted to wx-text, and so on. This conversion is called in virtual dom. js, and the calling method is exparser.

Unfortunately, I am stuck in data initialization now ~~, There are two different event systems, which have some troubles. One of them is WeixinJSBridge and the other is the Event System in the app engine. It seems that the two cannot be called each other...

Developed Using WebStorm

Before running on a browser, we need some simple mock methods, such:

1. Window. webkit. messageHandlers. invokeHandler. postMessage
2. Window. webkit. messageHandlers. publishHandler. postMessage
3. WeixinJSCore. publishHandler
4. WeixinJSCore... invokeHandler

Then, convert some content in config. json into _ wxConfig, for example:

__wxConfig = { "debug": true, "pages": ["index"], "window": {  "backgroundTextStyle": "light",  "navigationBarBackgroundColor": "#fff",  "navigationBarTitleText": "WeChat",  "navigationBarTextStyle": "black" }, "projectConfig": { }, "appserviceConfig": { }, "appname": "fdfafafafafafafa", "appid": "touristappid", "apphash": 2107567080, "isTourist": true, "userInfo": {}}

For example, here our appname is hahaha Hahahaha -- my family is in Fujian.

Then we will introduce various js files in our html.

We also need an automated glup script to modify the watch wxml and wxss, and then compile the script, such:

exec('./vendor/wcc -d ' + inputPath + ' > ' + outputFileName, function(err, stdout, stderr) {   console.log(stdout);   console.log(stderr);});

After talking about this, you might as well look at the Code:

GitHub: https://github.com/phodal/weapp-webdemo

Preview: http://weapp.phodal.com/

Through this article, I hope to help you. Thank you for your support for this site!