meta 模块可用于声明单个页面的元信息,通常是一些页面级别的配置,如容器的显示宽度 (viewport) 等。默认情况下,应用无需修改此配置。
Weex 容器默认的宽度 (viewport) 是 750px,通过 setViewport 方法可以改变页面的显示宽度,仅对当前页面生效。
width
,number,具体数值或 "device-width"
和 "device-height"
宏。height
,number,具体数据或 "device-width"
和 "device-height"
宏。roundOffDeviation
,表示layout引擎在布局时会忽略小数点导致的误差;若发现组件拼接处有缝隙,可以将 roundOffDeviation
设置为false,此时layout引擎将自动填补小数点误差,默认值为 true。::: tip 注意
入口文件:
// entry.js import App from './app.vue'; const meta = weex.requireModule('meta'); // 配置 viewport 的宽度为 640px meta.setViewport({ width: 640, roundOffDeviation: false }); App.el = '#root'; new Vue(App);
在入口文件中配置了 viewport 的宽度为 640 之后,当前页面中的所有组件都会以 640px 作为满屏宽度。
组件文件:
<!-- app.vue --> <template> <div> <div class="box750"> <text class="text">750</text> <div class="box640"> <text class="text">640</text> <div class="box480"> <text class="text">480</text> </div> </div> </div> </div> </template> <style scoped> .box750 { width: 750px; height: 750px; background-color: #eeeeee; } .box640 { width: 640px; height: 640px; background-color: #cccccc; } .box480 { width: 480px; height: 480px; background-color: #aaaaaa; } .text { font-size: 50px; } </style>
示例。(由于 http://dotwe.org 目前还不支持配置入口文件,例子中的效果暂时无法在线查看。) 本地开发环境的搭建可以参考:《搭建开发环境》。