New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
8 participants
@MrRaindrop
Member

MrRaindrop commented Jun 13, 2016

新版中文网站及文档已经上线,请访问 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()

@MrRaindrop MrRaindrop changed the title from html5端weex接入 (advanced/integrate-to-html5) to 接入 weex-html5 (advanced/integrate-to-html5) Jun 13, 2016

@panwenhua

This comment has been minimized.

Show comment
Hide comment
@panwenhua

panwenhua Nov 24, 2016

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

panwenhua commented Nov 24, 2016

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

@taohaha

This comment has been minimized.

Show comment
Hide comment
@taohaha

taohaha Nov 28, 2016

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

taohaha commented Nov 28, 2016

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

@emmanuelwang

This comment has been minimized.

Show comment
Hide comment
@emmanuelwang

emmanuelwang Dec 6, 2016

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

emmanuelwang commented Dec 6, 2016

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

@DoranYun

This comment has been minimized.

Show comment
Hide comment
@DoranYun

DoranYun Dec 9, 2016

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

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

DoranYun commented Dec 9, 2016

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

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

@DoranYun

This comment has been minimized.

Show comment
Hide comment
@DoranYun

DoranYun Dec 9, 2016

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

DoranYun commented Dec 9, 2016

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

@ljuns

This comment has been minimized.

Show comment
Hide comment
@ljuns

ljuns Dec 22, 2016

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

ljuns commented Dec 22, 2016

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

@lincoln310

This comment has been minimized.

Show comment
Hide comment
@lincoln310

lincoln310 Jan 12, 2017

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

lincoln310 commented Jan 12, 2017

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

@chenxi2015

This comment has been minimized.

Show comment
Hide comment
@DoranYun

This comment has been minimized.

Show comment
Hide comment
@DoranYun

DoranYun Jan 20, 2017

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

DoranYun commented Jan 20, 2017

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

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