# weex-html5

> Weex HTML5 Renderer

Latest version **0.4.1** (published 2016-10-19) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install weex-html5
pnpm add weex-html5
yarn add weex-html5
bun add weex-html5
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; popular repo.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2016-10-19 |
| First published | 2016-06-03 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18502 |
| Author | mr.raindrop |
| Maintainers | mr.raindrop |
| Keywords | weex, html5 |

## Links

- npm: https://www.npmjs.com/package/weex-html5
- Repository: https://github.com/alibaba/weex
- Homepage: https://alibaba.github.io/weex
- Issues: https://github.com/alibaba/weex/issues
- npm.io page: https://npm.io/package/weex-html5

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.4.1 (latest) — 2016-10-19
- 0.2.21 (ali227.2) — 2016-06-22
- 0.2.20 (ali227) — 2016-06-22
- 0.2.19 (beta) — 2016-06-21
- 0.3.2 — 2016-08-19
- 0.3.1 — 2016-08-16
- 0.3.1-beta.7 — 2016-08-16
- 0.3.1-beta.6 — 2016-08-16
- 0.3.1-beta.5 — 2016-08-16
- 0.3.1-beta.4 — 2016-08-16
- 0.3.1-beta.3 — 2016-08-16
- 0.3.1-beta.2 — 2016-08-15
- 0.3.1-beta.1 — 2016-08-15
- 0.3.1-beta — 2016-08-15
- 0.3.0 — 2016-08-12
- … 12 more at https://npm.io/package/weex-html5/versions

## README

## weex-html5

### Intro

Weex is a solution for developers to build a world-class projects on multiple platforms (include both native and web platforms) based on html-css-javascript liked domain specific language. Weex is focused on lightweight, extendable and high performance, and the finally destination -- write once, run anywhere.

The dot we code transformed to weex bundle can currently run on android, ios and web platform. Weex HTML5 is a renderer for weex bundle to run in a webview or a browser environment.

### Get Weex HTML5

Use npm to install the latest version of Weex HTML5, require it from your code in the commonJS way and use it as a npm package. You can import Weex HTML5 from the javascript file as in the node modules' path `node_modules/weex-html5/dist/weex.js`, as in this way you don't need to require weex-jsframework manually since it is already embeded.

#### Install from npm

Make sure you get the latest version by `npm install` or `npm update`. Want more info about npm cmd? Please checkout the [npm official site](https://docs.npmjs.com/).

```
npm install weex-html5
```

#### use weex-html5

require weex-html5.

```
require('weex-html5');
```

or you can import script from `dist/weex.js`

This `weex.js` includes both `weex-jsframework` and `weex-html5`.

```
 <script src="./node_modules/weex-html5/dist/weex"></script>
```

Then you can use `window.weex` in the page.

### DEMO

In the root path of `node_modules/weex-html5`, the index page can show a simple demo whos source code is in the path `node_modules/weex-html5/demo/index.we`.

### Initialize

Once you have imported the weex-html5 into your page, you can use `window.weex` to initialize weex through the API ``init``. This method takes a config object as argument to confirm the runtime infomation and environment. Following parameters can be set by this config object:

* ``appId``: app instance id, can be either a string or a number
* ``source``: the requested url of weex bundle, or the transformed code it self.
* ``loader``: loader to load the request weex bundle, whose value is from 'xhr' or 'jsonp' or 'source'.
  * ``xhr``: load the source (weex bundle url) by XHR
  * ``source``: the source parameter above should be a weex bundle content (transformed bundle).
* ``rootId``: id of the root element. Default value is 'weex'.

Here is a example to do the initialzation:

```
(function () {
  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') || 'demo/build/index.js'

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

### Initialize with multiple instances

```
var weexConfig = [{
  appId: 'weexCt1',
  source: '//your-source-provider/bundle1.js',
  loader: 'xhr',
  width: document.querySelector('#weexCt1').getBoundingClientRect().width,
  rootId: 'weexCt1'
}, {
  appId: 'weexCt2',
  source: '//your-source-provider/bundle2.js',
  loader: 'xhr',
  width: document.querySelector('#weexCt2').getBoundingClientRect().width,
  rootId: 'weexCt2'
}]

function weexInit() { 
  // Init with multiple config objects for multiple instances.
  window.weex.init(weexConfig)
}

weexInit()
```

### Extend

Weex is a extendable framework. You can extend the components and APIs by using the methods like `Weex.install`. Here are the ways to extend your components and APIs.

#### Extend the component

Let's say, you want to extend a component `MyComponent` from the base class `Weex.Componnet`. You can firstly create a installer with a `init` method to register your component, then require this module and install it by using `Weex.install`.

```
// MyComponent.js
module.exports = {
  init: function (Weex) {
    function MyComponent(data) {
      // ...
      Weex.Component.call(this, data)
    }
    Weex.Component.prototype = Object.create(MyComponent)
    Weex.Component.prototype.myMethod = function () {
      // ...
    }
    Weex.registerComponent('MyComponent', MyComponent)
  }
}

var weex = require('weex-html5')
weex.install(require('./MyComponent.js'))
```

#### Extend the API

```
// myAPIModule.js
var myAPIModule = {
  hello: function() {
    nativeLog('hello world!')
  }
}
myAPIModule._meta = {
  myAPIModule: [{
    name: 'hello',
    args: []
  }]
}
module.exports = {
  init: function (Weex) {
    Weex.registerApiModule('myAPIModule', myAPIModule, myAPIModule._meta)
  }
}

var weex = require('weex-html5')
weex.install(require('./myAPIModule.js'))
```

### MORE

* More info: [Weex official site](http://alibaba.github.io/weex/)
* Document : [Weex DOC](http://alibaba.github.io/weex/doc/)

---
_Source: https://npm.io/package/weex-html5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._