faq

env.deviceHeight got 0 ?

Why is my weex.config.env.deviceHeight got 0 on web platform ?

That is because your html element's clientHeight is 0. You should set your html element's height to 100%, since the deviceHeight is obtained from document.documentElement.clientWidth in weex-vue-render. So if your html element is not stretched to the full screen, then the value you got would be unexpected.

You could write a css style in your index.html:

html, body {
  width: 100%;
  height: 100%;
}

Warning or error about $processStyle ?

There's a warning / error in console grumbling about $processStyle.

You must use the weex-vue-precompiler in your vue-loader config together with weex-vue-render who's version is larger than 1.0. The $processStyle is a hook from the old version renderer, which is deprecated in 1.x.

Please read the packing sample in readme and you'll find the recommend packing config. Here is a copy to the sample:

{ // webpack config.
  vue: {
    optimizeSSR: false,
    postcss: [
      // to convert weex exclusive styles.
      require('postcss-plugin-weex')(),
      require('autoprefixer')({
        browsers: ['> 0.1%', 'ios >= 8', 'not ie < 12']
      }),
      require('postcss-plugin-px2rem')({
        // base on 750px standard.
        rootValue: 75,
        // to leave 1px alone.
        minPixelValue: 1.01
      })
    ],
    compilerModules: [
      {
        postTransformNode: el => {
          // to convert vnode for weex components.
          require('weex-vue-precompiler')()(el)
        }
      }
    ]
  }
}

weex.requireModule('xx') got undefined ?

Why my const xx = weex.requrieModule('xx') got undefined ?

It's because the 'xx' module hasn't been registered yet before your requireModule statement. The built-in modules is registered in the weex.init method, and before that, the requireModule will always got a undefined. This happens a lot when you initiate weex using weex.init(Vue), but with a import App from 'App.vue' following behind. The import will be executed first, and within that the requireModule statement happened instantly. It's quit like this:

import Vue from 'vue/dist/runtime.common.min'
import weex from 'weex-vue-render'
// initiate weex.
weex.init(Vue)

// This will happen before the above initiation statement.
import App from './app.vue'

App.el = '#root'
new App()

And you can change the import statement from es module importing to a call to require function, to ensure that the init function is called first, and the requireModule in App.vue happens later:

import Vue from 'vue/dist/runtime.common.min'
import weex from 'weex-vue-render'
// initiate weex.
weex.init(Vue)

// This will happen after the initiation.
const App = require('./app.vue').default

App.el = '#root'
new App()