frame-for-h5 v1.6.4

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

"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/bg1@2x.png')"
  >
  </page-model>
</template>