WeChat applet running on Chrome browser and using WebStorm

This article mainly introduces the relevant information about the running of WeChat applet on Chrome browser and the use of WebStorm. Friends in need can refer to the development framework of

"WeChat applet" to experience it. Not bad - it comes with a UI framework. But the problem is that his IDE performs quite poorly - in fact, it is mainly because I bought the WebStorm License for many years. Therefore, I think his IDE is really not as useful as my paid one.

Moreover, as a "Chief Markdown Programmer of GitHub China" who supports freedom and open source. WeChat’s “WeChat Mini Program” is leading 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.

Okay, enough nonsense:

The article is too long and you don’t want to read it, you can just watch the Demo haha:

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

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

Three basic elements of MINA in the real world

　Behind the "WeChat Mini Program" is a framework called MINA. In the previous articles, we have almost introduced it. Now let us introduce the pipeline:

Transform wxml and wxss

When we modify WXML and WXSS, we need to recompile the project to see the effect on the browser. At this time, the background will perform some transform actions:

1.wcc will convert wxml into a genrateFun. Executing this method will get a virtual dom
2.wxss will convert wxss into css - this One point is debatable.

wcc and wxss can be obtained from the vendor directory. Type help under "WeChat Web Developer Tools" and you will get the following:

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

Transform js file

For js 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}/*兼容babel*/,location,document,navigator,self,localStorage,history,Caches;
  App({
   onLaunch: function () {

   }
  })
});
require("app.js");

I pretend you already know what this is, anyway I don’t want to, nor can I explain it~~. Same as:

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

As for how it is replaced or appended to html, I will not explain it.

How does MINA run?

In order to run a Page, we need to have a virtual dom, which is a function converted with wcc, such as:

/*v0.7cc_20160919*/
  var $gwxc
  var $gaic={}
  $gwx=function(path,global){
   function _(a,b){b&&a.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]!=&#39;/&#39;){var mepart=me.split(&#39;/&#39;);mepart.pop();var ppart=p.split(&#39;/&#39;);for(var i=0;i<ppart.length;i++){if( ppart[i]==&#39;..&#39;)mepart.pop();else if(!ppart[i])continue;else mepart.push(ppart[i]);}p=mepart.join(&#39;/&#39;);}if(me[0]==&#39;.&#39;&&p[0]==&#39;/&#39;)p=&#39;.&#39;+p;if(e[p])return p;if(e[p+&#39;.wxml&#39;])return p+&#39;.wxml&#39;;}
//以下省略好多字。

Then add a script to our html, such as

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

, and this event will occur. I simply split WXWebview.js and got several functional components:

1. define.js, this is where AMD modularization is defined

2. exparser.js, used to convert WXML tags to HTML tags

3. ##exparser-behvaior.js, defines some behaviors of different tags

4. mobile.js, is supposed to be an event library, I don't seem to care.

5. page.js, the core code, where Page and App are defined.

6. report.js, everything you say can be used as your evidence in court.

7. virtual_dom.js, a virtual dom implementation combined with wcc, there should be component.css in it, or it may be called weui

8. wa -wx.js, where various WeChat APIs, WebView and Native are defined, conflicts with the WX below.

9. wx.js, same as above, but slightly different.

10. wxJSBridge.js, Weixin JS Bridge

    
    

So, I used the above components to define different locations. When we trigger the custom generateFuncReady event, virtual_dom.js will take over the 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, this is the place responsible for DOM initialization, The Dom result obtained here is like this:

<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>

And the wxml we wrote is like this:

<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 view will be converted to wx-view, text will be converted to wx-text, etc., and so on. This conversion is called in virtual dom.js, and the method called is exparser.

Unfortunately, I am stuck on data initialization~~. There are two different event systems, which is a bit troublesome. One of them is: WeixinJSBridge, and the other is the event system in the app engine. It seems that the two cannot be intertwined. . .

Developed using WebStorm

Before running on the browser, we need to simply mock some methods, such as:

1. window.webkit.messageHandlers.invokeHandler.postMessage

##window.webkit.messageHandlers.publishHandler.postMessage
WeixinJSCore.publishHandler
WeixinJSCore..invokeHandler

然后把 config.json中的一些内容变成__wxConfig，如：

__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": {}
}

如这里我们的appname是哈哈哈哈哈哈哈——我家在福建。

然后在我们的html中引入各个js文件，啦啦。

我们还需要一个自动化的glup脚本来watch wxml和wxss的修改，然后编译，如：

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

说了这么多，你还不如去看代码好了：

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

预览：http://weapp.phodal.com/

通过此文，希望能帮助大家，谢谢大家对本站的支持！

更多微信小程序 在Chrome浏览器上运行以及WebStorm的使用相关文章请关注PHP中文网！