WeChat-Applet, das im Chrome-Browser ausgeführt wird und WebStorm verwendet

In diesem Artikel werden hauptsächlich relevante Informationen zum Ausführen des WeChat-Applets im Chrome-Browser und zur Verwendung von WebStorm vorgestellt. Freunde, die es benötigen, können auf das Entwicklungsframework von

„WeChat-Applet“ zurückgreifen - Es kommt mit einem UI-Framework. Das Problem ist jedoch, dass seine IDE ziemlich schlecht funktioniert – tatsächlich liegt das hauptsächlich daran, dass ich die WebStorm-Lizenz über viele Jahre hinweg gekauft habe. Daher denke ich, dass seine IDE wirklich nicht so nützlich ist wie meine kostenpflichtige.

Darüber hinaus als „Chief Markdown Programmer von GitHub China“, der Freiheit und Open Source unterstützt. Das „WeChat Mini-Programm“ von WeChat führt dazu, dass sich das Web öffnet und schließt, und wir können unseren Code nicht mehr gerne teilen.

Wenn wir es aufgeben, wird die zukünftige Web-Welt besorgniserregend sein.

Okay, genug Unsinn:

Der Artikel ist zu lang und du willst ihn nicht lesen, du kannst dir einfach die Demo ansehen, haha:

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

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

Die drei Grundelemente von MINA in der Realität Welt

》 Hinter dem „WeChat Mini-Programm“ verbirgt sich ein Framework namens MINA. In den vorherigen Artikeln haben wir es fast vorgestellt. Lassen Sie uns nun die Pipeline vorstellen:

Wxml und wxss transformieren

Wenn wir WXML und WXSS ändern, müssen wir das Projekt neu kompilieren, um die Auswirkungen auf den Browser zu sehen. Zu diesem Zeitpunkt führt der Hintergrund einige Transformationsaktionen aus:

1.wcc, um WXML in ein GenrateFun umzuwandeln. Durch Ausführen dieser Methode wird ein virtueller Dom erstellt.
2.wxss konvertiert WXSS in CSS – dieses Punkt ist umstritten.

wcc und wxss können aus dem Anbieterverzeichnis abgerufen werden. Geben Sie help unter „WeChat Web Developer Tools“ ein und Sie erhalten Folgendes:

Führen Sie openVendor() aus und Sie erhalten die vier oben genannten Dateien wcss, wxss, WAService.js und WAWebview.js.

JS-Datei transformieren

Für JS-Dateien handelt es sich um einen Assemblerprozess. Das Folgende ist unsere app.js-Datei:

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

Nach der Konvertierung wird es:

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

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

Ich tue so, als wüsstest du das schon. Was ist los? Ich will es nicht und kann es auch nicht erklären~~. Dasselbe wie:

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

Wie es ersetzt oder an HTML angehängt wird, werde ich nicht erklären.

Wie funktioniert MINA?

Um eine Seite auszuführen, benötigen wir einen virtuellen Dom, also eine mit wcc konvertierte Funktion, wie zum Beispiel:

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

Dann fügen Sie ein Skript zu unserem HTML hinzu, z. B.

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

und dieses Ereignis wird gesendet. Ich habe WXWebview.js einfach aufgeteilt, um mehrere funktionale Komponenten zu erhalten:

1. define.js, hier wird die AMD-Modularität definiert

2. exparser.js , wird zum Konvertieren von WXML-Tags in HTML-Tags

3. exparser-behvaior.js verwendet und definiert einige Verhaltensweisen verschiedener Tags

4. mobile.js soll eine Event-Bibliothek sein, das scheint mir egal zu sein.

5. page.js, der Kerncode, in dem Seite und App definiert sind.

6. report.js, alles, was Sie sagen, kann als Beweismittel vor Gericht verwendet werden.

7. virtual_dom.js, eine virtuelle Dom-Implementierung in Kombination mit wcc, es sollte Component.css darin enthalten sein, oder es kann weui heißen

8. wa -wx.js, in dem verschiedene WeChat-APIs, WebView und Native definiert sind, steht in Konflikt mit dem WX unten.

9. wx.js, dasselbe wie oben, aber etwas anders.

10. wxJSBridge.js, Weixin JS Bridge
    

Also habe ich die oben genannten Komponenten verwendet, um verschiedene Standorte zu definieren. Wenn wir das benutzerdefinierte generierteFuncReady-Ereignis auslösen, übernimmt virtual_dom.js das Rendern:

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", {}));
  }
 })
})

Daher ist dies der Ort, der für die DOM-Initialisierung verantwortlich ist. Ja, Das hier erhaltene Dom-Ergebnis sieht so aus:

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

Und die WXML, die wir geschrieben haben, sieht so aus:

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

Natürlich wird die Ansicht in WX-Ansicht konvertiert, Text wird in WX-Text konvertiert usw. und so weiter. Diese Konvertierung wird in virtuellem dom.js aufgerufen und die aufgerufene Methode ist exparser.

Leider stecke ich bei der Dateninitialisierung fest~~ Es gibt zwei verschiedene Ereignissysteme, was etwas verwirrend ist. Eines davon ist WeixinJSBridge und das andere ist das Ereignissystem in der App-Engine. Es scheint, dass die beiden nicht miteinander verknüpft werden können. . .

Entwickelt mit WebStorm

Bevor wir es im Browser ausführen, müssen wir einfach einige Methoden nachahmen, wie zum Beispiel:

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