Applet WeChat fonctionnant sur le navigateur Chrome et utilisant WebStorm

Cet article présente principalement les informations pertinentes sur l'exécution de l'applet WeChat sur le navigateur Chrome et l'utilisation de WebStorm. Les amis qui en ont besoin peuvent se référer au cadre de développement de

"Applet WeChat" et en faire l'expérience. - il est livré avec un framework d'interface utilisateur. Mais le problème est que son IDE fonctionne assez mal – en fait, c'est principalement parce que j'ai acheté la licence WebStorm pendant de nombreuses années. Par conséquent, je pense que son IDE n’est vraiment pas aussi utile que mon IDE payant.

De plus, en tant que « programmeur en chef Markdown de GitHub Chine » qui soutient la liberté et l'open source. Le « WeChat Mini Program » de WeChat entraîne l’ouverture et la fermeture du Web, et nous ne pouvons plus partager notre code avec plaisir.

Si on laisse faire, le futur monde du Web sera inquiétant.

D'accord, assez de bêtises :

L'article est trop long et vous ne voulez pas le lire, vous pouvez simplement regarder la démo haha :

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

Aperçu : https://github.com/phodal/weapp-webdemo

Les trois éléments de base de MINA dans le réel monde

》 Derrière le « WeChat Mini Program » se trouve un framework appelé MINA. Dans les articles précédents, nous l’avons presque présenté. Présentons maintenant le pipeline :

Transformer wxml et wxss

Lorsque nous modifions WXML et WXSS, nous devons recompiler le projet pour voir l'effet sur le navigateur. À ce moment-là, l'arrière-plan effectuera quelques actions de transformation :

1.wcc pour convertir wxml en genrateFun L'exécution de cette méthode obtiendra un dom virtuel
2.wxss convertira wxss en css - celui-ci. le point est discutable.

wcc et wxss peuvent être obtenus à partir du répertoire des fournisseurs. Tapez help sous "WeChat Web Developer Tools" et vous obtiendrez ce qui suit :

Exécutez openVendor() et vous obtiendrez les quatre fichiers ci-dessus wcss, wxss, WAService.js et WAWebview.js.

Transformer le fichier js

Pour les fichiers js, il s'agit d'un processus d'assemblage. Voici notre fichier app.js :

<.>

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

Après la conversion, cela deviendra :

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

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

Je fais comme si vous le saviez déjà. Qu'est-ce qu'il y a, de toute façon, ? Je ne veux pas et je ne peux pas l'expliquer ~~. Identique à :

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

Quant à la façon dont il est remplacé ou ajouté au HTML, je ne l'expliquerai pas.

Comment fonctionne MINA ?

Pour exécuter une Page, nous avons besoin d'un dom virtuel, c'est-à-dire une fonction convertie avec wcc, telle que :

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

Ajoutez ensuite un script à notre html, tel que

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

et cet événement sera envoyé. J'ai simplement divisé WXWebview.js pour obtenir plusieurs composants fonctionnels :

1. define.js, c'est là que la modularité AMD est définie

2. exparser.js , utilisé pour convertir les balises WXML en balises HTML

3. exparser-behvaior.js, définit certains comportements des différentes balises

4. mobile.js, est censé être une bibliothèque d'événements, je m'en fiche.

5. page.js, le code principal, où Page et App sont définis.

6. report.js, tout ce que vous dites peut être utilisé comme preuve devant le tribunal.

7. virtual_dom.js, une implémentation de dom virtuel combinée avec wcc, il devrait y avoir composant.css dedans, ou il peut s'appeler weui

8. wa -wx.js, où diverses API WeChat, WebView et Native sont définies, est en conflit avec le WX ci-dessous.

9. wx.js, identique à ci-dessus, mais légèrement différent.

10. wxJSBridge.js, Weixin JS Bridge

    
    

J'ai donc utilisé les composants ci-dessus pour définir différents emplacements. Lorsque nous déclenchons l'événement generateFuncReady personnalisé, virtual_dom.js prendra en charge le rendu :

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

C'est donc l'endroit responsable de l'initialisation du DOM Oui, le résultat Dom obtenu ici est comme ceci :

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

Et le wxml que nous avons écrit est comme ceci :

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

Évidemment, la vue sera convertie en wx-view, le texte sera converti en wx-text, etc., et ainsi de suite. Cette conversion est appelée dans virtual dom.js, et la méthode appelée est exparser.

Malheureusement, je suis bloqué sur l'initialisation des données~~ Il existe deux systèmes d'événements différents, ce qui est un peu déroutant. L'un d'eux est : WeixinJSBridge, et l'autre est le système d'événements du moteur d'application. Les deux semblent incapables d'interagir les uns avec les autres. . .

Développé avec WebStorm

Avant d'exécuter sur le navigateur, nous devons simplement nous moquer de certaines méthodes, telles que :

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