react單頁應用與app原生通信的總結

import React,{Component} from 'react'
import {connect} from 'react-redux'
import NavBars from '@/coms/nav_bar'
import axios from 'axios'
import {Toast} from 'antd-mobile'
import Qs from 'qs'
//需要回調
function controllerCenterCallBack(type,cmd,params){
    if(navigator.userAgent.indexOf("Android")>0){//判斷是安卓瀏覽器
        eval('javascript:QM_APP_WEBVIEW_ENGINE_'+type+'.'+cmd+'("'+params+'")');
    }
    if(navigator.userAgent.toLowerCase().indexOf('iphone')>0){
        eval('window.webkit.messageHandlers.'+cmd+'.postMessage("'+params+'")');
    }

}
//不需要回調
function controllerCenter(type,cmd){
    if(navigator.userAgent.indexOf("Android")>0){//判斷是安卓瀏覽器
        eval('javascript:QM_APP_WEBVIEW_ENGINE_'+type+'.'+cmd+'()');
    }
    if(navigator.userAgent.toLowerCase().indexOf('iphone')>0){
        eval('window.webkit.messageHandlers.'+cmd+'.postMessage("")');
    }
}
function scan(params){
    controllerCenterCallBack('scan','scan_bar',params);
}
class Source extends Component{
  constructor(props){
    super(props)
    this.state={}
    // app掃一掃完成後調用js的方法並返回掃描後的信息
    window.getQcodeInfo = (res) =>this.callback(res)
  }
  // 發起掃一掃後獲取app返回的二維碼用戶信息
  callback =(res)=>{
    const resultId = JSON.parse(JSON.stringify(res)).Result  // 拿到掃描後的
  }

  // 調用app端掃描二維碼
  toApp = ()=> {
    scan("getQcodeInfo")
  }
  componentWillMount(){

  }
  componentDidMount(){

  }
  goBack=()=>this.props.history.go(-1)
  render(){
    return(
      <div className='outer law_check'>
        <div className='sao_btn' onClick={this.toApp}>
          <i className='iconfont icon-saoyisaoerweimasaomasaomiao1 sao_icon'></i>
          開始掃描
        </div>
      </div>
    )
  }
}
const mapStateToProps = ()=> ({

})
const mapDispatchToProps = () => ({
  sendQcodeINfo(){

  }
})
export default connect(mapStateToProps,mapDispatchToProps)(Source)