接入 weex-html5 (advanced/integrate-to-html5)

[MrRaindrop]

新版中文网站及文档已经上线，请访问 https://weex-project.io/cn/ ， 此处后续不再维护，谢谢理解。

项目中引入 html5 版 Weex

0.4

简介

Weex是一个跨平台可扩展的动态化移动框架，能够真正帮助开发者实现'一次开发，到处运行'。由Weex提供的相关工具进行打包好的bundle文件可以运行在android, ios以及web（这里我们也称之为html5）平台的渲染器上。Weex HTML5是一个专用于在移动端webview以及各种现代浏览器上渲染weex文件的渲染器。

获取 Weex HTML5

使用npm安装最新版本的Weex HTML5，并在你的项目中require进来。

从 npm 安装

请确保通过npm install或者npm update获取Weex HTML5的最新版本npm包。更多关于npm的信息情查阅npm官方网站。

npm install weex-html5

通过require引入weex-html5:

var weex = require('weex-html5')

注意: 介于Weex目前仍处于开源内测阶段，还没有完全开放源代码，因此weex-jsframework可能还没有在npm上发布。当前版本的weex-html5包含了weex-jsframework，你只需要require weex-html5即可暂时在web平台上运行weex代码。建议关注Weex的后续版本发布并做必要的引用方式调整。

初始化 Weex

你可以通过Weex暴露的API init来初始化一个Weex实例。这个方法需要传递一些配置信息已确定一些环境变量等信息，这些配置信息介绍如下：

• appId: Weex实例的id，可以是任意字符串或者数字，并注意不要重复.
• source: 请求的Weex bundle文件地址，或者Weex bundle文件代码本身，取决于下面的loader配置.
• loader: 加载器类型，用于加载weex bundle，值可以是'xhr', 'jsonp'或者'source'.
  • xhr: 通过XMLHttpRequest加载source(即weex bundle的url地址).
  • jsonp: 通过JSONP加载weex bundle.
  • source: 直接接受weex bundle的代码作为参数.
• rootId: root容器的id，默认容器id是'weex'.

以下是一个Weex初始化的示例:

function weexInit() {
  function getUrlParam (key) {
    var reg = new RegExp('[?|&]' + key + '=([^&]+)')
    var match = location.search.match(reg)
    return match && match[1]
  }

  var loader = getUrlParam('loader') || 'xhr'
  var page = getUrlParam('page')

  // 需要指定一个jsonp回调函数名称，如果没有则用默认值'weexJsonpCallback'
  var JSONP_CALLBACK_NAME = 'weexJsonpCallback'

  window.weex.init({
    jsonpCallback: JSONP_CALLBACK_NAME,
    appId: location.href,
    source: page,
    loader: loader,
    rootId: 'weex'
  })
}

weexInit()

[panwenhua]

我想知道html5端接入 weex的意义是什么？性能优化还是？
特别是我用的vue，还有必要接入weex吗？

[taohaha]

请问一下不是可以直接在在浏览器里运行吗？为什么还要下载html5?

[emmanuelwang]

我也很好奇，这个接入的意义是什么

[yundongbot]

@taohaha
不是需要下载 H5 ，而是需要在你的 H5 页面中加入 weex-html5 的 js 库，weex 的 JSBundle 需要 weex-html5 支持。

只需要写一份代码，可以在三端运行。

[yundongbot]

@panwenhua @emmanuelwang
一份代码三端运行，在集成了 WeexSDK 的 app 中页面是 native 的，在第三方 app 或 浏览器中也可以访问 H5版本。

[ljuns]

@DoranYun 在 .we 文件中 require('weex-html5') ，那么这个 .we 文件就是 h5 ，可以在三端运行，这样的意思么？

[lincoln310]

在pc的web效果是什么？还是说这里的web指的是移动端的web？

[chenxi2015]

http://www.baidu.com

[yundongbot]

新版中文网站及文档已经上线，请访问 https://weex-project.io/cn/ ， 此处后续不再维护，谢谢理解。