微信小程序架构分析 (上)

: "COMMAND_FROM_ASJS",

"appid": "touristappid",

"appname": "chat",

"apphash": 70475629,

"webviewID": 100000

}

{ 
"eventName": "appDataChange", 
"data": { 
  "data": { 
    "data": { 
      "hidden": true 
    } 
  }, 
  "options": { 
    "timestamp": 1475528706311 
  } 
}, 
"sdkName": "publish", 
"webviewIds": [ 
  0 
], 
"to": "backgroundjs", 
"comefrom": "webframe", 
"command": "COMMAND_FROM_ASJS", 
"appid": "touristappid", 
"appname": "chat", 
"apphash": 70475629, 
"webviewID": 100000 
}

6.后台(文件 dist/components/simulator/webviewbody.js) 接收到appDataChange 事宜数据后再将数据进内行单封装，最后转发给到 view 层。具体数据格局为：

7.view 层的 WeixinJSBridge 接收到后台的数据，如不雅 webviewID 匹配则将 data 与现有页面 data 归并，然后就是 virtual dom 模块进行 diff 和 apply 操作改变 dom。

小法度榜样模块间消息传递除了界面事宜和应用数据还包含触发原生办法、握手以及生命周期等类型，尽管处理对象和处理方法不合，大年夜体流程跟膳绫擎是一样的。

view 模块和 service 模块的 WeixinJSBridge 都应用了 postMessage 接口 (参考MDN 文档) 与后台通信，然则因为该接口无法直接与 nwjs 后台过程通信，所以开辟者对象会将 app/dist/contentscript/contentScript.js 文件做为contentScript 注入到 view 模块和 service 模块地点页面，contentScript.js 的代码供给了 message 消息到 chrome.runtime通信接口的转换。

微信开辟者对象扩大了 devtools 供给了 AppData 面板，开辟者可以修改琅绫擎数据然后直接看到 view 界面的变更效不雅。这里修改数据后 nwjs 会将消息发送给 service 层，之后产生的事就跟膳绫擎 4 5 6 步一样：service 传递消息给 nwjs，最后到 view 层。

设计理念分析

WeixinJSBridge.publish('PAGE_EVENT', data)

小法度榜样如许的分层设计显然是有意为之的，它的中心层完全控制了法度榜样对于界面进行的操作，同时对于传递的数据和响应时光也做到的监控。一方面法度榜样的行动受到了极大年夜限制，另一方面微信可以确保他们对于小法度榜样内容和体验有绝对的┞菲握。

4/5 首页上一页 2 3 4 5 下一页尾页

　　推荐阅读

　　微服务架构的两大解耦利器与最佳实践

本文将与大年夜家谈谈这个问题，以及微办事架构的两大年夜解耦利器设备中间和消息总线的最佳实践。 task2订阅“task1 done”的消息，收到消息后第一时光启动履行，停止后发一个&>>>详细阅读

本文标题：微信小程序架构分析 (上)

地址：http://www.17bianji.com/lsqh/35672.html

1/2 1