需要用到交互的地方

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