# frame-for-h5

> It's a frame for mobile

Latest version **1.6.4** (published 2022-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install frame-for-h5
pnpm add frame-for-h5
yarn add frame-for-h5
bun add frame-for-h5
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.4 |
| Published | 2022-01-14 |
| First published | 2020-05-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 47.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | linj0218 |
| Maintainers | linjie0218 |

## Links

- npm: https://www.npmjs.com/package/frame-for-h5
- npm.io page: https://npm.io/package/frame-for-h5

## Dependencies (1)

- [dsbridge](https://npm.io/package/dsbridge.md) ^3.1.4

## Recent versions

- 1.6.4 (latest) — 2022-01-14
- 1.6.3 — 2022-01-14
- 1.6.2 — 2022-01-14
- 1.6.1 — 2022-01-14
- 1.6.0 — 2022-01-14
- 1.5.12 — 2022-01-14
- 1.5.11 — 2021-04-01
- 1.5.10 — 2020-08-26
- 1.5.9 — 2020-07-21
- 1.5.8 — 2020-07-16
- 1.5.7 — 2020-07-16
- 1.5.6 — 2020-07-16
- 1.5.5 — 2020-07-06
- 1.5.4 — 2020-07-03
- 1.5.3 — 2020-06-23
- … 37 more at https://npm.io/package/frame-for-h5/versions

## README

# frame-for-h5

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

#### 接入须知：

1. 原生接入 [DSBridge](https://github.com/wendux/DSBridge-Android)
2. 原生通过 DSBridge 提供3个预设函数：

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

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

-----------------------------
#### 使用
##### 导入
``` bash
npm i -S frame-for-h5
```

##### 全局引入
``` bash
# main.js
import pageModel from 'frame-for-h5'

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

##### 局部引入
``` js
//  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
  },
  // ...
}
```

##### 使用
``` bash
# 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帧数插件
``` html
// 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"

##### 新增 下拉刷新

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

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

  ...
</script>
```

##### "version": "1.4.0"

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

``` bash
<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系列安全区域，安全区域样式，固定底部区域插槽
``` bash
<page-model
  :safe-area="true"
  :safeAreaStyle="{background: '#fff'}"
>
  ...
  <template v-slot:footer-content>
    <div>固定在底部的区域</div>
  </template>
</page-model>
```

##### "version": "1.1.7"

##### 新增 头部插槽、沉浸背景样式
``` bash
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 守卫加入新的滚动条记忆

``` bash
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 头部样式
``` bash
<page-model :headerStyle="{'border-bottom': '1px solid #E0E1E5'}">
  ...
</page-model>
```

##### "version": "1.1.0"

##### 修改：title、hasBack 的默认值
``` bash
旧: title: 'title'
    hasBack: true
新: title: ''
    hasBack: false
```

##### 新增：pageBgColor 背景颜色
##### 新增：从vue-router的meta中读取title、hasBack、hasClose参数 {#version1.1.0}
> 注意：title、hasBack支持通过自定义属性传参，优先级高于通过router
``` bash
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" 新增沉浸背景图片

##### 开启沉浸模式后才能使用页面背景（后续有具体场景再修改）
``` bash
<template>
  <page-model
    head-modal="custom"
    :page-bg="require('./assets/img/bg1@2x.png')"
  >
  </page-model>
</template>
```

---
_Source: https://npm.io/package/frame-for-h5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._