Chrome 브라우저에서 실행되고 WebStorm을 사용하는 WeChat 애플릿

이 글에서는 주로 Chrome 브라우저에서 WeChat 애플릿을 실행하는 방법과 WebStorm을 사용하는 방법에 대해 소개합니다. 필요한 친구들은

"WeChat 애플릿"의 개발 프레임워크를 참고하여 체험해볼 수도 있습니다. - UI 프레임워크가 함께 제공됩니다. 그러나 문제는 그의 IDE 성능이 매우 좋지 않다는 것입니다. 사실 그것은 주로 제가 수년 동안 WebStorm 라이센스를 구입했기 때문입니다. 그러므로 나는 그의 IDE가 내 유료 IDE만큼 유용하지 않다고 생각합니다.

게다가 자유와 오픈소스를 지지하는 'GitHub China의 수석 마크다운 프로그래머'로서. 위챗의 '위챗 미니 프로그램'은 웹을 열고 닫는 데 앞장서고 있으며, 우리는 더 이상 코드를 즐겁게 공유할 수 없습니다.

이대로 놔두면 미래의 웹 세상이 불안해질 것입니다.

알겠습니다, 말도 안되는 소리는 그만하세요.

글이 너무 길어서 읽고 싶지 않으시면 데모만 보시면 됩니다. 하하:

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

미리보기: https://github.com/phodal/weapp-webdemo

실제 MINA의 세 가지 기본 요소 world

》 "위챗 미니 프로그램" 뒤에는 MINA라는 프레임워크가 있습니다. 이전 기사에서는 거의 소개했습니다. 이제 파이프라인을 소개하겠습니다.

wxml 및 wxss 변환

WXML 및 WXSS를 수정할 때 브라우저에 미치는 영향을 보려면 프로젝트를 다시 컴파일해야 합니다. 이때 배경은 몇 가지 변환 작업을 수행합니다.

wxml을 genrateFun으로 변환하는 1.wcc 이 메서드를 실행하면 가상 DOM이 생성됩니다.
2.wxss는 wxss를 CSS로 변환합니다. 점은 논란의 여지가 있다.

wcc 및 wxss는 공급업체 디렉토리에서 얻을 수 있습니다. "WeChat 웹 개발자 도구"에 help를 입력하면 다음이 표시됩니다.

openVendor()를 실행하면 wcss, wxss, WAService.js 및 WAWebview.js 위의 4개 파일을 얻을 수 있습니다.

js 파일 변환

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

html에 어떻게 대체되거나 추가되는지에 대해서는 설명하지 않겠습니다.

미나(MINA)는 어떻게 운영되나요?

페이지를 실행하려면 가상 돔, 즉 다음과 같이 wcc로 변환된 함수가 필요합니다.

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에

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

와 같은 스크립트를 추가하면 이 이벤트가 생성됩니다. 간단히 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와 결합된 가상 돔 구현으로, 그 안에 component.css가 있거나 weui라고 불릴 수 있습니다

8. wa -wx.js는 다양한 WeChat API, WebView, Native가 정의되어 있으며 아래 WX와 충돌합니다.

9. wx.js, 위와 동일하지만 약간 다릅니다.

10. wxJSBridge.js, Weixin JS Bridge
    

그래서 위의 컴포넌트를 사용하여 다양한 위치를 정의했습니다. 사용자 정의 generateFuncReady 이벤트를 트리거하면 virtual_dom.js가 Render:

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

를 인수합니다. 따라서 이곳이 DOM 초기화, Dom 결과를 담당하는 곳입니다. 여기서 얻은 내용은 다음과 같습니다:

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

그리고 우리가 작성한 wxml은 다음과 같습니다:

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

분명히 view는 wx-view로 변환되고, 텍스트는 wx-text 등으로 변환됩니다. 이 변환은 가상 dom.js에서 호출되며 호출되는 메서드는 exparser입니다.

안타깝게도 데이터 초기화가 막히네요~~. 이벤트 시스템이 두가지가 있어서 좀 헷갈리네요. 그 중 하나는 WeixinJSBridge이고 다른 하나는 앱 엔진의 이벤트 시스템입니다. 이 둘은 서로 얽힐 수 없는 것 같습니다. . .

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