アプレットが Webview をサポートすると、開発した多くの h5 ページをアプレット内で直接使用できるようになり、たとえば、WeChat モール、記事詳細ページ、製品詳細ページのセットを開発し、複数の場所で使用できます。今日はそれについて話しましょう。アプレットのWebビューにWeChat決済機能を実装します。WeChat では、アプレットの Web ビューで WeChat 支払いを直接呼び出すことができないためです。したがって、レッスンにはアプレットと Web ビューの間の対話が含まれます。
原理
まずは実装原理ですが、Webビューのh5ページに注文機能を実装し、決済ボタンをクリックするとアプレットページにジャンプし、決済ボタンを押します。注文番号、注文合計金額、アプレットに移動し、アプレットで注文番号と注文金額を使用して WeChat 支払いを設定し、支払いを実行します。支払いが成功または失敗したときにコールバックが発生します。次に、対応するコールバックを Web ビューに渡して、Web ビューの注文と支払いステータスを更新します。
1. h5 ページを表示する Webview を定義する
WebViewの使い方については割愛しますが、公式ドキュメントが非常にわかりやすくて使いやすいです。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
webview は非常にシンプルで、webview コンポーネントを使用して Web ページを表示します。
次に、h5 ページを定義します。
ここでローカルサーバーを起動して、単純な h5 ページを表示します。
上の画像はブラウザで表示したものです。
次に、このページをアプレットの Web ビューに表示します。これも非常に簡単で、src をローカル Web ページのリンクとして定義するだけです。
ここで注意すべきことが 1 つあります
ローカルリンクなので、開発者ツールでこの項目を確認する必要があります。
3 番目に、h5 ページのコードを見てください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小程序内嵌webview</title>
<style>
.btn {
font-size: 70px;
color: red;
}
</style>
</head>
<body>
<h1>我是webview里的h5页面</h1>
<a id="desc" class="btn" onclick="jumpPay()">点击支付</a>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
console.log(location.href);
let payOk = getQueryVariable("payOk");
console.log("payOk", payOk)
if(payOk){//支付成功
document.getElementById('desc').innerText="支持成功"
document.getElementById('desc').style.color="green"
}else{
document.getElementById('desc').innerText="点击支付"
}
//获取url里携带的参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
function jumpPay() {
let orderId = Date.now();//这里用当前时间戳做订单号（后面使用你自己真实的订单号）
let money = 1;//订单总金额（单位分）
let payData = {orderId: orderId, money: money};
let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序，所以这里需要转为字符串
const url = `../wePay/wePay?payDataStr=${payDataStr}`;
wx.miniProgram.navigateTo({
url: url
});
// console.log("点击了去支付", url)
console.log("点击了去支付")
}
</script>
</body>
</html>h5 コードについてはここでは詳しく説明せず、簡単に説明します。支払いボタンをクリックすると、現在のタイムスタンプを注文番号として使用し (注文番号は一意である必要があるため)、注文金額 (単位ポイント) を渡します。節約のため、1 セントを渡します。お金は自分自身のために使われます お金、苦しんでいます。。。。
重要なポイントについて話しましょう
1. h5ジャンプアプレットを実現するにはjweixinを導入する必要があります。
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
2. ミニプログラムページへのジャンプ方法
これはアプレットのページと一致している必要があります。payDataStr は私たちが運ぶパラメータです
4. ミニプログラム支払いページ
ミニプログラムの支払いページをご覧ください。
ミニ プログラムの支払いページの機能は非常にシンプルで、h5 によって渡された注文番号と注文金額を受け取ることです。次に、支払いを実現するために WeChat 支払いを調整します。支払いの成功と支払いの失敗に対応するコールバックがあります。
決済 ここでは実践的な小規模プログラムのクラウド開発により決済を実現しており、コアコードはわずか10行です。支払いはこのセクションの焦点ではないため、ここでは具体的な説明は行いません。
次に、パラメータの受け取りと全員へのアプレットの支払いの完全なコードを投稿します。
コード内のコメントは非常に明確ですが、ここでのポイントは 1 つあり、支払いが成功した後、支払いが成功したことを h5 に伝え、注文または支払いステータスを更新するように h5 に通知する必要があります。これまでに、アプレットの Web ビューでの h5 ページの表示を完全に実現し、h5 とアプレットの間のインタラクションを実現し、アプレットの Web ビューの支払い機能を実現しました。