# meta

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

# API

# setViewport(options)

0.10.0+

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

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

# 参数

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

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

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

# 示例

入口文件：

// entry.js

import App from './app.vue'
const meta = light.requireModule('meta')

// 配置 viewport 的宽度为 640px
meta.setViewport({
  width: 640
})

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

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

# setFlodingScreenRefresh(boolean enable)

JSN组件2.32.39.20210908+

注意：此接口仅在折叠屏手机上才会生效。

在jsn前端环境中的meta对象里，增加【setFlodingScreenRefresh(boolean enable)】方法，允许开发直接在前端页面的入口app.js中配置。

enable：如果设置为true（默认或不配置为true）则每次折叠屏开合屏幕页面都会重新刷新，将丢失先前所有的数据和回调对象，如果设置成false则不会刷新页面，仅会做重布局操作，页面绑定的各项事件也不会销毁。

需要注意的是：框架默认为重刷新，它有目前最后的兼容性，若设置为不刷新，则将有很多不可预期的布局兼容性问题产生，需要根据实际情况适配。

# 示例

import App from './app.vue'
const meta = light.requireModule('meta')
meta.setFlodingScreenRefresh(true)

# getViewport()

JSN组件2.32.39.20210908+

注意：此接口仅在折叠屏手机上才会生效，否则都返回固定的viewport值。

在jsn前端环境中的meta对象里，增加getViewport方法，方便前端开发在初始化时就可取到正确的viewport width值，便于进行动态高宽换算。在折叠屏折叠时，调用meta.getViewport().width获得的值为750。在折叠屏展开时值为1500。

# 示例

在任意页面的代码中均起效

import App from './app.vue'
const meta = light.requireModule('meta')
console.log("create,viewPortWidth=" + meta.getViewport().width);

组件文件：

<!-- 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>