Chromeブラウザで「WebStorm」を実行してみましょう

7035 ワード
httml 5 node.js javascript
「微信ウィジェット」の開発フレームワークを体験すると、UIフレームワークが付いています.しかし、問題は彼のIDEで、かなり悪いことを示しています.実は、私がWebStorm Licenseを何年も買ったからです.だから、彼のIDEは本当に私のこの料金より使いやすいと思います.
そして、自由とオープンソースを擁護する「GitHub中国区首席Markdownプログラマー」として.微信は「微信小プログラム」でWebのオープンクローズを導き、私たちのコードを楽しく共有することはできません.
私たちが放っておけば、未来のWeb世界は憂慮されます.
さあ、くだらない話は終わりました.
文章が長すぎて読みたくないので、直接Demoを読むことができます.
GitHub: https://github.com/phodal/weapp-webdemoプレビュー:http://weapp.phodal.com/
リアル世界のMINAの3つの基本要素
「微信ウィジェット」の背後にはMINAというフレームワークが実行されています.前のいくつかの文章では、私たちの紹介はあまり悪くありません.pipelineについて説明します.
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

    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を引き継ぐ:
    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", {}));
        }
    })
})

    そこで、ここでDOMの初期化を担当する場所です.ここで得られたDomの結果は次のようになります.
    
    
        
        add line
        remove line

    私たちが書いたwxmlはこうです.
    
  
    {{text}}

    明らかにviewはwx-viewに変換され、textはwx-textなどに変換される.この変換はvirtual domです.jsで呼び出され、呼び出される方法はexparserです.
    残念なことに、私は今dataの初期化の上に閉じ込められています~~、この中には2つの異なるイベントシステムがあり、いくつかの悩みがあります.一つはWeixinJsBridge、もう一つはapp engineのイベントシステムで、二つは互いに調整できないようです.の
    WebStormを使用した開発
    ブラウザで実行する前に、以下のような簡単なmockの方法が必要です.
  • 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ファイルを導入します.
    また、watch wxmlとwxssの変更を自動化し、コンパイルするglupスクリプトも必要です.
    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/
    17 _2.1
    [メモ]C言語でgetch()について