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)
 });

推荐阅读更多精彩内容