「React Native」银联绑卡

银联绑卡需要跳转到银联H5页面绑定

银联绑卡页面

我们的后端接口会返回一个H5的Url
https://ebank.sdb.com.cn/khpayment/khPayment_BIND_API.do和另外两个签名字段

尝试如下：
一、 最开始我把签名字段直接当成query参数拼接在url后面，然后利用Webview加载这个Url

结果得到如下返回

上送数据格式化解包异常

可能是这个接口不支持get 请求吧！！第一次尝试失败

二、 我利用fetch做post请求，该接口会返回一个静态HTML source code，从这个html的源码可以看到它只是一个中转页，会自动去进行表单提交，然后redirect到真正的页面

然后我用WebView直接加载这个HTML source code

const {navigation: {state: {params: {html} = {}} = {}} = {}} = this.props

<WebView
  source={{html: html}}
  ……
</WebView>

结果得到如下返回

签名验证失败

泪奔～，签名异常，然后怀疑是不是fetch操作的时候，form参数没有urlEncode
后面把所有参数都urlEncode后，还是得到这个结果……

各种尝试后还是不行，后面跑了下ios，同样的代码，ios就可以成功拉起绑卡页面😂

不过还算好，好歹搞定了一端。。。证明参数是没问题滴，怀疑是不是Android上面，这个HTML中转的时候出了问题

后面再看RN的Webview官方文档 https://facebook.github.io/react-native/docs/webview

发现在Webview里是可以自己做post请求的

const {navigation: {state: {params: {url, body} = {}} = {}} = {}} = this.props

<WebView
    source={{
          uri: url, 
          method: 'POST',
          body: body
    }}
    ……
</WebView>

三、果断把参数传给WebView，Android上面成功拉起绑卡页！
ios也用这份代码，但是报签名验证失败😂

四、兼容
ios: 用HTML souce code
android: 交给Webview自己做网络请求

五、不甘心！代码不统一

继续看RN的Webview官方文档, 发现有这么一段话

Static HTML

html (string) - A static HTML page to display in the WebView.
baseUrl (string) - The base URL to be used for any relative links in the HTML.

嗯～ baseUrl

然后, 代码成这样了
fetch统一做网络请求，拿到静态HTML

const {navigation: {state: {params: {url, html} = {}} = {}} = {}} = this.props

<WebView
    source={{
          html: html,
          baseUrl: 'https://ebank.sdb.com.cn',
    }}
    ……
</WebView>

ios 和 Andoid 均成功拉起绑卡页面，代码也统一了！