react-native webviewアリペイクライアントをジャンプしてappに戻る

3389 ワード

本文は主にreact-nativeがwebviewを通じて支付宝クライアントをジャンプして支払いを行い、支払いが完了した後に自動的に現在のappに戻ることができることを紹介し、一般的にappが支払いを行うのは直接支付宝をリンクするsdkであり、直接sdkを通じて支払いを行う場合はこの文章を無視してください.
本文は主に支付宝の公式サイトのホームページの支払いを参考にします:https://docs.open.alipay.com/203/107091/iOS原生跳转网页支付宝怎么回现app的文章:https://www.jianshu.com/p/0d8dd04fe94e
最初は私はまずwebviewで直接1つの支付宝のホームページのリンクをロードして、本物が运行した后に、ホームページの支払いしかできなくて、支付宝をジャンプすることができなくて、それからまた原生に転戦して、それから一連のrnは原生とインタラクティブで、原生はjsとインタラクティブで、上の2つの文章の绍介によって、支付宝のクライアントをジャンプして帰ることに成功することができます
#pragma mark   ============== webview         ==============
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
  // NOTE: ------   alipays:   scheme   -------
  // NOTE:         scheme,         App
  NSString* reqUrl = request.URL.absoluteString;
  if ([reqUrl hasPrefix:@"alipays://"] || [reqUrl hasPrefix:@"alipay://"]) {
    // NOTE:      App
    NSString *strUrl = [reqUrl stringByReplacingOccurrencesOfString:@"alipays" withString:@"xxx"];//    xxx   iOS     urlScheme,      app     
    NSURL *urls =[NSURL URLWithString:strUrl];
    [[UIApplication sharedApplication]openURL:urls];
  }
  return YES;
}


私达が宝を支払って支払いが完成した后にジャンプして成功のページに回転するため、1つのボタンがあって、このボタンをクリックしてrnの指定のページにジャンプして、原生で1つの问题があって、まず原生の支払いが完成した后に、彼は先にrnのページに戻って、それからやっと指定のページにジャンプすることができて、このように1つのぴかぴかする问题があって、もしページがこのような操作がなければ、直接原生をジャンプするのもとても良いです.
上記の問題で、rnのwebviewが支付宝クライアントにジャンプしてもできないのが悔しいので、またやってみましたが、結果は可能で、webviewのドキュメントを見てみると、実はrnのwebviewにも「onShouldStartLoadWithRequest」という方法があるのですが、それから私はオリジナルの方法で、この方法にコピーして、支付宝をジャンプすることに成功しましたが、支付宝が戻ったとき、自分のappが返されません.コードは次のとおりです.
 onShouldStartLoadWithRequest(event){
        let reqUrl =event.url;
        if(reqUrl.indexOf("alipay://alipayclient")>-1 || reqUrl.indexOf("alipays://alipayclient")>-1) {
            let  strUrl = reqUrl.replace("alipays", "xxx");//    xxx   iOS     urlScheme,      app     
            Linking.openURL(strUrl);
        }
        return true;
    }

私は何度も試したことがありますが、毎回appに戻れません.しかし、私の上の修正後のurlをブラウザで試してみました.支付宝にジャンプしてappに戻ることができます.リンクに問題がない以上、コードの問題です.onShouldStartLoadWithRequestという方法で原生と対話してみました.ジャンプを原生の中に置いてもだめです.あきらめました.それからまた支付宝の公式サイトのホームページの支払いのdemoを見て、彼が支付宝にジャンプする時、1つの判断があることを発見して、自分で彼の公式のdemoをダウンロードすることができて、コードを見て、それから私はコードを修正しました:
 onShouldStartLoadWithRequest(event){
        let reqUrl =event.url;
        if(reqUrl.indexOf("alipay://alipayclient")>-1 || reqUrl.indexOf("alipays://alipayclient")>-1) {
            let  strUrl = reqUrl.replace("alipays", "XXX");
            Linking.openURL(strUrl);
            return false; //        ,   ,    ,     app
        }
        return true;
    }

自分のappに戻ることに成功して、途中で1つの間違いを報告しました
Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined. 解決策:https://blog.csdn.net/qq_37336604/article/details/80857895自分でリンクを見ましょう.怠け者です...
ヒント:Androidのwebviewは直接支付宝クライアントにジャンプできますが、iOSがonShouldStartLoadWithRequestを使用している場合は、iOSかAndroidかを自分で判断してください.Androidに上記のコードが付いているので、クライアントにジャンプできません.の
文章はここまで终わって、书くのは比较的に乱れて、しかし大体の考え方はこのようにして、上の支付宝のジャンプに成功してappの文章に戻ることができない大神に感谢して、彼の书いた文章は成功して私の问题を解决して、もしみんなは新しい解决方法があるならば、あるいはもっと良い考えがあるならば、指导してください!!