h5在App内的运用场景
过去几年我的主要工作都与 h5 应用紧密相关，后续会逐渐把我在这一方面的吸取到的经验和技术进行重新梳理，并分类输出文章，这不仅是一个自我经验、技术复盘的过程，也是另一种成长的过程。如果写的对你有一些用处，欢迎点赞收藏。
前言
随着智能手机的兴起，将人们带入移动互联网时代，现在基本上人手至少一台手机，因此移动端各种应用也喷涌而出， h5 应用也得到了充分的发挥，因为它天生的跨端能力以及成熟的技术体系，以及让它充分的融入到了各类应用中。
本篇文章主要分析 h5 的常见使用场景，也是更全面的去了解 h5 应用的能力。
对于开发者来说，可以把 h5 的使用场景分为以下 3 种：
- 通用平台，也就是在一般浏览器应用中使用，比如常见的 Chrome、Safari 、UC浏览器等浏览器应用。
- 第三方平台，也就是在其他应用内访问，比如 微信 、Meta（Facebook）、Twitter 等
- 自家平台，也就是在自家公司或个人开发的 app 内使用，就像淘宝、京东等应用内部也有很多自家开发的很多 h5 页面，比如双十一的一些活动会场、京东农场等页面。
虽然可以分为这三种应用场景，但 h5 页面永远需要一个载体才能访问，那就是 浏览器内核 。不管是哪个平台，都需要有 浏览器内核 才能支持，这也是浏览器的重要核心，而其他平台需要引入 浏览器内核 的能力才能进行使用，这就是我们所说的 webview 能力。
本篇文章主要探索 h5 在自家平台能展现出来的能力。
运用场景
在讲应用场景之前，我们先来看一个常见概念：Hybrid App，意思就是混合模式移动应用，字面上是同时使用网页语言与程序语言编写的移动应用，实际上也就是 App 内部使用 webview 承载 h5 页面的方式来开发移动应用。它兼具 “Native App良好用户交互体验的优势” 和 “Web App跨平台开发的优势”。具体概念就不细讲了，可以网上查一下。
一般我们在 app 内，可以使用 h5 开发一些原生不太好实现的页面，或者利用它的跨端特性，避免多个平台开发多份代码，因此我们当我们接到一个新的需求时，我们需要去区分用什么技术来开发。分类的方法大致可以用下面几种方式：
- 根据需求页面使用时间来区分：是常用页面还是非常用页面，也就是仅在某段时间内使用，常用页面，比如首页、个人中心等页面一般使用原生开发，只是某段时间需要的某个活动需求，一般使用 h5 开发；
- 根据需求页面安全性来区分：h5 资源一般都是通过 http 访问获取到，很容易被抓包，安全性相比原生会低一些；
- 根据需求页面的变化频率来区分：一般变化频率比较频繁的更适合选择 h5，因为app有版本限制，旧版本访问不了新版本开发的原生页面，而 h5 没有版本包袱，更新后重新进入就可以访问最新的内容。
- 根据页面的对性能的要求来选择：原生的性能当然是最好的，用户下载app时已经装载了所有app内部开发的页面，进入首页后跳转进入其他页面一般都非常快速，而 h5 需要每次打开时先去启动 webview，再让 webview 通过网络去拉取h5内容进行渲染，当然h5也有很多优化方式，可以提升它的页面性能，让它在某些情况也能接近原生体验。
- 据页面的复杂度来区分：一般页面内容样式非常丰富，或者页面比较多需要定制化开发的
特效时，一般会选择 h5，因为单次开发工作量就不少，原生开发两次工作量一般不止加倍。
上面主要讲了几点，但如果遇到一些特殊情况，也要学会自己去权衡和结合实际分析后，再去选择更适合的方式，永远没有最好的，适合的才是更好的，不同阶段也许选择也会不一样。
那 h5 在自家平台内一般情况会有哪些运用场景呢？
游戏类页面
这里主要指的是非游戏类应用
- 作用
游戏类页面一般用于提升用户使用 APP 的频率，也就是提示 App 的活跃度，用户使用 APP 时间多了，才更有可能去进行消费。
- 案例
这类型的页面我们平时可以见到很多，比如 小鸡庄园、某某森林、某某农场等小游戏。
- 特点与要求
这些游戏的特点就是页面样式丰富，有很多特效，使用 h5 开发的成本会低很多，也可以频繁迭代需求。
- 实现
前面说的属于 “养成类小游戏”，一般使用常规的 css 和 js 就可以实现，如果有一些稍微复杂的效果，也可以使用 lottie-web 去实现。
如果是复杂的交互性游戏，或者App就是一个做游戏的应用，那就需要用到一些游戏引擎，现在使用 h5 做游戏的已经很多了，市面常用的游戏引擎有pixi.js、Egret（白露引擎）、Three.js、cocos2d.js等。
拉新类页面
- 作用
拉新类的页面一般用于提升用户的 “真实用户量”，毕竟这是一个 APP 存活下来的根本因素之一。
- 案例
我们平时应该可以很多 APP 上都看到过，比如 pdd 上，拉新主页面会介绍拉新一个人可以得到多少多少 Money，也比如某个公寓平台，拉新一个人减免多少房租等等。
- 特点与要求
这些游戏的特点就是图片内容多，交互简单，有时候会有一些特效要求，但是一般并不复杂，有时候都可以直接使用图片就行，一般会分为两部分，App 内使用 和 App 外使用。App 内引导已有用户拉新，App 外引导用户注册并下载 APP
- 实现
实现起来一般都比较简单，前端工作量一般也就几人天，复杂一些的很少超过一个月，不过很多时候需要定制化开发，一般样式和交互很难复用，但要是掌握了开发规律，也可以使用低代码平台来配置。
协议类
- 作用
一般用于显示各种类型的协议，明确运营者和使用者之前的权益和义务，可大大提升应用的透明度，加强体验，规避各种风险；
- 案例
每个 App 基本上都会有协议，比如用户协议和隐私政策，一般会让用户强制选择。
- 特点与要求
更新频率极低，性能要求不是很高，静态 h5 一般就满足了。
- 实现
实现起来可以分为很多种，一般看公司的各自的技术设施情况来定，常见的有以下两种：
- 直接写死在页面内，每次更新需要发版。
- 通过管理端配置富文本，h5通过接口获取。如果是 nextjs 还可以使用静态化功能，提升页面性能。想了解可以去 Next.js之前端渲染模式 (opens in a new tab) 我的这篇文章看一下
营销类页面
- 作用
让用户在app内进行消费才是消费类APP的最重要的核心，营销类页面一般就用于引导用户去购买商品，
- 案例
各个电商平台的各种购物节促销会场、分类商品会场、品牌专场等等页面
- 特点与要求
这类页面的特点有以下几点：
- 更新频率比较高，特别是活动期间，很可能需要多次进行调整内容，每次新活动也可能换风格。
- 服务器性能有要求，因为常用于大促活动，用户访问量很可能会很多，需要预防服务器压力
- 首屏性能，需要 h5 页面显示速度快
- 滚动性能，页面内容多，很多大促页面内容可以往下一直滑几十个屏幕的高度，甚至更多
- 实现
这种页面不适合每次都人工开发，常用的方式就是开发一个营销页面搭建系统，让运营去自己搭建页面的内容。
最后
上面分析的几种运用场景可能远不止 h5 在 站内 的能力范畴，只是按照我自己的想法来进行了一些简单的划分，要是有遗漏点欢迎大家指出。