weex 生成的JSBundle 怎么在h5端解析啊,求帮忙啊

1,写好页面了,生成一个jsbundle,h5端怎么解析这个文件啊,weex官网也啥都不说,只说一句跟vue语法的api一样,网上也查不到,哪个大神知道说一句呗,给个文档也行啊

阅读 6.2k
3 个回答

app的运行基本的步骤大概是这样

  • weex文件分包打包成单个JSBundle文件
  • 发布到发包服务器上,通过热更新push到用户的客户端,交由【Weex SDK】执行解析
  • SDK中的【JS Framework】执行Bundle脚本生成Virtual DOM
  • Virtual DOM经由各端执行环境【Weex Runtime】解析翻译成执行指令
  • 【Native RenderEngine】接收到指令后执行渲染操作,作出渲染出完整的界面

至于H5端的理解很简单,同我们正常的vue工程解析基本是一致

我们的weex h5工程启动时有个“外壳”,里面有一个官方提供的web frameworker,可以解析此JSBundle文件,生产一个Virtual Dom,然后通过vue.runtime.js解析成DOM树,布局树,提供给浏览器重排重绘。

大致是这样。其他的你可以阅读我之前写的一篇体验的文章
https://segmentfault.com/a/11...

我记得weex-hackernews 好像是 native和web三端共用的。在github上搜索下,我就不放具体链接了。

jsbundle用于客户端运行,如果要用 web 的形式打开这个 weex 页面,需要新建一个 html 文件,把这个 jsbundle 文件以 script 脚本的方式引入。如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxx</title>
  <meta name="viewport" content="width=750,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no, email=no">
  <style>html, body { height: 100%; } body > div { height: 100%; } body {margin: 0}</style>
  <script type="text/javascript" src="/weex/static/jquery.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="/weex/jsbundle.js"></script>
</body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏