H5页面运行流程图
初始化 webview -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 -> dom 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片
H5页面与native通信：
本地 H5 页面如何和 native 通信的方式基本有三种：jsapi、URL Scheme 和 字符串替换。具体不同方式适合使用场景有所不同：
jsapi ：客户端提供接口，注入 API让 Javascript调用，直接执行相应Native代码，适用于需要通过交互，进行数据请求的场景
URL Scheme ： Web 端发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL Scheme 及所带的参数进行相关操作。适用于进行页面跳转的场景。
字符串替换： 客户端读取本地 H5后，通过对 H5 中的约定的标记位进行字符串替换，然后加载展示页面。适用于没有复杂交互，只通过页面渲染数据的场景。
接口预请求
利用APP为H5获取首屏数据
但是会存在问题，如下分析：
- APP在打开页面时需要同步请求哪些接口，接口的入参是什么样的
- APP请求完成后，怎么把请求结果及时通知给H5，防止H5自身发起重复请求
- 如果H5修改代码，更新参数，告知APP入参的配置未更新，怎么避免使用旧配置请求的结果
解决问题一
在每个H5页面增加一个配置文件app.config.json，配置该页面需要请求的主接口（可以是多个），请求方法，header,body,url参数等
{
pageName: '页面名称',
key: 'H5页面的URL', //页面唯一路径，作为key
preRequest: { // 接口预请求配置
appVersion: '8.0.1', // 支持app最低版本号，为了处理APP识别字段新增等变更情况
support: 0, // 是否支持接口预请求，0 | 1
apis:[ // 预请求接口信息，数组
{
fragment: "#/detail", // 新增fragment 指定对应的路由（hash模式）页面
url: 'https://xxxx/api/address', // 请求url
method: 'get', // 请求类型，如get|post，不传默认get
header: {}, // 请求头，规则同请求体
body:{ // 请求体
shopId: "getUserInfo.shopId:String|''",
cityId:'getLocation.cityId:Int',
key5:'params.orderId',
key6:'params.xxx'
}
}
]
}
}
在打开一个 H5 时，接口的入参一般来自两个地方，最常见的是通过 URL 来获取，另一种常见情况是通过 JSBridge 在 APP 内获取，比如全局的用户信息等。
通过不同的字符串告知 APP 需要从哪里获取那些参数，比如 params.orderId 是告知 APP 需要从打开 H5 页面的URL 中获取 orderId 的参数，而 getUserInfo.shopId，则是告知 APP 需要通过 JSBridge 中的 getUserInfo 方法获取 shopId 参数。
这里APP并非真的去自己调用 JSBridge 的方法，而是告知 APP 该值需要和 JSBridge 中的方法达到同样的效果。
