Chrome ブラウザ上で実行され、WebStorm を使用する WeChat アプレット

この記事では主に、Chrome ブラウザでの WeChat アプレットの実行と WebStorm の使用に関する関連情報を紹介します。必要な友人は参照してください。

「WeChat アプレット」の開発フレームワークは、UI が付属しているので、体験するのは悪くありません。フレームワーク。しかし問題は、彼の IDE のパフォーマンスが非常に悪いということです。実際、それは主に私が長年 WebStorm ライセンスを購入していたことが原因です。したがって、彼の IDE は私の有料のものほど役に立たないと思います。

そして、自由とオープンソースをサポートする「GitHub China のチーフ マークダウン プログラマー」として。 WeChat の「WeChat Mini プログラム」により、Web はオープンとクローズを繰り返しており、コードを喜んで共有することはできなくなりました。

このまま放っておくと、将来のWeb世界が心配になります。

さて、ナンセンスはこれくらいです:

記事は長すぎるので読みたくないなら、デモを見るだけで大​​丈夫です (笑):

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

プレビュー: https://github.com/phodal/weapp-webdemo

現実世界におけるMINAの3つの基本要素

「WeChat Mini Program」の背後にはMINAと呼ばれるフレームワークがあります。これまでの記事でほぼ紹介してきました。ここでパイプラインを紹介しましょう:

wxml と wxss を変換する

WXML と WXSS を変更するときは、ブラウザーでの効果を確認するためにプロジェクトを再コンパイルする必要があります。現時点では、いくつかの変換アクションがバックグラウンドで実行されます:

1.wcc は wxml を genrateFun に変換します。このメソッドを実行すると、仮想 dom が取得されます。
2.wxss は wxss を CSS に変換します。これについては議論の余地があります。

wcc と wxss はベンダー ディレクトリから取得できます。「WeChat Web 開発者ツール」の下に help と入力すると、次の情報が表示されます:

openVendor() を実行すると、wcss、wxss 上の 4 つのファイルが得られます。 、WAService.js、WAWebview.js。

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に置き換えられるか、または追加されるかについては、説明しません。

MINAはどのように機能しますか?

ページを実行するには、仮想 dom、つまり次のような wcc で変換された関数が必要です。

/*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;;}
//以下省略好多字。

次に、

などのスクリプトを HTML に追加します。

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

この事件は起こります。 WXWebview.js を分割して、いくつかの機能コンポーネントを取得しました。

1. define.js、ここで AMD モジュール性が定義されています

2. exparser.js、WXML タグを HTML タグに変換するために使用されます

3. exparser-behvaior .js、さまざまなタグのいくつかの動作を定義します

4. mobile.js、イベント ライブラリである必要がありますが、私は気にしていないようです。

5. page.js、ページとアプリが定義されているコアコード。

6. report.js、あなたの発言はすべて法廷で証拠として使用できます。

7. virtual_dom.js、wcc と組み合わせて使用​​される仮想 dom 実装。その中には、component.css が含まれている必要があります。または、weui

8. wa-wx.js と呼ばれる場合もあります。ここには、さまざまな WeChat API、WebView およびネイティブは定義されており、以下の WX と競合します。

9. wx.js、上記と同じですが、少し異なります。

10. wxJSBridge.js、Weixin JS Bridge
    

そこで、上記のコンポーネントを使用してさまざまな場所を定義しました。カスタムのgenerateFuncReadyイベントをトリガーすると、virtual_dom.jsが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", {}));
  }
 })
})

したがって、ここでDOMの初期化を担当する場所は次のようになります:

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

そして、私たちが書いた wxml は次のようになります:

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

明らかに、ビューは wx-view に変換され、テキストは wx-text に変換されます。この変換は仮想 dom.js で呼び出され、呼び出されるメソッドは exparser です。

残念ながら、データの初期化で行き詰まっています~~。2つの異なるイベントシステムがあり、少し混乱しています。 1 つは WeixinJSBridge で、もう 1 つはアプリ エンジンのイベント システムです。この 2 つは連携できないようです。 。 。

WebStormを使用して開発

ブラウザで実行する前に、次のようないくつかのメソッドを単純にモックする必要があります:

1. window.webkit.messageHandlers.invokeHandler.postMessage

2. window.webkit.messageHandlers.publishHandler .postMessage

3. WeixinJSCore.publishHandler

4. 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中文网！