docs__myblog__frame__applet_01.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[59],{"5B6p":function(e,l,n){e.exports=n.p+"static/\u5c0f\u7a0b\u5e8f\u67b6\u6784.5c603d2f.png"},"7uu+":function(e,l,n){e.exports=n.p+"static/\u6d41\u7a0b\u56fe.446fd892.png"},"Da1+":function(e,l,n){"use strict";n.r(l);var a=n("q1tI"),t=n.n(a),c=n("dEAq"),r=n("H1Ra"),m=t.a.memo((e=>{e.demos;return t.a.createElement(t.a.Fragment,null,t.a.createElement("div",{className:"markdown"},t.a.createElement("h2",{id:"\u5c0f\u7a0b\u5e8f\u5e95\u5c42\u67b6\u6784"},t.a.createElement(c["AnchorLink"],{to:"#\u5c0f\u7a0b\u5e8f\u5e95\u5c42\u67b6\u6784","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u5c0f\u7a0b\u5e8f\u5e95\u5c42\u67b6\u6784"),t.a.createElement("p",null,t.a.createElement("strong",null,"\u9996\u5148\u6211\u4eec\u770b\u770b\u5c0f\u7a0b\u5e8f\u4ee3\u7801\u7684\u7ec4\u6210\u90e8\u5206")),t.a.createElement("p",null,"js\uff08\u5f00\u53d1\u903b\u8f91\u4ee3\u7801\uff09=\u300bjs =>v8 \u89e3\u6790"),t.a.createElement("p",null,"wxss\uff08\u63a7\u5236\u5c0f\u7a0b\u5e8f\u6837\u5f0f\uff09=\u300bcss\uff08\u6d4f\u89c8\u5668\u6e32\u67d3\uff09=\u300bcss"),t.a.createElement("p",null,"wxml (xml \u63a7\u5236\u6e32\u67d3\u5c42\u5c55\u793a)=\u300bhtml\uff08\u6d4f\u89c8\u5668\u6e32\u67d3\uff09=>dom"),t.a.createElement("p",null,t.a.createElement("strong",null,"wxss wxml \u662f\u81ea\u5df1\u5b9e\u73b0\u4e86\u4e00\u5957\u6e32\u67d3\u673a\u5236\u8fd8\u662f\u662f\u7528\u4e86\u9884\u7f16\u8bd1\uff1f")),t.a.createElement("p",null,"\u6700\u7ec8\u662f\u662f\u7528\u4e86\u9884\u7f16\u8bd1"),t.a.createElement("p",null,"js \u6d4f\u89c8\u5668=\u300b\u5355\u7ebf\u7a0b \u56de\u963b\u585e"),t.a.createElement("h3",{id:"\u5c0f\u7a0b\u5e8f\u7684\u57fa\u672c\u67b6\u6784"},t.a.createElement(c["AnchorLink"],{to:"#\u5c0f\u7a0b\u5e8f\u7684\u57fa\u672c\u67b6\u6784","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u5c0f\u7a0b\u5e8f\u7684\u57fa\u672c\u67b6\u6784"),t.a.createElement("p",null,"\u56e0\u4e3a\u6d4f\u89c8\u5668\u662f",t.a.createElement("strong",null,"\u5355\u7ebf\u7a0b"),"\u7684\uff0c\u540c\u65f6\u8fd0\u884c css,html\uff0cjs \u53ef\u80fd\u56de\u963b\u585e\uff0c\u6240\u4ee5\u5c0f\u7a0b\u5e8f\u5bf9\u8fd9\u4e00\u90e8\u5206\u8fdb\u884c\u4e86\u4f18\u5316 \u91c7\u7528\u4e86",t.a.createElement("strong",null,"\u53cc\u7ebf\u7a0b\u67b6\u6784")),t.a.createElement("p",null,"\u5c0f\u7a0b\u5e8f\u4e3b\u8981\u5206\u4e3a\u903b\u8f91\u5c42(js)\u548c\u6e32\u67d3\u5c42\uff08wxml\u3001wxss\uff09,\u8fd9\u4e24\u8005\u4e4b\u95f4\u901a\u8fc7",t.a.createElement("code",null,"JSBridge"),"\u6765\u901a\u4fe1\uff0c\u8fd8\u6709\u5c31\u662f\u4ed6\u4eec\u7684\u539f\u751f\u90e8\u5206"),t.a.createElement("img",{src:n("5B6p")}),t.a.createElement("p",null,"\u4ed6\u4eec\u4e4b\u95f4\u901a\u8fc7 event \u548c data \u6765\u901a\u4fe1\u3002\u901a\u4fe1\u662f\u6709\u5fae\u4fe1\u5ba2\u6237\u7aef\uff08native\uff09\u505a\u7684\u4e00\u5c42\u4e2d\u8f6c\uff1b"),t.a.createElement("p",null,"\u7136\u540e\u4e5f\u53ef\u4ee5\u901a\u8fc7",t.a.createElement("code",null,"jsBridge"),"\u6765\u8c03\u7528\u539f\u751f\u7684 api\uff0c\u6bd4\u5982\u4ec0\u4e48\u76f8\u673a\u3001\u626b\u7801\u7b49\u529f\u80fd\u3002"),t.a.createElement("p",null,t.a.createElement("code",null,"setData"),"\u5c31\u662f\u628a\u6570\u636e\u901a\u8fc7\u6d88\u606f\u673a\u5236\u4f20\u8fc7\u53bb\u6765\u6539\u53d8\u89c6\u56fe"),t.a.createElement("p",null,"\u8fd9\u4e2a\u89c6\u56fe\u5c42\uff0c\u6700\u540e\u6211\u4eec\u6253\u5305\u51fa\u6765\u7684\u4ee3\u7801\uff0c\u5c31\u662f html \u548c css\uff0c\u5728\u8fd9\u91cc\u9762\u8fd0\u884c\uff0c\u89c6\u56fe\u5c42\u76ee\u524d\u4f7f\u7528 ",t.a.createElement("code",null,"WebView")," \u4f5c\u4e3a\u6e32\u67d3\u8f7d\u4f53\uff0c\u4f60\u53ef\u4ee5\u5c1d\u8bd5\u5199 span \u6807\u7b7e\u6216\u8005 div \u8fd9\u90fd\u662f\u53ef\u4ee5\u7684\u3002"),t.a.createElement("p",null,"\u903b\u8f91\u5c42\u662f\u7531\u72ec\u7acb\u7684 ",t.a.createElement("code",null,"JsCore")," \u4f5c\u4e3a js \u7684\u8fd0\u884c\u73af\u5883,\u6240\u4ee5\u4ed6\u548c\u6d4f\u89c8\u5668\u4e0d\u4e00\u6837\uff0c\u53ea\u6709\u4e00\u4e9b js \u5bf9\u5e94\u7684\u65b9\u6cd5\uff0c\u4e0d\u80fd\u76f4\u63a5\u64cd\u4f5c dom \u548c\u83b7\u53d6 dom\uff0c\u4e2d\u95f4\u90fd\u9700\u8981\u901a\u4fe1\u8fd9\u4e00\u5c42\u4e2d\u8f6c\uff0c\u5728\u67b6\u6784\u4e0a\uff0cWebView \u548c JavascriptCore \u90fd\u662f\u72ec\u7acb\u7684\u6a21\u5757\uff0c\u5e76\u4e0d\u5177\u5907\u6570\u636e\u76f4\u63a5\u5171\u4eab\u7684\u901a\u9053\u3002"),t.a.createElement("p",null,"\u5f53\u524d\uff0c\u89c6\u56fe\u5c42\u548c\u903b\u8f91\u5c42\u7684\u6570\u636e\u4f20\u8f93\uff0c\u5b9e\u9645\u4e0a\u901a\u8fc7\u4e24\u8fb9\u63d0\u4f9b\u7684 ",t.a.createElement("code",null,"evaluateJavascript")," \u6240\u5b9e\u73b0\u3002"),t.a.createElement("p",null,"\u5373\u7528\u6237\u4f20\u8f93\u7684\u6570\u636e\uff0c\u9700\u8981\u5c06\u5176\u8f6c\u6362\u4e3a\u5b57\u7b26\u4e32\u5f62\u5f0f\u4f20\u9012\uff0c\u540c\u65f6\u628a\u8f6c\u6362\u540e\u7684\u6570\u636e\u5185\u5bb9\u62fc\u63a5\u6210\u4e00\u4efd JS \u811a\u672c\uff0c\u518d\u901a\u8fc7\u6267\u884c JS \u811a\u672c\u7684\u5f62\u5f0f\u4f20\u9012\u5230\u4e24\u8fb9\u72ec\u7acb\u73af\u5883\u3002"),t.a.createElement("p",null,"\u7531\u4e8e\u8fd9\u4e4b\u95f4\u4ed6\u4eec\u662f\u5f7c\u6b64\u72ec\u7acb\u7684\uff0c\u662f\u57fa\u4e8e\u6d88\u606f\u9a71\u52a8\u6765\u6e32\u67d3\u7684\uff0c\u6240\u4ee5\u4e0d\u4f1a\u963b\u585e\u9875\u9762\uff1b"),t.a.createElement("p",null,"\u6240\u4ee5\u8fd9\u5c31\u4e0d\u4f1a\u9020\u6210\u6e32\u67d3\u7684\u963b\u585e\uff0c\u6211\u7684\u6e32\u67d3\u4e0d\u4f1a\u5f71\u54cd\u4f60\u7684 js \u903b\u8f91\uff0cjs \u7684\u6267\u884c\u4e5f\u4e0d\u4f1a\u67f1\u585e\u6e32\u67d3\u7684\u8fc7\u7a0b\uff1b"),t.a.createElement("p",null,"\u6bd4\u5982\u4f60\u5728\u53d1\u9001\u4e00\u4e9b\u8bf7\u6c42\u7684\u65f6\u5019\uff0c\u8fd9\u79cd\u4e00\u822c\u662f\u7ecf\u7531 native \u8f6c\u53d1\uff1b"),t.a.createElement("img",{src:n("sQu7")}),t.a.createElement("h3",{id:"\u67e5\u770b\u5c0f\u7a0b\u5e8f\u8fd0\u884c"},t.a.createElement(c["AnchorLink"],{to:"#\u67e5\u770b\u5c0f\u7a0b\u5e8f\u8fd0\u884c","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u67e5\u770b\u5c0f\u7a0b\u5e8f\u8fd0\u884c"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("p",null,"\u6253\u5f00\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u8c03\u8bd5\u5668"),t.a.createElement("p",null,"\u5fae\u4fe1\u5f00\u53d1\u8005\u5de5\u5177===\u300b\u5de6\u4e0a\u89d2\u7684\u8c03\u8bd5===\u300b\u8c03\u8bd5\u5fae\u4fe1\u5f00\u53d1\u8005\u5de5\u5177"),t.a.createElement("img",{src:n("hfpr")}),t.a.createElement("p",null,"\u53ef\u4ee5\u770b\u5230\u4e0a\u8ff0\u5c0f\u7a0b\u5e8f\u8fd0\u884c\u754c\u9762\u5d4c\u5957\u7684\u5176\u5b9e\u662f\u4e00\u4e2a",t.a.createElement("code",null,"webview"),",\u5728\u672c\u5730\u8c03\u8bd5\u73af\u5883\u4e2d\uff0cwenbiew \u91cc\u9762\u5d4c\u5957\u7684\u662f iframe,\u4f46\u662f\u5728\u771f\u673a\u7ec3\u8fd0\u884c\u7684\u65f6\u5019\uff0c\u91cc\u9762\u5d4c\u5957\u7684\u662f webview"),t.a.createElement("p",null,"\u8c03\u8bd5\u4ee3\u7801\uff1a"),t.a.createElement(r["a"],{code:"document.getElementsByTagName('webview')[0].showDevTools(true, null);",lang:"js"}),t.a.createElement("p",null,"\u903b\u8f91\u5c42\u67e5\u770b\uff1a"),t.a.createElement(r["a"],{code:"//\u76f4\u63a5\u5728\u5c0f\u7a0b\u5e8f\u9879\u76ee\u7684\u8c03\u8bd5\u90a3\u4e00\u680f\u91cc\u9762\u76f4\u63a5\u8f93\u51fa\u4e0b\u9762\u7684\u4ee3\u7801\ndocument;",lang:"js"}),t.a.createElement("p",null,"\u5c0f\u7a0b\u5e8f\u91cc\u9762\u7684\u6bcf\u4e00\u4e2a\u9875\u9762\u5c31\u662f\u4e00\u4e2a webview\uff0c\u903b\u8f91\u5c42 js \u53ea\u6709\u4e00\u4efd\uff08\u88c5\u8f7d\u6240\u6709\u9875\u9762\u7684\u903b\u8f91 js\uff09")),t.a.createElement("li",null,t.a.createElement("p",null,"\u5c0f\u7a0b\u5e8f\u9650\u5236"),t.a.createElement("p",null,"\u5c0f\u7a0b\u5e8f\u521a\u51fa\u6765\u65f6\u5019\u6709\u9650\u5236 5 \u4e2a\u5c42\u7ea7\uff0c\u8fd9\u662f\u56e0\u4e3a\u53ea\u7ef4\u62a4\u4e86 5 \u5c42\u3002\u73b0\u5728\u662f 10 \u5c42")),t.a.createElement("li",null,t.a.createElement("p",null,"\u57fa\u7840\u5e93"),t.a.createElement("img",{src:n("OAyQ")}),t.a.createElement("p",null,"\u53ef\u4ee5\u76f4\u63a5\u5728\u8c03\u8bd5\u6846\u91cc\u9762\u6267\u884c\u4e0a\u8ff0\u65b9\u6cd5"),t.a.createElement(r["a"],{code:"//\u57fa\u7840\u5e93\uff08\u5bf9\u4e8e\u5e95\u5c42\u8fd0\u884c\u65f6\u7684\u5c01\u88c5\u3001\u63d0\u4f9b\u4e8b\u4ef6\u3001\u6570\u636e\u53d8\u66f4\u3001\u901a\u4fe1\u3001\u57fa\u7840\u51fd\u6570\uff09\nopenVedor(); //\u53ef\u4ee5\u76f4\u63a5\u6253\u5f00\u57fa\u7840\u5e93\u7684\u6587\u4ef6\u5939",lang:"js"}),t.a.createElement("p",null,"\u91cc\u9762\u6709",t.a.createElement("code",null,"wcc"),"\u548c",t.a.createElement("code",null,"wcsc"),"\u6587\u4ef6"),t.a.createElement("img",{src:n("mtS0")}),t.a.createElement("ul",null,t.a.createElement("li",null,"wcc: wxml compiler=>wxml \u7f16\u8f91\u5668=\u300bjs",t.a.createElement("ol",null,t.a.createElement("li",null,"\u521d\u59cb\u5316\uff0c\u6267\u884c js\uff0c\u751f\u6210\u6784\u5efa\u865a\u62df dom \u7684\u51fd\u6570"),t.a.createElement("li",null,"\u6570\u636e\u4f20\u9012\u7ed9 \u865a\u62df dom \u7684\u51fd\u6570=\u300bvDom \u63cf\u8ff0"),t.a.createElement("li",null,"vDom \u63cf\u8ff0=\u300bexparser =>\u89e3\u6790=\u300b\u6784\u5efa\u771f\u5b9e Dom"),t.a.createElement("li",null,"\u6570\u636e\u53d8\u66f4 2-3=\u300bdiff=>\u6e32\u67d3"))),t.a.createElement("li",null,"wcsc: wxss Stylesheet Compiler =>wxss \u7f16\u8f91\u5668=\u300bjs",t.a.createElement("ol",null,t.a.createElement("li",null,"wxss ==>js (\u628a rpx \u5355\u4f4d\u5904\u7406\uff0c\u5904\u7406\u6210\u51fd\u6570)"),t.a.createElement("li",null,"\u83b7\u53d6\u624b\u673a\u7269\u7406\u53ca\u50cf\u7d20\u5206\u8fa8\u529b\u6765\u8ba1\u7b97\u5e94\u8be5\u591a\u5c11\uff0c"),t.a.createElement("li",null,"\u751f\u6210\u65b0\u7684 style \u63d2\u5165")))),t.a.createElement("p",null,"\u57fa\u7840\u5e93==>wxappUnpacker==>\u7834\u89e3.wxvpkg \u6587\u4ef6\uff0c\u67e5\u770b\u6e90\u7801(\u6bd4\u8f83\u96be\u8bfb)"))),t.a.createElement("h3",{id:"\u6e90\u7801\u89e3\u6790"},t.a.createElement(c["AnchorLink"],{to:"#\u6e90\u7801\u89e3\u6790","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u6e90\u7801\u89e3\u6790"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("p",null,"\u89c6\u56fe\u5c42 WAWebview.js"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"Foundation")," \u57fa\u7840\u6a21\u5757 \u63d0\u4f9b\u73af\u5883\u53d8\u91cf",t.a.createElement("code",null,"env")," ",t.a.createElement("code",null,"isService")," ",t.a.createElement("code",null,"isWebview")," ",t.a.createElement("code",null,"eventEmit")," ",t.a.createElement("code",null,"jsbridge")," ",t.a.createElement("code",null,"ready\u76d1\u542c")," \u914d\u7f6e")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"WeixinJSBridge")," \u6d88\u606f\u901a\u4fe1\u673a\u5236")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"NativeBuffer")," \u8f6c\u6362\u6570\u636e\u683c\u5f0f")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"Reporter")," \u65e5\u5fd7\u7cfb\u7edf")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"exparser")," \u7ec4\u4ef6\u7cfb\u7edf"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("code",null,"shadomDOM")," (webComponent \u89c4\u8303 \u4f8b\u5b50\uff1awx-element)"),t.a.createElement("li",null,"\u63d0\u4f9b\u53cb\u597d\u4ea4\u4e92\u7684\u7ec4\u4ef6\uff08\u627f\u63a5\u539f\u751f\uff09"),t.a.createElement("li",null,"video \u539f\u751f\u7684\u7ec4\u4ef6 \u4e8b\u4ef6\u7cfb\u7edf"))),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"__virtualDOM__")," \u865a\u62df dom")))),t.a.createElement("li",null,t.a.createElement("p",null,"\u903b\u8f91\u5c42\u5f15\u64ce WAService.js"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"Foundation")," \u57fa\u7840\u6a21\u5757 \u63d0\u4f9b\u73af\u5883\u53d8\u91cf",t.a.createElement("code",null,"env")," ",t.a.createElement("code",null,"isService")," ",t.a.createElement("code",null,"isWebview")," ",t.a.createElement("code",null,"eventEmit")," ",t.a.createElement("code",null,"jsbridge")," ",t.a.createElement("code",null,"ready\u76d1\u542c")," \u914d\u7f6e")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"WeixinJSBridge")," \u6d88\u606f\u901a\u4fe1\u673a\u5236")),t.a.createElement("li",null,t.a.createElement("p",null,"\u8def\u7531\u7ba1\u7406")),t.a.createElement("li",null,t.a.createElement("p",null,"\u751f\u547d\u5468\u671f\u7ba1\u7406")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("code",null,"__subContextEngine__"),": \u63d0\u4f9b ",t.a.createElement("code",null,"App"),"\u3001",t.a.createElement("code",null,"Page"),"\u3001",t.a.createElement("code",null,"Component"),"\u3001",t.a.createElement("code",null,"Behavior"),"\u3001",t.a.createElement("code",null,"getApp"),"\u3001",t.a.createElement("code",null,"getCurrentPages")," \u7b49\u65b9\u6cd5"))))),t.a.createElement("h3",{id:"\u5c0f\u7a0b\u5e8f\u521d\u59cb\u5316"},t.a.createElement(c["AnchorLink"],{to:"#\u5c0f\u7a0b\u5e8f\u521d\u59cb\u5316","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u5c0f\u7a0b\u5e8f\u521d\u59cb\u5316"),t.a.createElement("h4",{id:"\u6e32\u67d3\u5c42"},t.a.createElement(c["AnchorLink"],{to:"#\u6e32\u67d3\u5c42","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u6e32\u67d3\u5c42"),t.a.createElement("ol",null,t.a.createElement("li",null,"\u521d\u59cb\u5316",t.a.createElement("code",null,"_webviewId_"),"\u3001",t.a.createElement("code",null,"wxCode_")),t.a.createElement("li",null,"\u52a0\u8f7d\u751f\u6210\u6e32\u67d3\u5668\u7684\u4ee3\u7801(wxml=>js)"),t.a.createElement("li",null,"\u52a0\u8f7d\u6267\u884c wxss=>js()=>\u751f\u6210 css"),t.a.createElement("li",null,"\u521d\u59cb\u5316\u9875\u9762\u914d\u7f6e"),t.a.createElement("li",null,"$gwx=>generateFunc(\u6e32\u67d3\u5668==>VDOM)\uff0c\u9700\u8981\u6570\u636e"),t.a.createElement("li",null)),t.a.createElement(r["a"],{code:"var generateFunc = $gwx(decodeName);\nif (generateFunc) {\n  var CE = window.CustomEvent;\n  document.dispatchEvent(\n    new CE('generateFuncReady', {\n      detail: {\n        generateFunc: generateFunc,\n      },\n    }),\n  );\n} else {\n  document.body.innerText = decodeName + ' not found';\n  console.error(decodeName + ' not found');\n}",lang:"js"}),t.a.createElement("p",null,t.a.createElement("code",null,"generateFuncReady")," \u57fa\u7840\u5e93\u7684\u65b9\u6cd5"),t.a.createElement(r["a"],{code:"//\u57fa\u7840\u5e93\u6e90\u4ee3\u7801\n/*\n1. \u5b9a\u4e49generateFuncReady\uff0c\u6e32\u67d3\u6210\u5df2\u7ecf\u83b7\u53d6\u5230wxml\uff0c\u901a\u8fc7$gwx\u7f16\u8bd1\u6210\u751f\u6210\u51fd\u6570\n2. webView\u6e32\u67d3\u5c42\u89e6\u53d1dispatch(new Custom('generateFuncReady',detail:$gwx('...')))\n*/\n(generateFuncReady = function() {\n  setTimeout(function() {\n    !(function() {\n      var e = arguments;\n      //\u5224\u65ad\u662f\u5426WeixinJSBridge\u51c6\u5907\u5b8c\u6210\uff0c\n      r(function() {\n        //\u89e6\u53d1WeixinJSBridge\n        WeixinJSBridge.publish.apply(WeixinJSBridge, o(e));\n      });\n    })('GenerateFuncReady', {});\n  }, 20);\n}),\n  document.addEventListener('generateFuncReady', generateFuncReady);",lang:"js"}),t.a.createElement("ol",{start:7},t.a.createElement("li",null,"generateFuncReady ==>generateFunc\uff08\uff09==>VDOM"),t.a.createElement("li",null,"\u5982\u679c\uff0c\u8fd9\u4e2d\u95f4\u518d\u53d1\u751f\u4ec0\u4e48\u53d8\u5316\uff0c\u89e6\u53d1\u4e86 setData\uff0c\u8fd9\u4e2a\u65f6\u5019\u5c31\u4f1a\u91cd\u65b0\u8c03\u7528\u6211\u4eec\u521a\u521a\u7684\u865a\u62df dom \u751f\u6210\u65b9\u6cd5\uff0c\u7136\u540e\u5728\u5bf9\u5e94\u7684 webview \u5c42\u7684\u57fa\u7840\u4ee3\u7801\u6765\u89e6\u53d1 dom diff \u7684\u8fc7\u7a0b")),t.a.createElement("p",null,t.a.createElement("strong",null,"\u6d41\u7a0b")),t.a.createElement("img",{src:n("7uu+")}),t.a.createElement("h4",{id:"\u903b\u8f91\u5c42"},t.a.createElement(c["AnchorLink"],{to:"#\u903b\u8f91\u5c42","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u903b\u8f91\u5c42"),t.a.createElement("ol",null,t.a.createElement("li",null,t.a.createElement("p",null,"\u521d\u59cb\u5316\u914d\u7f6e\u9879 \u9875\u9762\u914d\u7f6e \u5168\u5c40 \u8def\u7531")),t.a.createElement("li",null,t.a.createElement("p",null,"\u52a0\u8f7d\u903b\u8f91\u5c42\u57fa\u7840\u5e93 \uff08Page\u3001App\u3001Component\u3001wx.getSetting.wx.scanCode\uff09")),t.a.createElement("li",null,t.a.createElement("p",null,"\u52a0\u8f7d\u6240\u6709\u9875\u9762\u7684\u914d\u7f6e\u548c\u6e32\u67d3\u5668\u65b9\u6cd5"))),t.a.createElement("h2",{id:"\u73b0\u6709\u5c0f\u7a0b\u5e8f\u6846\u67b6\u5b9e\u73b0"},t.a.createElement(c["AnchorLink"],{to:"#\u73b0\u6709\u5c0f\u7a0b\u5e8f\u6846\u67b6\u5b9e\u73b0","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u73b0\u6709\u5c0f\u7a0b\u5e8f\u6846\u67b6\u5b9e\u73b0"),t.a.createElement("h3",{id:"\u4e3a\u4ec0\u4e48\u6709\u5c0f\u7a0b\u5e8f\u6846\u67b6"},t.a.createElement(c["AnchorLink"],{to:"#\u4e3a\u4ec0\u4e48\u6709\u5c0f\u7a0b\u5e8f\u6846\u67b6","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u4e3a\u4ec0\u4e48\u6709\u5c0f\u7a0b\u5e8f\u6846\u67b6"),t.a.createElement("p",null,"\u4e00\u5f00\u59cb\u5c0f\u7a0b\u5e8f\u624d\u51fa\u6765\u7684\u65f6\u5019\uff0c\u4ed6\u7684\u5b9a\u4e49\u4e86\u4e00\u4e2a\u4e0d\u8bba\u4e0d\u7c7b\u7684\u8bed\u6cd5\u3001\u539f\u751f\u5f00\u53d1\u5bf9\u4e8e\u9884\u7f16\u8bd1\u5668\u548c webpack \u90fd\u652f\u6301\u4e0d\u4f1a\uff0c\u5bf9\u4e8e\u5f00\u53d1\u6548\u7387\u548c\u5de5\u7a0b\u6784\u5efa\u6d41\u7a0b\u90fd\u4e0d\u65b9\u4fbf\uff1b\u8fd8\u6709\u5c31\u662f\u4ed6\u8fd9\u4e2a ide \u786e\u5b9e\u548c\u4e13\u4e1a\u7684 ide \u6bd4\u8d77\u6765\uff0c\u5b9e\u5728\u4e0d\u597d\u7528\uff1b"),t.a.createElement("p",null,"\u6240\u4ee5\u5c31\u51fa\u6765\u4e86\u7528 vue \u548c react \u76f8\u5173\u7684\u8bed\u6cd5\u6765\u5f00\u53d1\uff0c\u8fd9\u6837\u4e5f\u6ca1\u6709\u518d\u53bb\u641e\u4e2a\u65b0\u7684\u5199\u6cd5\uff0c\u8fd8\u6709\u5c31\u662f vue \u548c react \u5468\u8fb9\u7684\u751f\u6001\u4e5f\u6bd4\u8f83\u591a\uff0c\u6709\u5f88\u591a\u76f8\u5173\u7684\u5de5\u5177\u548c\u7b2c\u4e09\u65b9\u5e93\uff0c\u6240\u4ee5\u5c31\u884d\u751f\u4e86\u4e00\u7cfb\u5217\u6846\u67b6\uff1b"),t.a.createElement("p",null,"\u4e00\u5f00\u59cb\u5c0f\u7a0b\u5e8f\u624d\u51fa\u6765\u7684\u65f6\u5019\uff0c\u4ed6\u7684\u5b9a\u4e49\u4e86\u4e00\u4e2a\u4e0d\u8bba\u4e0d\u7c7b\u7684\u8bed\u6cd5\u3001\u539f\u751f\u5f00\u53d1\u5bf9\u4e8e\u9884\u7f16\u8bd1\u5668\u548c webpack \u90fd\u652f\u6301\u4e0d\u4f1a\uff0c\u5bf9\u4e8e\u5f00\u53d1\u6548\u7387\u548c\u5de5\u7a0b\u6784\u5efa\u6d41\u7a0b\u90fd\u4e0d\u65b9\u4fbf\uff1b\u8fd8\u6709\u5c31\u662f\u4ed6\u8fd9\u4e2a ide \u786e\u5b9e\u548c\u4e13\u4e1a\u7684 ide \u6bd4\u8d77\u6765\uff0c\u5b9e\u5728\u4e0d\u597d\u7528\uff1b"),t.a.createElement("p",null,"\u6240\u4ee5\u5c31\u51fa\u6765\u4e86\u7528 vue \u548c react \u76f8\u5173\u7684\u8bed\u6cd5\u6765\u5f00\u53d1\uff0c\u8fd9\u6837\u4e5f\u6ca1\u6709\u518d\u53bb\u641e\u4e2a\u65b0\u7684\u5199\u6cd5\uff0c\u8fd8\u6709\u5c31\u662f vue \u548c react \u5468\u8fb9\u7684\u751f\u6001\u4e5f\u6bd4\u8f83\u591a\uff0c\u6709\u5f88\u591a\u76f8\u5173\u7684\u5de5\u5177\u548c\u7b2c\u4e09\u65b9\u5e93\uff0c\u6240\u4ee5\u5c31\u884d\u751f\u4e86\u4e00\u7cfb\u5217\u6846\u67b6\uff1b"),t.a.createElement("h3",{id:"\u7f16\u8bd1\u65f6\u6846\u67b6"},t.a.createElement(c["AnchorLink"],{to:"#\u7f16\u8bd1\u65f6\u6846\u67b6","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u7f16\u8bd1\u65f6\u6846\u67b6"),t.a.createElement("p",null,"\u5fc5\u987b\u6309\u7167\u8bed\u6cd5\u89c4\u5219\u6765\u5f00\u53d1\uff0c\u56e0\u4e3a\u6a21\u677f\u9700\u8981\u89e3\u6790\u6210\u5fae\u4fe1\u7684\u4ee3\u7801\uff08wxml\u3001wxss\u3001js\uff09\uff0c\u6027\u80fd\u6700\u597d\uff0c\u4f46\u662f\u4e0d\u4f1a\u505a\u6027\u80fd\u4f18\u5316"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("strong",null,"wepy")),t.a.createElement("p",null,"\u8fd9\u4e2a\u662f\u6bd4\u8f83\u65e9\u7684\u6846\u67b6\u4e86\uff0c\u901a\u8fc7\u4e00\u4e9b\u9884\u7f16\u8bd1\u7684\u624b\u6bb5\u6765\u5f00\u53d1\uff0c\u4ed6\u7684\u98ce\u683c\u5199\u6cd5\u5c31\u548c",t.a.createElement("code",null,"vue"),"\u5dee\u4e0d\u591a\uff0c\u4e0d\u8fc7\u4ed6\u8fd9\u4e2a\u8fd8\u662f\u4e00\u79cd\u7f16\u8bd1\u7684\u8bed\u8a00\uff0c\u8fd9\u4e2a\u662f\u817e\u8baf\u65e9\u8d77\u5f00\u53d1\u7684\uff1b\u4ec0\u4e48\u662f\u9884\u7f16\u8bd1\u5462\uff0c\u5c31\u662f\u628a\u5bf9\u5e94\u7684\u8bed\u6cd5\u7f16\u8bd1\u6210",t.a.createElement("code",null,"AST"),"\u62bd\u8c61\u8bed\u6cd5\u6811\uff0c\u7136\u540e\u901a\u8fc7\u4e00\u4e9b\u89c4\u5219\u6765\u5904\u7406\u6210\u4e3a\u5c0f\u7a0b\u5e8f\u5bf9\u5e94\u7684\u8fd0\u884c\u7684\u8bed\u8a00")),t.a.createElement("li",null,t.a.createElement("p",null,t.a.createElement("strong",null,"uniapp")))),t.a.createElement("h3",{id:"\u534a\u7f16\u8bd1\u534a\u8fd0\u884c\u6846\u67b6"},t.a.createElement(c["AnchorLink"],{to:"#\u534a\u7f16\u8bd1\u534a\u8fd0\u884c\u6846\u67b6","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u534a\u7f16\u8bd1\u534a\u8fd0\u884c\u6846\u67b6"),t.a.createElement("p",null,"\u5927\u591a\u6570\u4eba\u7684\u9009\u62e9"),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("strong",null,"mpvue"))),t.a.createElement("p",null,"\u56e0\u4e3a taro \u548c wepy \u8fd9\u4e24\u4e2a\u6846\u67b6\u90fd\u662f\u91c7\u7528\u7684\u9759\u6001\u7f16\u8bd1\u7684\u65b9\u5f0f\uff0c\u628a\u6211\u4eec\u5199\u7684\u4ee3\u7801\uff0c\u89e3\u6790\u6210\u4e3a\u62bd\u8c61\u8bed\u6cd5\u6811\uff0c\u7136\u540e\u901a\u8fc7\u8bed\u6cd5\u5206\u6790\u628a\u4ee3\u7801\u8f6c\u6362\u4e3a\u53ef\u4ee5\u8fd0\u884c\u5728\u5c0f\u7a0b\u5e8f\u7684\u4ee3\u7801\u3002\u6bd4\u5982\u6211\u4eec\u5199 taro \u7684\u65f6\u5019\uff0c\u4ed6\u5c31\u628a\u4ee3\u7801\u7f16\u8bd1\u6210\u5c0f\u7a0b\u5e8f\u4ee3\u7801\uff0c\u7136\u540e\u628a render \u65b9\u6cd5\u91cc\u9762\u7684 jsx \u63d0\u53d6\u51fa\u6765\uff0c\u7f16\u8bd1\u6210\u5c0f\u7a0b\u5e8f\u7684\u9759\u6001\u6a21\u677f\uff0cjs \u5c31\u5904\u7406\u4e3a\u5c0f\u7a0b\u5e8f\u7684\u9875\u9762\u7684\u4e00\u4e9b\u751f\u547d\u5468\u671f\uff0c\u4f46\u662f\u5bf9\u4e8e js \u8fd9\u79cd\u8bed\u8a00\u672c\u6765\u5c31\u662f\u4e00\u79cd\u52a8\u6001\u8bed\u8a00\uff0c\u7f16\u8bd1\u6210\u4e3a\u9759\u6001\u7684\u65b9\u5f0f\uff0c\u5c31\u4f1a\u6709\u5f88\u591a\u7684\u5199\u6cd5\u548c\u4f7f\u7528\u9650\u5236\uff0c\u6bd5\u7adf\u8981\u5199\u5bf9\u5e94\u7684\u89e3\u6790\u89c4\u5219\u6765\u5904\u7406\u7279\u5b9a\u7684\u8bed\u6cd5\uff1b"),t.a.createElement("p",null,"\u6bd4\u5982\u8fd9\u79cd\u8bed\u6cd5\uff08\u5927\u81f4\u5199\u4e00\u4e0b\uff0c\u53ef\u4ee5\u6253\u5f00\u5bf9\u5e94\u7684\u8fd9\u4e2a\u6a21\u677f taro \u52a0\u6cb9\u9879\u76ee\u5c1d\u8bd5\u4e00\u4e0b\uff09\uff0ctaro \u5c31\u4e0d\u8ba4\uff1b\u6240\u4ee5\u5c31\u9700\u8981\u6362\u4e00\u79cd\u601d\u8def\u6765\u770b\u6574\u4e2a\u751f\u6001\uff0c\u6240\u4ee5\u5c31\u51fa\u6765\u4e86 mpvue\uff1b"),t.a.createElement("p",null,"\u8fd9\u4e2a\u5c31\u5b8c\u5168\u662f\u57fa\u4e8e vue \u7684\u8bed\u6cd5\u6765\u5f00\u53d1\uff0c\u5b83\u662f\u628a vue \u7684\u5e93\u76f4\u63a5\u7ed9 fork \u8fc7\u6765\u7684\uff0c\u5bf9\u4e8e\u6211\u4eec\u73b0\u5728\u5e02\u9762\u4e0a\u7684 vue \u548c react \u7684\u4e00\u4e2a\u5927\u7ed3\u6784\uff0c\u4e3b\u8981\u5c31\u662f\u5206\u6210 runtime \u8fd0\u884c\u65f6\uff0c\u8fd8\u6709\u5c31\u662f compilier \u7f16\u8bd1\u65f6\uff0c\u8fd0\u884c\u65f6\u5c31\u662f\u771f\u6b63\u7684\u6846\u67b6\u7684\u8fd0\u884c\u7684\u6d41\u7a0b\uff0c\u4f46\u662f\u771f\u6b63\u7684\u89c6\u56fe\u5c55\u73b0\u8fd8\u662f\u5728\u7aef\u4e0a\u9762\uff08\u53ef\u80fd\u662f web \u7aef\u3001\u5ba2\u6237\u7aef\u3001\u5c0f\u7a0b\u5e8f\u7aef\uff09\uff0c\u6240\u4ee5 mpvue \u5c31\u662f\u4fdd\u7559\u4e86 vue \u7684\u8fd0\u884c\u65f6\u7684\u673a\u5236\uff0c\u4f46\u662f\u5bf9\u4e8e\u6a21\u677f\u8fd9\u4e00\u5c42\u4ed6\u505a\u7684\u601d\u8def\u548c taro \u7684\u601d\u8def\u5927\u81f4\u76f8\u540c\uff0c\u53ef\u4ee5\u5927\u81f4",t.a.createElement(c["Link"],{to:"https://github.com/Meituan-Dianping/mpvue"},"\u770b\u4e00\u4e0b"),"\u4ed6\u7684\u6e90\u7801\u7ed3\u6784\uff1b\u589e\u52a0\u4e86\u7aef\u7684\u4ee3\u7801\u548c\u7f16\u8bd1\u7684\u4e00\u4e0b\u65b9\u5f0f\uff0c\u5927\u81f4\u770b\u4e00\u4e0b packages \u91cc\u9762\u7684\u51e0\u4e2a\u5305\uff0c\u8fd9\u51e0\u4e2a\u5c31\u662f\u5bf9\u5e94\u7684\u7f16\u8bd1 vue \u7684\u5355\u7ec4\u4ef6\uff08SFC\uff09\u5230\u5c0f\u7a0b\u5e8f\u7684\u7aef\u4ee3\u7801"),t.a.createElement("h3",{id:"\u8fd0\u884c\u65f6\u6846\u67b6"},t.a.createElement(c["AnchorLink"],{to:"#\u8fd0\u884c\u65f6\u6846\u67b6","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u8fd0\u884c\u65f6\u6846\u67b6"),t.a.createElement("p",null,"\u4e00\u822c\u4e0d\u63a8\u8350\u7528"),t.a.createElement("ol",null,t.a.createElement("li",null,"vue\u3001react(\u4fdd\u7559\u4e86\u81ea\u5df1\u7684\u8fd0\u884c\u65f6)\uff0c"),t.a.createElement("li",null,"path=>\u64cd\u4f5c dom(\u903b\u8f91\u5c42)"),t.a.createElement("li",null,"\u4e0b\u9762\u6846\u67b6\u63d0\u4f9b\u4e86 dom \u8fd0\u884c\u72b6\u6001\uff0cvar document=","{","}")),t.a.createElement("ul",null,t.a.createElement("li",null,t.a.createElement("strong",null,"remax")),t.a.createElement("li",null,t.a.createElement("strong",null,"taro-next")),t.a.createElement("li",null,t.a.createElement("strong",null,"kbone"))),t.a.createElement("ol",{start:4},t.a.createElement("li",null,"dom => \u63cf\u8ff0 => setData => \u6e32\u67d3\u57fa\u7840\u6a21\u677f")),t.a.createElement("h2",{id:"\u603b\u7ed3"},t.a.createElement(c["AnchorLink"],{to:"#\u603b\u7ed3","aria-hidden":"true",tabIndex:-1},t.a.createElement("span",{className:"icon icon-link"})),"\u603b\u7ed3"),t.a.createElement("p",null,"\u5c0f\u7a0b\u5e8f\u662f\u4e00\u4e2a\u6027\u80fd\u5f88\u4e0d\u9519\u7684",t.a.createElement("code",null,"hybrid"))))}));l["default"]=e=>{var l=t.a.useContext(c["context"]),n=l.demos;return t.a.useEffect((()=>{var l;null!==e&&void 0!==e&&null!==(l=e.location)&&void 0!==l&&l.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),t.a.createElement(m,{demos:n})}},OAyQ:function(e,l,n){e.exports=n.p+"static/wechathelp.496ddec9.png"},hfpr:function(e,l,n){e.exports=n.p+"static/\u6e32\u67d3\u5c42wechat.a259f035.png"},mtS0:function(e,l,n){e.exports=n.p+"static/wechat1.75ba5f3a.png"},sQu7:function(e,l,n){e.exports=n.p+"static/\u67b6\u6784.d425132e.png"}}]);