• meta
  • API
    • setViewport
      • setViewport(options)
      • 示例

    meta

    meta 模块可用于声明单个页面的元信息，通常是一些页面级别的配置，如容器的显示宽度 (viewport) 等。默认情况下，应用无需修改此配置。

    API

    setViewport

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

    setViewport(options)

    • @options

      • width，number，具体数值或 "device-width" 和 "device-height" 宏。
      • height，number，具体数据或 "device-width" 和 "device-height" 宏。

      • deviceWidth，number。

        Android暂不支持

      • deviceHeight，number。

        Android暂不支持

      • roundOffDeviation ，表示layout引擎在布局时会忽略小数点导致的误差；若发现组件拼接处有缝隙，可以将 roundOffDeviation 设置为false，此时layout引擎将自动填补小数点误差，默认值为 true。

      • reserveCssStyles，设置为true保留页面样式，用于支持横竖屏切换,文档。

        注意

    • 需要注意的是：只有在页面渲染开始之前设置 viewport 才会生效。 也就是说，setViewport 方法只能在入口文件中使用，而且要在 new Vue(…) 之前调用；如果是在组件中使用，就只有在渲染到该组件的时候才会执行相应的代码，此时页面已经处于渲染过程中，设置 viewport 将不会再生效。
    • 宽度和高度的单位默认是 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.   roundOffDeviation: false
    10.   reserveCssStyles: true
    11. });
    13. App.el = '#root';
    14. 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 目前还不支持配置入口文件，例子中的效果暂时无法在线查看。）本地开发环境的搭建可以参考：《搭建开发环境》。