持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

原生组件

camera，video，input（仅在 focus 时表现为原生组件) textarea,map,canvas,live-player,live-pusher

原生组件的使用限制

原生组件的层级最高，页面其他组件无论设置z-index为多少，都不能覆盖在原生组件上
原生组件不能在picker-view中使用
原生组件不能设置css动画
原生组件的监听事件不能用bind：的形式，只支持bindname
原生组件会遮挡调试器的面板（超级烦人）

page-meta

page-meta用来配置页面的一些属性，监听事件，可以和navigation-bar一起使用。

举个栗子

html部分

<page-meta
  // 下拉背景字体、loading 图的样式，仅支持 `dark` 和 `light`
  background-text-style="{{bgTextStyle}}"
  // 窗口的背景色，必须为十六进制颜色值
  background-color="{{bgColor}}"
  // 顶部窗口的背景色，必须为十六进制颜色值
  background-color-top="{{bgColorTop}}"
  // 底部窗口的背景色，必须为十六进制颜色值
  background-color-bottom="{{bgColorBottom}}"
  // 滚动位置，可以使用 px 或者 rpx 为单位，在被设置时，页面会滚动到对应位置
  scroll-top="{{scrollTop}}"
  // 滚动动画时长
  scroll-duration="1000"
  // 页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点
  page-style="color: green"
  // 页面滚动时会触发 `scroll` 事件， `event.detail = { scrollTop }`
  bindscroll="pageScroll"
  bindresize="pageResize"
  bindscrolldone="pageScrollDone"
>
  <navigation-bar
    // 导航条标题
    title="{{nbTitle}}"
    // 是否在导航条显示 loading 加载提示
    loading="{{nbLoading}}"
    // 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 `#ffffff` 和 `#000000`
    front-color="{{nbFrontColor}}"
    // 导航条背景颜色值，有效值为十六进制颜色
    background-color="{{nbBackgroundColor}}"
    // 改变导航栏颜色时的动画时长，默认为 `0`
    color-animation-duration="2000"
    // 改变导航栏颜色时的动画方式，支持 `linear` 、 `easeIn` 、 `easeOut` 和 `easeInOut`
    color-animation-timing-func="easeIn"
  />
</page-meta>

js部分

 data: {
    bgTextStyle: 'dark',
    scrollTop: undefined,
    bgColor: '#ff0000',
    bgColorTop: '#00ff00',
    bgColorBottom: '#0000ff',
    nbTitle: '原标题',
    nbLoading: false,
    nbFrontColor: '#000000',
    nbBackgroundColor: '#ffffff',
  },
  onLoad() {
    // 进入页面5s后页面的颜色会发生变化
    setTimeout(() => {
      this.setData({
        bgTextStyle: 'light',
        bgColor: '#ffff00',
        bgColorTop: '#00ffff',
        bgColorBottom: '#ff00ff',
        nbTitle: '新标题',
        nbLoading: true,
        nbFrontColor: '#ffffff',
        nbBackgroundColor: '#000000',
      })
    }, 5000)
  },

小程序-原生组件的限制及page-meta的使用

原生组件

page-meta