h5 與 RN 交互文檔

通訊協議

• h5 向 RN 發送消息的方式，需按照如下形式：

window.ReactNativeWebView.postMessage(
    JSON.stringify({ 
        action: String, 
        payload: Object,      
 }));

• RN向h5發送消息，需按照如下的形式：

this.webref.injectJavaScript(`
    window.g_app._store.dispatch({
       type: 'action的類型',
       payload: '攜帶的數據'
    });
    true;
 `);

一、 標題欄有按鈕（好比分享、提交等）

h5須要儘早向RN發送消息，告訴RN按鈕的類型（最好constructor中）

{
    action: 'sendHeaderButtonType',
    payload: {
        leftType:'左邊按鈕類型',
        rightType:'右邊按鈕類型',
        hideHeader: '布爾值', // true 隱藏header,可選
        onPressType: '點擊按鈕觸發的事件',// 同一種按鈕，在不一樣頁面有不一樣功能時，須要傳這個值
        headerBgColor: 'header的背景色的色值', //可選
    }
}

• 若是沒有herder狀況下， hideHeader: true

• 右邊按鈕是分享：

  rightType: 'share'

• 左邊按鈕是取消,右邊按鈕是提交:

  leftType:'cancel',
  rightType: 'submit',
  onPressType: 'consultDoctorSubmit' // 諮詢醫生提交訂單

---

二、h5 向 RN 發送分享到微信等第三方app的內容

{
        action:'sendShareMessage'`,
        payload:{shareTitle:'分享的標題',shareContent:'分享的剪短的內容（不超過30字）'}
    }
      // ps: 分享有兩種狀況：
      //一、點擊app header上的按鈕（因此須要這個action把分享的內容傳給RN），
      //二、點擊h5內的分享按鈕,

三、H5點擊頁面內的按鈕，須要RN處理動做

• 點擊支付按鈕，須要app來支付:

  1. 諮詢訂單：

     {
           action:'onPressWechatPay',
           payload: {
               orderType: 'consultationOrder',
               orderId: '訂單id', 
               redirectUrl:'支付完成後須要進入的url'
          }
     }

  2. 檢測訂單：

     {
         action:'onPressWechatPay',
         payload: {
             orderType: 'detectionOrder',
             orderId: '訂單id', 
             redirectUrl:'支付完成後須要進入的url'
         }
     }

• 點擊分享按鈕，須要app 處理分享:

  {
     action: 'onPressShare'
     payload:{shareTitle:'分享的標題',shareContent:'分享的簡短的內容（不超過30字）'}
  }
    // PS: 若是已經發送過`sendShareMessage`這個消息，payload 能夠爲空

• 點擊h5內的返回按鈕，須要RN來處理返回邏輯：

{
        action: 'onPressGoBack',
   }
// ps: 無需payload

四、h5頁面若是觸發登陸頁面，須要用RN的登陸頁面

{
    action: 'navigateToLogin'
    payload: {currentUrl:'當前的url'} 
}

五、RN向 H5 發送消息

• RN點擊app內的按鈕，觸發h5的動做，

{
    type:'user/changeIsPress',
    payload:{onPressType:'按鈕觸發的動做類型'}
}

其中`onPressType`的值：
- `諮詢醫生`提交訂單: `onPressType`:`'consultDoctorSubmit'`
- `RN`支付成功，須要通知`h5`刷新頁面，`onPressType`: `onWeChatPaySuccess`

• RN 向h5發送token:

{
    type:'chat/saveUserToken',
    payload:'token的值'
}

• RN須要h5隱藏全部付費項目的入口,以規避iOS審覈IAP要求：

{
    type:'user/hidePurchaseInfo',
}

六、h5頁面的title發生變化時，須要向RN發送消息傳遞新的title:

action: 'onPageTitleChange',
    payload: {pageTitle: '頁面的title'}

七、h5須要RN展現 loading動畫，須要向RN發送消息:

{
    action:'manageAppLoading',
    payload: {type:'具體的動做'},
}

• 顯示loading 時: type:'showLoading'
• 隱藏loading 時: type:'hideLoading'

八、h5須要手機的權限(相機權限等)，須要向RN發送消息：

{
        action:'requestPermission',
        payload:{permissionType: '權限類型'}
    }

其中，permissionType的值：

• 請求相機權限： permissionType:'camera'
• 請求位置權限： permissionType: 'location'

九、h5須要撥打電話：

{
        action:'makePhoneCall',
        payload:{phoneNumber: '手機號碼'}
    }

十、h5 須要RN掃描條形碼/二維碼

{
        action:'scanQRCode',
        payload: '掃描成功後，RN向h5發送消息的時的type值',
    }

掃描成功後，RN向h5發送掃描到的信息：

{
        type: 'h5傳過來的type',
        payload: '掃描獲得的信息'
    }

十一、h5 直接分享到第三方應用

{    
    action: 'directlySocialShare',
    payload: {
        type: '分享的平臺',
        webpageUrl: '分享的連接',
        shareTitle:'分享的標題',
        shareContent:'分享的簡短的內容（不超過30字）'
    }
}

其中，分享的平臺type：

• 微信：'Wechat'
• 朋友圈：'WeChatTimeLine'
• QQ: 'QQ'
• 微博： 'Weibo'