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'