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

王者之路

发布于
2017-09-13

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

阅读 6.2k

3 个回答

zwwill_木羽

发布于
2017-09-13

✓ 已被采纳

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

发布于
2017-09-13

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

发布于
2017-09-13

更新于
2017-09-13

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>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进