meta

meta 模块可用于声明单个页面的元信息，通常是一些页面的配置，如容器的显示宽度 (viewport) 等。

API

setViewport(options)

0.10.0+

Weex 容器默认的宽度 (viewport) 是 750px，通过 setViewport 方法可以改变页面的显示宽度，仅对当前页面生效。

需要注意的是：只有在页面渲染开始之前设置 viewport 才会生效。 也就是说，setViewport 方法只能在入口文件中使用，而且要在 new Vue(...) 之前调用；如果是在组件中使用，就只有在渲染到该组件的时候才会执行相应的代码，此时页面已经处于渲染过程中，设置 viewport 将不会再生效。

参数

参数配置借鉴了 W3C 标准中的 CSS Device Adaptation，目前支持如下属性：

  • options: viewport 的配置项
    • width: 数值，或者 "device-width" 和 "device-height" 之一。
    • height: 数值，或者 "device-width" 和 "device-height" 之一。

宽度和高度的单位默认是 px，暂不支持其他单位。

例子

入口文件：

  1. // entry.js
  3. import App from './app.vue'
  4. const meta = weex.requireModule('meta')
  6. // 配置 viewport 的宽度为 640px
  7. meta.setViewport({
  8.   width: 640
  9. })
  11. App.el = '#root'
  12. new Vue(App)

在入口文件中配置了 viewport 的宽度为 640 之后，当前页面中的所有组件都会以 640px 作为满屏宽度。

组件文件：

  1. <!-- app.vue -->
  2. <template>
  3.   <div>
  4.     <div class="box750">
  5.       <text class="text">750</text>
  6.       <div class="box640">
  7.         <text class="text">640</text>
  8.         <div class="box480">
  9.           <text class="text">480</text>
  10.         </div>
  11.       </div>
  12.     </div>
  13.   </div>
  14. </template>
  16. <style scoped>
  17.   .box750 {
  18.     width: 750px;
  19.     height: 750px;
  20.     background-color: #EEEEEE;
  21.   }
  22.   .box640 {
  23.     width: 640px;
  24.     height: 640px;
  25.     background-color: #CCCCCC;
  26.   }
  27.   .box480 {
  28.     width: 480px;
  29.     height: 480px;
  30.     background-color: #AAAAAA;
  31.   }
  32.   .text {
  33.     font-size: 50px;
  34.   }
  35. </style>

试试看。（由于 http://dotwe.org 目前还不支持配置入口文件，例子中的效果暂时无法在线查看。）

本地开发环境的搭建可以参考：《搭建开发环境》。