frame-for-h5

这是给 webApp 内的 H5 页面使用的通用模板，提供自定义头部，沉浸背景，头部滚动渐变，底部固定区域，iPhone X系列底部安全区域等。

接入须知：

1. 原生接入 DSBridge
2. 原生通过 DSBridge 提供3个预设函数：

getStatusBarHeight 获取状态栏高度 goBack 推出历史栈 closeMbllView 关闭当前webview

3. H5 路由中配置一些静态属性（可选）
4. 为了更好的体验需要在路由做一些修改

使用

导入

npm i -S frame-for-h5

全局引入

# main.js
import pageModel from 'frame-for-h5'

# 1.5.x
Vue.use(pageModel.pagemodel)
# 1.6.x以后
Vue.use(pageModel)

局部引入

//  xxx.vue
// 1.5.x
import pageModel from 'frame-for-h5'
export default {
  // ...
  components: {
    'page-model': pageModel.pagemodel
  },
  // ...
}

// 1.6.x
import {pageModel} from 'frame-for-h5'
export default {
  // ...
  components: {
    'page-model': pageModel
  },
  // ...
}

使用

# xxx.vue
<template>
  <page-model>
    <div slot="right-content">
      <!-- 标题右侧 -->
    </div>
    <div slot="page-content">
      <!-- 页面主体 -->
    </div>
  </page-model>
</template>

参数API

| 字段名 | 字段描述 | 类型 | 默认值 | 备注 | | - | - | - | - | - | | title | 标题 | String | '' | | | hasBack | 是否显示返回 | Boolean | false | | | hasClose | 是否显示关闭 | Boolean | false | | | headerColor | 头部颜色 | String | 'black' | 白色white、黑色black | | headerStyle | 头部样式 | Object | {} | 注意：传入值为对象 | | headModal | 头部模式 | String | 'normal' | 普通normal、沉浸custom | | pageBg | 页面背景图 | String | '' | 注意：只用于沉浸模式，即：headModal=custom | | pageBgColor | 背景颜色 | String | '' | 注意： 接收参数 eg：'blue'，'#ffffff', 'rgba(255, 255, 255, 1)' | | showMidd | 是否使用头部插槽 | Boolean | false | | | showMiddButRight | 是否使用头部插槽，但是不隐藏右侧插槽 | Boolean | false | 与showMidd同时只能存在一个 | | gradualStyle | 渐变色样式表对象 | Object | {} | 注意：需要开启沉浸模式，即：headModal=custom | | safeArea | 是否显示安全区域 | Boolean | false | 只有在iPhoneX系列生效 | | safeAreaStyle | 安全区域样式表 | Object | {} | | | headerBgColorAnimation | 是否开启头部背景颜色跟随滚动渐变效果 | Boolean | false | | | headerBgColor | 头部背景颜色 | String | '' | 注意：配合开启headerBgColorAnimation才会起效果 | | canPullDown | 下拉刷新 | Boolean | false | | | ignoreWechat | 忽略微信浏览器中的特殊处理（已废弃） | Boolean | false | | | external | 隐藏外部浏览器头部 | Boolean | false | | | customBack | 自定义返回 | Boolean | false | | | back | 自定义返回函数 | Function | | 开启customBack后将取消默认返回事件，由back执行回调 |

"version": "1.6.0"

修改了包导入方式，增加了雪花效果插件，fps帧数插件

// xxx.vue
<template>
  <div>
    <!-- fps插件 show-默认:true color-字体颜色默认:#000 -->
    <fps-plugin :show="true" color="#000" />
    <!-- 下雪效果插件 options为默认值 -->
    <snow-plugin
      :option="{
        min: 6, // 雪花最小值
        max: 20, // 雪花最大值
        timeMin: 5, // 雪花掉落时间 越小越快
        timeMax: 15, // 雪花掉落时间
        count: 30, // 最大数量
        opacityMin: 0.2, // 透明度最小值
        opacityMax: 0.8, // 透明度最大值
        extendArea: 100, // 视觉外区域（可以让雪花从视线外飘入或飘出）
      }"
    />
  </div>
</template>

<script>
  import {snowPlugin, fpsPlugin} from 'pageModel';
  ...
  components: {
    snowPlugin,
    fpsPlugin,
    ...
  }
</script>

"version": "1.5.0"

新增 下拉刷新

<page-model
  :can-pull-down="true"
  @refresh="refresh"
>
  ...
</page-model>
<script>
  ...

  methods: {
    refresh () {
      console.log('refresh')
    }
  }

  ...
</script>

"version": "1.4.0"

新增 头部背景跟随滚动条渐变

<page-model
  head-modal="custom"
  :gradualStyle="{
    background: 'linear-gradient(90deg,rgba(40,210,200,1) 0%,rgba(21,164,172,1) 100%)', height: '200px'
  }"
  :header-bg-color-animation="true"
  header-bg-color="#15a4ac"
>
  ...
</page-model>

"version": "1.3.0"

新增 iPhone X系列安全区域，安全区域样式，固定底部区域插槽

<page-model
  :safe-area="true"
  :safeAreaStyle="{background: '#fff'}"
>
  ...
  <template v-slot:footer-content>
    <div>固定在底部的区域</div>
  </template>
</page-model>

"version": "1.1.7"

新增 头部插槽、沉浸背景样式

1、
<page-model
  :show-midd="true"
>
  ...

  <template v-slot:middle-content>
    <div>
      头部
    </div>
  </template>

  ...
</page-model>
2、
<page-model
  head-modal="custom"
  :gradual-style="
    {
      background: 'linear-gradient(90deg,rgba(40,210,200,1) 0%,rgba(21,164,172,1) 100%)',
      height: '100px'
    }
  "
>
  ...
</page-model>

"version": "1.1.3" {#version1.1.3}

修复 keep-alive 滚动条不能记忆问题

因为框架替代 body 实现滚动能力，原本滚动条记忆能力失效，需要在 router 的 beforeEach 守卫加入新的滚动条记忆

router.beforeEach((to, from, next) => {
  // ...
  const dom = document.querySelector('.scroll-body');
  if (from.meta.keepAlive && dom) from.meta.savedPosition2 = dom.scrollTop;
  // ...
  next();
})

"version": "1.1.2"

新增：headerStyle 头部样式

<page-model :headerStyle="{'border-bottom': '1px solid #E0E1E5'}">
  ...
</page-model>

"version": "1.1.0"

修改：title、hasBack 的默认值

旧: title: 'title'
    hasBack: true
新: title: ''
    hasBack: false

新增：pageBgColor 背景颜色

新增：从vue-router的meta中读取title、hasBack、hasClose参数 {#version1.1.0}

注意：title、hasBack支持通过自定义属性传参，优先级高于通过router

const router = new VueRouter({
  base: '/',
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home,
      meta: {
        keepAlive: true,
        title: '标题',
        hasBack: true, // 是否显示返回
        hasClose: true, // 是否显示关闭
      }
    },
    // ...
  ]
})

"version": "1.0.11" 新增沉浸背景图片

开启沉浸模式后才能使用页面背景（后续有具体场景再修改）

<template>
  <page-model
    head-modal="custom"
    :page-bg="require('./assets/img/[email protected]')"
  >
  </page-model>
</template>