node package manager

weex-vue-render

Vue Web Renderer for Weex

This is a group of Vue 2.x components for Weex, which have the same behavior with the Weex built-in components on the native.

It can be run on browser only based on Vue 2.x (without Weex).

how to use

If you prefer npm way, you should manually call init function to pass Vue constructor to weex.

import Vue from 'vue'
import weex from 'weex-vue-render'
weex.init(Vue)
 
import App from 'App.vue'
new Vue(App)

If you perfer cdn way, and use script tag to import a script link, just import it into your html file, it will auto-init and you can just ignore it.

<script>{{Vue}}</script> 
<script>{{weex-vue-render}}</script> 
<script>{{your js bundle}}</script> 

use render-core and plugins

You can juse use a render-core in your page, and define your needs for the plugins (components and API modules) in your entry file, so that your would save a lot of bundle size and bandwidth. On the other hand, The full version contains all the built-in components and API modules, which will waste a lot of bundle size and bandwidth if you haven't use most of them.

To use the render-core and the plugins, just install the plugins in your entry file.

import Vue from 'vue'
 
// import render-core. 
import weex from 'weex-vue-render/dist/index.core'
 
// import the plugins (components and modules) you want to use. 
import slider from 'weex-vue-slider'
import stream from 'weex-vue-stream'
 
// init weex. 
weex.init(Vue)
 
// install the plugins. 
weex.install(slider)
weex.install(stream)
 
import App from 'App.vue'
new Vue(App)

built-in components in render-core

These components have already integrated into render-core. You don't have to import and install them:

  • div
  • text
  • image
  • scrollable components (scroller, list, waterfall)

available built-in components for you to install

npm module name component name
weex-vue-a a
weex-vue-input input
weex-vue-slider slider / slider-neighbor
weex-vue-switch switch
weex-vue-textarea textarea
weex-vue-video video
weex-vue-web web

available API modules for you to install

npm module name API module name
weex-vue-animation animation
weex-vue-clipboard clipboard
weex-vue-dom dom
weex-vue-event event
weex-vue-geolocation geolocation
weex-vue-global-event globalEvent
weex-vue-modal modal
weex-vue-navigator navigator
weex-vue-storage storage
weex-vue-stream stream
weex-vue-websocket websocket
weex-vue-webview webview

Some of the above plugins may not be mentioned in weex documents. Just ignore them if you have no idear about what they are and how to use them.

You can develop more plugins for your app. Accordingly the same plugin for other two platforms (iOS and Android) should also be built and intergrated in your app if you want it run on all three platforms.

use vue-loader to bundle .vue file

NOTE: you should inject $processStyle to preprocess vnode's style in vue-loader's postTransformNode hook.

vue: {
  /**
    * important! should use postTransformNode to add $processStyle for
    * inline style prefixing.
    */
  compilerModules: [
    {
      postTransformNode: el => {
        el.staticStyle = `$processStyle(${el.staticStyle})`
        el.styleBinding = `$processStyle(${el.styleBinding})`
      }
    }
  ],
}

component -> dom map

component dom element children note
scroller /main /main/div/x -
list /main /main/div/x -
cell /sect /sect/x -
header /head /head/x -
loading /asid /aside/x -
loading-indicator /mark /mark/x -
refresh /asid /aside/x -
slider /nav x -> /ul/li/x, indicator -> /nav/nav -
indicator /nav - indicator points: /nav/mark
a /a /a/x -
div /div /div/x -
image /figure - -
input /input - -
switch /span - round button: /span/small
text /p - -
textarea /textarea - -
video /video - -
web /iframe - -