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
  2. importApp from './app.vue'
  3. const meta = weex.requireModule('meta')
  4. // 配置 viewport 的宽度为 640px
  5. meta.setViewport({
  6. width:640
  7. })
  8. App.el ='#root'
  9. newVue(App)

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

组件文件:

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

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

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