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

Open
MrRaindrop opened this Issue Jun 13, 2016 · 8 comments

Projects

None yet

8 participants

@MrRaindrop
MrRaindrop commented Jun 13, 2016 edited

项目中引入 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()
@MrRaindrop MrRaindrop changed the title from html5端weex接入 (advanced/integrate-to-html5) to 接入 weex-html5 (advanced/integrate-to-html5) Jun 13, 2016
@panwenhua

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

@taohaha
taohaha commented Nov 28, 2016

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

@emmanuelwang

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

@DoranYun
DoranYun commented Dec 9, 2016

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

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

@DoranYun
DoranYun commented Dec 9, 2016

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

@ljuns
ljuns commented Dec 22, 2016 edited

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

@lincoln310

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment