À propos de l'exécution de l'applet WeChat sur le navigateur Chrome et de l'utilisation de WebStorm-Développement de mini-programmes-php.cn

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 : http://weapp.phodal.com/

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

Derrière le « WeChat Mini Program », il exécute 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 dans le 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 () { }
})

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 &#39;enough, dom limit exceeded, you don\&#39;t do stupid things, do you?&#39;};return {tag:tag.substr(0,3)==&#39;wx-&#39;?tag:&#39;wx-&#39;+tag,attr:{},children:[]}}
   function _s(scope,env,key){return typeof(scope[key])!=&#39;undefined&#39;?scope[key]:env[key]}
   function _wl(tname){console.warn(&#39;template `&#39; + tname + &#39;` is being call recursively, will be stop.&#39;)}
   function _ai(i,p,e,me){var x=_grp(p,e,me);if(x)i.push(x);else{console.warn(&#39;path `&#39;+p+&#39;` not found from `&#39;+me+&#39;`&#39;)}}
   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;;}
//以下省略好多字。

Copier après la connexion

Ensuite, l'ajout d'un script à notre code HTML, tel que

document.dispatchEvent(new CustomEvent("generateFuncReady", {
  detail: {
   generateFunc: $gwx(&#39;index.wxml&#39;)
  }
 }))

Copier après la connexion

déclenchera cet événement. J'ai simplement divisé WXWebview.js pour obtenir plusieurs composants fonctionnels :

define.js, c'est là que la modularité AMD est définie
exparser.js , utilisé pour convertir les balises WXML en balises HTML
exparser-behvaior.js, définit certains comportements des différentes balises
mobile.js, est censé être une bibliothèque d'événements, je m'en fiche.
page.js, le code principal, où Page et App sont définis.
report.js, tout ce que vous dites peut être utilisé comme preuve devant le tribunal.
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
wa -wx.js, où diverses API WeChat, WebView et Native sont définies, est en conflit avec le WX ci-dessous.
wx.js, identique à ci-dessus, mais légèrement différent.
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", {}));
  }
 })
})

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

É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 dans le moteur de l'application. Il semble que les deux ne puissent pas être liés. . .

Développé avec WebStorm

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

window.webkit.messageHandlers.invokeHandler.postMessage
window.webkit.messageHandlers.publishHandler.postMessage
WeixinJSCore.publishHandler
WeixinJSCore..invokeHandler

Ensuite, modifiez certains contenus de config.json en __wxConfig, tels que :

__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": {}
}

Copier après la connexion

Comme le nom de notre application est ici, c'est hahahahahahahaha -ma famille est au Fujian.

Ensuite, introduisez chaque fichier js dans notre html, la la.

我们还需要一个自动化的glup脚本来watch wxml和wxss的修改，然后编译，如：

exec(&#39;./vendor/wcc -d &#39; + inputPath + &#39; > &#39; + outputFileName, function(err, stdout, stderr) {
   console.log(stdout);
   console.log(stderr);
});

Copier après la connexion

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！