H5与原生交互方案

需要用到交互的地方

1.页面的头部、底部

2.页面跳转

• 打开新页面
• 页面回退

3.原生方法

• 相机、相册
• 扫码
• 消息推送
• 生命周期
• 拨打电话
  ……

在实例项目中所用到的资源文件

1、public/static/ JSbridge.js 与原生交互的基础引用文件

2、
① assets/js/utils.js 调用原生方法的封装
② assets/js/public.js 判断设备类型、获取日期等公用方法封装

以下文件根据项目情况选择是否需要
3、前端框架：vant
① 通过postcss-pxtorem 实现将px 转成rem
② 使用 amfe-flexible HTML根节点的初始化 屏幕尺寸自适应

4、

• assets/js/http.js.js 请求方式统一处理、加请求拦截器
• assets/js/getInfo.js 公用接口统一处理
• assets/js/zydm.js 公用字典表统一定义
• api/api.js 接口路径统一

5、代码校验和格式化

• eslint+prettier

和原生交互文档https://zhensong1211.github.io/

1、头部和底部设置

头部设置
1.在需要设置头部的组件引入全局组件WebHeader

.

2、配置文件在router/index.js统一配置

具体配置格式参见原生与H5的交互规范https://zhensong1211.github.io/，具体调用方式参见项目实例

2、页面跳转

打开新页面

1.调用assets/js/utils.js 的toPage方法

传参依次是：路由地址、参数、原生所需参数、向后跳转时需刷新url 、原生页面跳转形式(push/pop)、原生新页面是否展示导航栏

常用的传参是前两个参数：路由地址、参数，调用方式：

  this.$JSbridge.toPage("/demo2", { name: "vivi", age: "16" });

完整传参格式：

this.$JSbridge.toPage('/路由',{参数},{传给原生的参数},
'/需要刷新的页面路由', '动画方式(默认push打开新页面)',
"下个页面是否需要显示原生头部(默认true)")
 // 注：路由是必填，其它非必填，参数顺序固定

返回页面

1.调用assets/js/utils.js 的toBack方法

传参依次是：路由地址、参数、原生所需参数、跳转时需刷新url 、原生返回页面是否展示导航栏

  this.$JSbridge.toBack("/demo2", { name: "vivi", age: "16" });
  this.$JSbridge.toBack()   //传空返回上一页

• 其它跳转方法
  1.toNative()跳转原生页面
  2.toHome() 登录时通过该方法跳转到首页（APP中使用原生方法加载首页）

3、调用原生权限

常用的调用原生的方法已在assets/js/utils.js 封装，可直接调用，支持IOS、安卓、微信、政务钉钉，
如打电话：

this.$JSbridge.phoneCall({
        params: {
          phoneNumber: "13412341234", //号码
        },
  });

直接调用IOS、安卓方法：

//调用方法
this.$JSbridge.nativePermission({
         'type':, 权限类型,
         'params': 参数,
         'callBackMethod':回调方法名
 })
//注册回调的方法
this.$JSbridge.jsbridgeRegister("回调方法名", function(res){
    console.log(res)
 });