需要用到交互的地方
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)
});
