Hbuilder webApp開発(十二)微信/支付宝支払い
会社のプロジェクトでは、微信決済を使用しており、実際のプロジェクトでの支払いの流れは、以前にオリジナルアプリを作ったときと同じです.ただ今はH 5を使って開発しています.HbuildはWeChat支払いとアリペイ支払いをサポートしていますが、プロジェクトではWeChat支払いしか使われていませんが、アリペイ支払いについて検討します.以前『【iOS】集積支付宝支付/銀聯支付/微信支付』と書いた時は多くの穴に出会ったが、通り過ぎて、後ろに行けばよかった.
新しいことに触れるときは、まず公式のドキュメントを見てみましょう.「支払プラグイン構成」支払環境を構成します.「payment」HTML 5+の支払いインタフェースの一部のドキュメントです.「支払いエラーコード」はエラーコードに対して簡単にデバッグできます.「微信、支付宝が支払ったこと」はネットユーザーが書いた経験で、見る価値がある.
私はこれらの巨人の肩の上に立って微信の支払いと支付宝の支払いをしました.もちろん楽屋の部分は私がしたのではありません.次のコードもDemoです.
分からないことがあれば、直接ドキュメントをたくさん見ることができます.コードの注釈は公式ドキュメントにあります.
原生とH 5のもいくつかのものを作って、これらが第三者のものにかかわると感じて、きっと多くドキュメントとDemoを見て、流れを疎通すればいいです.コードダウンロードアドレス:私をクリックしてください!
文書を読む
新しいことに触れるときは、まず公式のドキュメントを見てみましょう.「支払プラグイン構成」支払環境を構成します.「payment」HTML 5+の支払いインタフェースの一部のドキュメントです.「支払いエラーコード」はエラーコードに対して簡単にデバッグできます.「微信、支付宝が支払ったこと」はネットユーザーが書いた経験で、見る価値がある.
そして私は
私はこれらの巨人の肩の上に立って微信の支払いと支付宝の支払いをしました.もちろん楽屋の部分は私がしたのではありません.次のコードもDemoです.
コード#コード#
<html>
<head>
<meta charset="utf-8">
<title>Hello MUItitle>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<link rel="stylesheet" href="../css/mui.css" />
<link rel="stylesheet" href="../css/app.css" />
<style type="text/css">
.head {
margin-top: 10px;
}
.head img{
width: 120px;
height: 120px;
margin-left: calc(50% - 60px);
}
.top {
margin-top: 40px;
}
.weixin {
width: 60px;
height: 60px;
margin-left: calc(50% - 30px);
background: url(../images/icon-weixin.png);
}
.zhifubao {
width: 60px;
height: 60px;
margin-left: calc(50% - 30px);
background: url(../images/alipay.jpg);
}
style>
head>
<body>
<header class="mui-bar mui-bar-nav white">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">a>
<h1 class="mui-title"> h1>
header>
<div class="mui-content">
<div class="top" id="testLogin">
<input type="button" class="weixin" id="weixin"/>
<input type="button" class="zhifubao" id="zhifubao"/>
div>
div>
body>
<script src="../js/mui.min.js">script>
<script src="../js/mui.zoom.js"> script>
<script src="../js/mui.previewimage.js">script>
<script src="../js/tools.js" >script>
<script>
var wxChannel = null; //
var aliChannel = null; //
var channel = null;
mui.init({
swipeBack:true //
});
mui.plusReady(function() {
//
plus.payment.getChannels(function(channels){
aliChannel=channels[0];
wxChannel=channels[1];
},function(e){
alert(" ："+e.message);
});
})
document.getElementById('weixin').addEventListener('tap',function() {
console.log(" ");
pay('wxpay');
})
document.getElementById('zhifubao').addEventListener('tap',function() {
console.log("zhifubao");
pay('alipay');
})
var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';
var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';
// 2.
function pay(id){
//
var PAYSERVER='';
if(id=='alipay'){
PAYSERVER=ALIPAYSERVER;
channel = aliChannel;
}else if(id=='wxpay'){
PAYSERVER=WXPAYSERVER;
channel = wxChannel;
}else{
plus.nativeUI.alert(" ！",null," ");
return;
}
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
switch(xhr.readyState){
case 4:
if(xhr.status==200){
plus.payment.request(channel,xhr.responseText,function(result){
plus.nativeUI.alert(" ！",function(){
back();
});
},function(error){
plus.nativeUI.alert(" ：" + error.code);
});
}else{
alert(" ！");
}
break;
default:
break;
}
}
xhr.open('GET',PAYSERVER);
xhr.send();
}
script>
html>分からないことがあれば、直接ドキュメントをたくさん見ることができます.コードの注釈は公式ドキュメントにあります.
最後に
原生とH 5のもいくつかのものを作って、これらが第三者のものにかかわると感じて、きっと多くドキュメントとDemoを見て、流れを疎通すればいいです.コードダウンロードアドレス:私をクリックしてください!