Chromeブラウザで「WeChatウィジェット」を実行させます

Transform wxmlとwxss
WXML、WXSSを修正した後、ブラウザで効果を見るにはプロジェクトを再コンパイルする必要があります.バックグラウンドでtransformアクションが実行されます.

wccはwxmlをgenrateFunに変換し、この方法を実行するとvirtual dom

が得られる.

wxssがwxssをcssに変換する点は議論される.

wccとwxssは、vendorディレクトリから入手でき、「微信web開発者ツール」の下でhelp()を叩くことができます.openVendor()を実行すると、上のwcss、wxss、WAServicesが得られます.js、WAWebview.jsは4つのファイルを持っています.
Transform jsファイル
jsファイルにとって、以下は私たちのappです.jsファイル:

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

変換すると次のようになります.

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

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

私はあなたがすでにこれが何なのか知っているふりをして、どうせ私も考えたくないし、説明もできません~~.同じ理由:

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");

それがhtmlにreplaceやapendをどのようにするかについては、説明しません.
MINAはどのように動作しますか?
Pageを実行するには、次のようなwcc変換関数を使用するvirtual domが必要です.

 /*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]!='/'){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';}
//       。

htmlにscriptを追加します.

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

この事件が起こります.簡単に分割したjsはいくつかの機能コンポーネントを得た.

define.js,ここではAMDモジュール化を定義する場所

である.

exparser.js、WXMLタグをHTMLタグ

に変換する

exparser-behvaior.js、異なるラベルを定義するいくつかの動作

mobile.js、イベントライブラリのはずですが、私は気にしていないようです.

page.jsは,コアコード,すなわちPage,Appの定義である.

report.js、あなたの言ったことはすべてあなたの証言として使うことができます.

virtual_dom.js、virtual domはwccと組み合わせて使用することを実現し、中にはcomponentがあるはずだ.css、weui

と呼ぶかもしれません

wa-wx.jsは,微信の様々なAPIとWebViewとNativeを定義する場所であり,以下のWXと衝突する.

wx.js、同じですが、少し違います.

wxJSBridge.js,Weixin JS Bridge

そこで、上のコンポーネントで異なる位置を定義します.カスタムgenerateFuncReadyイベントをトリガーするとvirtual_dom.jsは今回のnderを引き継ぐ: