チュートリアルのコンテンツは、どの投稿や記事が支払いを受け取ったのかを認(rèn)識(shí)しません。もちろん、私のサイトではそれを?qū)g裝しているので、試してみてください。久しぶりに実踐的な記事を書(shū)きましたが、今日は yii2+houjs+yii2-wx を使って WeChat にギフト送信機(jī)能を?qū)g裝した記事を紹介します。

まずレンダリングを見(jiàn)てみましょう

簡(jiǎn)単に言うと、「ギフトを送信」ボタンをクリックすると、たくさんのギフトが入ったポップアップボックスが表示されます。ギフトをクリックすると、ポップアップ ボックスが更新され、WeChat QR コードをスキャンして支払います。

もちろん、お金は會(huì)員の個(gè)人口座に入金され、その後引き落とされます。

なぜそのような機(jī)能が必要なのでしょうか? 正直に言うと、これで多くを得ることは考えていませんでした。私たちの學(xué)習(xí)コミュニティで貴重な記事を共有していただければ、私からプレゼントをもらえる可能性が非常に高いです。

それでは、関數(shù)について話しましょう。 いくつかの関數(shù)があります。

• データテーブル構(gòu)造を作成します。

• houjs を使用してフロントエンドのポップアップボックスを完成させます

• yii2 を使用します。 -wxで決済2のQRコードを?qū)g裝

• ユーザー向けのアカウント機(jī)能を追加

• yii2-wxの法人向け決済を利用して変更し、yii2のコンソールモードを利用してユーザー向けの決済機(jī)能を?qū)g現(xiàn)(支払いは2元以上) ）。

役立つ情報(bào)が満載ですので、どうぞ。始める。

データテーブル構(gòu)造

プレゼントを渡すので、當(dāng)然プレゼントテーブルとプレゼントを渡すためのログテーブルも含めて以下のように計(jì)畫します。

ギフトテーブルgift

ギフトログテーブルgift_log

gift_logテーブルの場(chǎng)合、このフィールドは統(tǒng)計(jì)上の便宜のためにここに追加されます。

全體的なアイデア

ユーザーがギフトを送信するための全體的なロジックは次のとおりです

1. [ギフトを送信] をクリックしてバックグラウンドと対話し、このコミュニティ ギフト リストを取得します。

2. データを取得したら、jsmart エンジンを使用して特定のギフトの HTML コードをレンダリングします。

3. モーダルを使用してギフトリストをポップアップボックスに入れます。

4. ギフトをクリックして背景と対話すると、背景が QR コードを生成して返します。

5. ユーザーは QR コードをスキャンして支払います。

6. 支払いが成功しました。

ギフトリストを取得します

次に、houjsを使用してフロントエンド機(jī)能を構(gòu)築します。houjsの使用方法については、主にモーダルポップアップボックスアシスタントを使用してポータルを表示します。 jsmart テンプレート エンジン。

最初にボタンを指定します

<button class="ui green button" id="giftBtn" data-url="<?= Url::to([&#39;/gift/list&#39;,&#39;id&#39;=>$lang->id]);?>">
    <i class="share icon"></i>送禮物
</button>

data-urlはギフトリストを取得するために使用されるルートを表し、ボタンのクリックイベントハンドラーを作成します

requirejs(['mods/modal','jSmart'],function(modal,jSmart){
    $('#giftBtn').click(function(){
        var url = $(this).attr('data-url');
        $.getJSON(url,{},function(d){
            if(d.result === 'ok'){
                // d.data
            }else{
                modal.msg(d.message);
            }
        });
    });
}）

はギフトリストを取得するリクエストを開(kāi)始し、失敗した場(chǎng)合はエラーメッセージが表示されます。というプロンプトが表示されます。

次に、新しい GiftController.php を作成し、リスト アクションを定義します。

public function actionList($id){
    Yii::$app->response->format = 'json';
    try {
        $data = Gift::find()->where(['lang_id'=>$id])->asArray()->all();

        return ['result'=>'ok','data'=>$data];
    }catch(Exception $e){
        return ['result'=>'fail','message'=>$e->getMessage()];
    }
}

ここから、ボタンをクリックした後に取得されるデータの d.data がこのコミュニティのギフトリストであることがわかります。

フロントデスクがギフトリストを取得したら、jsmart を使用してデータを HTML コードに変換します。これを行うには、まず jsmart テンプレートを作成し、このテンプレートをギフト ボタン ページに追加する必要があります。

<script id="giftTpl" type="text/x-jsmart-tmpl">
    <p class="gifts-box">
        <p class="gifts">
        {foreach $data as $key=>$gift}
            <a href="">
                <p class="gift-icon"><img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/377/959/949/1532500396901059.jpg"  class="lazy"  src=&#39;{$gift.icon}&#39;/ alt="WeChat ギフト投げ銭機(jī)能の実裝方法を教える 3 つのヒント (完全なコード)" ></p>
                <p class="gift-name">{$gift.name}</p>
            </a>
        {/foreach}
        </p>
    </p>
</script>

このテンプレートの大まかな意味は、上記のd.dataのデータを回覧し、各ギフトをタグaに配置し、以下のようにバックグラウンドからギフトリストを取得するjsコードを追加するというものです。

テンプレートをレンダリングして、効果を確認(rèn)します。

yii2のmodal&jsmartとhoujsを使ってギフトリスト機(jī)能を完成させるのがとても気に入っています。次に、重要なことを行う必要があります。バックエンドと対話して、支払い QR コードを取得します。

支払い QR コードを取得する

この章では、yii2-wx 拡張機(jī)能を使用して WeChat 支払い機(jī)能を?qū)g裝します。これは、ギフトをクリックした後に支払い QR コードを取得することです。

先に進(jìn)む前に、前のステップでjsメソッドを最適化し、コードを別のjsモジュールに配置します。houjsでは、次のようにビジネスjsコードをhoujs/js/modulesに配置することをお?jiǎng)幛幛筏蓼?/p>

requirejs(['mods/modal','jSmart'],function(modal,jSmart){
    $('#giftBtn').click(function(){
        var url = $(this).attr('data-url');
        $.getJSON(url,{},function(d){
            if(d.result === 'ok'){
                var tplText = $('#giftTpl').html();
                var compiledTemplate = new jSmart(tplText);
                var output = compiledTemplate.fetch(d);
                modal.alert(output,{
                    inPage:false,
                    title:'送禮物',
                    size:'tiny'
                });
            }else{
                modal.msg(d.message);
            }
        });
    });
}）

。以下のように、ギフトリストを取得するためのJSコードを呼び出すことが簡(jiǎn)単になります

define(function(require,exports,modules){
    var modal = require('mods/modal');
    var jSmart = require('jSmart');

    exports.list = function(){
        $('#giftBtn').click(function(){
            var url = $(this).attr('data-url');
            $.getJSON(url,{},function(d){
                if(d.result === 'ok'){
                    var tplText = $('#giftTpl').html();
                    var compiledTemplate = new jSmart(tplText);
                    var output = compiledTemplate.fetch(d);
                    modal.alert(output,{
                        inPage:false,
                        title:'送禮物給作者',
                        size:'tiny'
                    });
                }else{
                    modal.msg(d.message);
                }
            });
        });
    };
});

將來(lái)的には、ギフト用のJSコードをhoujs/js/modules/gift.jsに配置できるようになります。

それでは、トピックのこの部分について話しましょう。 支払いQRコードを取得するにはどうすればよいですか？

私のアイデアは次のとおりです: ユーザーが各ギフトをクリックした後、このリクエストにはギフトの ID が含まれており、バックグラウンドでギフト ログが生成され、通信します。 WeChat サーバーが支払い QR コードを取得し、ブラウザに返され、QR コードがフロントエンドでレンダリングされます。

とにかくやってください。

まず、次のようにギフトリストと各ギフトのリンクを追加します

requirejs(['modules/gift'],function(gift){
    gift.list();
}）

各ギフトのリンクに3つの屬性を設(shè)定します

• class="_get_qrcode" 一個(gè)類，這個(gè)類并不起到樣式作用，主要是為js監(jiān)聽(tīng)此標(biāo)簽使用。

• href="javascript:;" 防止點(diǎn)擊跳轉(zhuǎn)

• data-url 點(diǎn)擊連接后，js函數(shù)將根據(jù)data-url提供的地址發(fā)起請(qǐng)求

接下來(lái)我們做一個(gè)js方法實(shí)現(xiàn)a鏈接點(diǎn)擊的監(jiān)聽(tīng)，如下

// houjs/js/modules/gift.js
define(function(require,exports,modules){
    var modal = require('mods/modal');
    var jSmart = require('jSmart');
    
    .....

    /**
     * 獲取某一個(gè)禮物的支付二維碼
     */
    exports.qrcode = function(){
        $('._get_qrcode').click(function(){
            var url = $(this).attr('data-url');
            $.getJSON(url,{},function(d){
                if(d.result === 'ok'){
                    $('#payQrcode')
                        .html("<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/377/959/949/1532500396901059.jpg"  class="lazy"     style="max-width:90%"+d.qrcode+"&#39;/ alt="WeChat ギフト投げ銭機(jī)能の実裝方法を教える 3 つのヒント (完全なコード)" >");
                }else{
                    modal.msg(d.message);
                }
            });
        });
    };
});

有一點(diǎn)要說(shuō)明，因此禮物列表是在頁(yè)面dom渲染后加入的html代碼，因此如果想讓禮物列表的a鏈接被監(jiān)聽(tīng)，在獲取禮物列表成功后需要調(diào)用exports.qrcode()函數(shù)進(jìn)行監(jiān)聽(tīng)，如下

// houjs/js/modules/gift.js
define(function(require,exports,modules){
    var modal = require('mods/modal');
    var jSmart = require('jSmart');
    
    exports.list = function(){
        $('#giftBtn').click(function(){
            var url = $(this).attr('data-url');
            $.getJSON(url,{},function(d){
                if(d.result === 'ok'){
                    ....

                    exports.qrcode();
                }else{
                    modal.msg(d.message);
                }
            });
        });
    };

    /**
     * 獲取某一個(gè)禮物的支付二維碼
     */
    exports.qrcode = function(){
        ....
    };
});

此刻用戶點(diǎn)擊了禮物的a鏈接，gift.qrcode()方法開(kāi)始運(yùn)作，請(qǐng)求達(dá)到了yii2的gift/qrcode動(dòng)作，我寫了如下代碼。

// yii2 GiftController/actionQrcode
<?php
namespace app\controllers;

use app\models\Gift;
use app\models\GiftLog;
use yii\helpers\Url;
use abei2017\wx\Application;
use Da\QrCode\QrCode;
use Yii;
use yii\base\Exception;

class GiftController extends NBase {

    ....
        
    public function actionQrcode($id){
        Yii::$app->response->format = &#39;json&#39;;
        try {
            $model = Gift::findOne($id);

            // order
            $order = new GiftLog();
            $order->gift_id = $id;
            $order->user_id = Yii::$app->user->id;
            $order->created_at = time();
            $order->number = 1;
            $order->money = $order->number*$model->price;
            $order->status = &#39;unpay&#39;;
            $order->lang_id = $model->lang_id;
            if($order->save() == false){
                throw new Exception(implode(&#39;,&#39;,$order->getFirstErrors()));
            }

            $out_trade_no = "gift-{$order->id}-".rand(1000,9999);

            $totalFee = $order->money*100;

            $conf = Yii::$app->params[&#39;wx&#39;];
            $app = new Application([&#39;conf&#39;=>$conf[&#39;mp&#39;]]);
            $pay = $app->driver("mp.pay");

            $attributes = [
                &#39;body&#39;=>"送禮物",
                &#39;detail&#39;=>"{$model->name}",
                &#39;out_trade_no&#39;=>$out_trade_no,
                &#39;total_fee&#39;=>$totalFee,
                &#39;notify_url&#39;=>Yii::$app->urlManager->createAbsoluteUrl([&#39;/gift/notify&#39;]),
                &#39;product_id&#39;=>&#39;gift-&#39;.$id
            ];

            $native = $pay->native($attributes);

            $qrCode = (new QrCode($native[&#39;code_url&#39;]))->setSize(250)->setMargin(20);

            return [&#39;result&#39;=>&#39;ok&#39;,&#39;qrcode&#39;=>$qrCode->writeDataUri()];
        }catch(Exception $e){
            return [&#39;result&#39;=>&#39;fail&#39;,&#39;message&#39;=>$e->getMessage()];
        }
    }

}

首先要說(shuō)明的是上述代碼沒(méi)有問(wèn)題，但如果上線還是要處理細(xì)節(jié)的。

在actionQrcode方法中我們做了3件事情

1. 生成送禮物日志

2. 調(diào)用yii2-wx生成支付二維碼

3. 使用QrCode生成二維碼并傳給瀏覽器

這里使用的是yii2-wx提供的生成二維碼方法native，剩下的事情就是如何顯示這個(gè)二維碼。

為了讓用戶可以在支付前重新選擇禮物，本次并沒(méi)有選擇彈出二維碼，而是使用了禮物頁(yè)面替換的方法，如下圖

在禮物的右側(cè)我增加了一個(gè)p來(lái)存放二維碼，沒(méi)有選擇的時(shí)候用一些幫助來(lái)填充。這個(gè)二維碼的存放工作由gift.qrcode()方法實(shí)現(xiàn)

$(&#39;#payQrcode&#39;).html("<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/377/959/949/1532500396901059.jpg"  class="lazy"     style="max-width:90%"+d.qrcode+"&#39;/ alt="WeChat ギフト投げ銭機(jī)能の実裝方法を教える 3 つのヒント (完全なコード)" >");

對(duì)應(yīng)的禮物列表模板也增加了支付區(qū)域

<script id="giftTpl" type="text/x-jsmart-tmpl">
    <p class="gifts-box">
        <p class="gifts">
        {foreach $data as $key=>$gift}
            <a class="_get_qrcode" href="javascript:;" data-url="<?= Url::to([&#39;/gift/qrcode&#39;]);?>?id={$gift.id}">
                <p class="gift-icon"><img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/377/959/949/1532500396901059.jpg"  class="lazy"  src=&#39;{$gift.icon}&#39;/ alt="WeChat ギフト投げ銭機(jī)能の実裝方法を教える 3 つのヒント (完全なコード)" ></p>
                <p class="gift-name">{$gift.name}</p>
            </a>
        {/foreach}
        </p>
        <p id="payQrcode">
            <h1>使用小提示</h1>
            <p>
                點(diǎn)擊左側(cè)的小禮物后會(huì)出現(xiàn)支付二維碼，掃碼即送。
            </p>
        </p>
        <p class="clear"></p>
    </p>
</script>

好，看下效果。

用戶拿手機(jī)支付

當(dāng)用戶得到支付二維碼后必然是掃碼支付，接下來(lái)有兩個(gè)事情要做

• yii2要處理微信支付結(jié)果通知，將此禮物日志設(shè)置為已經(jīng)支付。

• 瀏覽器上次禮物列表二維碼消失，提示支付成功。

先來(lái)處理結(jié)果通知，這個(gè)使用yii2-wx非常好實(shí)現(xiàn)。在GiftController中增加一個(gè)notify動(dòng)作。

// GiftController.php
<?php
namespace app\controllers;

use app\models\Gift;
use app\models\GiftLog;
use yii\data\ActiveDataProvider;
use yii\helpers\Url;
use abei2017\wx\Application;
use Da\QrCode\QrCode;
use Yii;
use yii\base\Exception;

class GiftController extends NBase {

    public $enableCsrfValidation = false;

    ......

    public function actionNotify(){
        $conf = Yii::$app->params[&#39;wx&#39;];
        $app = new Application([&#39;conf&#39;=>$conf[&#39;mp&#39;]]);
        $pay = $app->driver("mp.pay");

        $response = $pay->handleNotify(function($notify,$isSuccess){
            if($isSuccess){
                @list($_,$id,$_) = explode(&#39;-&#39;,$notify[&#39;out_trade_no&#39;]);

                $model = GiftLog::findOne($id);
                if($model->status == &#39;pay&#39;){
                    return true;
                }

                $model->status = &#39;pay&#39;;
                $model->paid_at = time();
                $model->transaction_id = $notify[&#39;transaction_id&#39;];
                $model->update();

                return true;
            }
        });

        return $response;
    }

}

對(duì)上面的邏輯有幾點(diǎn)要注意，這也是我們用yii2-wx的時(shí)候要注意的。

• 關(guān)閉csrf驗(yàn)證 主要是防止yii2將微信給我們的結(jié)果通知請(qǐng)求屏蔽掉。

• 在設(shè)置禮物日志已付款前要判斷下，如果已經(jīng)付款則返回true，這樣微信就不會(huì)再發(fā)請(qǐng)求。

現(xiàn)在我們搞定了回調(diào)，看下效果。

不錯(cuò)不錯(cuò)

離成功越來(lái)越近了！接下來(lái)我們要解決一個(gè)問(wèn)題，就是當(dāng)用戶支付后在瀏覽器上禮物列表的變化，我希望二維碼消失同時(shí)出現(xiàn)一個(gè)支付成功的頁(yè)面。

我需要一個(gè)輪詢，那么開(kāi)始吧，為此我在gift.js中增加一個(gè)輪詢功能，這個(gè)功能在渲染出二維碼后被觸發(fā)。

//gift.js
exports.askIsPay = function(id){
    var url = '/gift/is-pay.html';
    $.getJSON(url,{id:id},function(d){
        if(d.result === 'ok'){
            $('#payQrcode').empty()
                .html("<h1>支付成功</h1><p>感謝您對(duì)作者的支持，他會(huì)知道您的名字以及打款。</p>");
        }else{
            setTimeout(function(){
                exports.askIsPay(id)
            },3000);
        }
    });
}

每3秒詢問(wèn)一次服務(wù)器上gift/is-pay動(dòng)作是否此送禮物日志已經(jīng)付款，當(dāng)然要告訴是哪個(gè)訂單，如果已經(jīng)付款則改變p#payQrcode的內(nèi)容，否則繼續(xù)調(diào)用exports.askIsPay(id)再一次詢問(wèn)。一點(diǎn)注意的是我們?cè)谏啥S碼的時(shí)候需要服務(wù)器將此日志的id返回（這需要服務(wù)器的gift/qrcode動(dòng)作返回此送禮物日志的ID），當(dāng)exports.askIsPay觸發(fā)時(shí)export.qrcode將其傳入。

...
if(d.result === 'ok'){
    $('#payQrcode').empty()
        .html("<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/732/515/655/1532500450978915.jpg"  class="lazy"     style="max-width:90%"+d.qrcode+"&#39;/ alt="WeChat ギフト投げ銭機(jī)能の実裝方法を教える 3 つのヒント (完全なコード)" >");
    exports.askIsPay(d.oId);
}else{
    modal.msg(d.message);
}
...

當(dāng)然我們還要在服務(wù)器上新建一個(gè)控制器的動(dòng)作。

// GiftController.php
public function actionIsPay($id){
    Yii::$app->response->format = 'json';
    try {
        $model = GiftLog::findOne($id);
        if($model->status == 'unpay'){
            throw new Exception('還沒(méi)有支付');
        }

        return ['result'=>'ok'];
    }catch(Exception $e){
        return ['result'=>'fail','message'=>$e->getMessage()];
    }
}

大功告成，看看效果。

小結(jié)

到此我們就完成了永不打賞禮物的全過(guò)程，算上部吧，下部我們將實(shí)現(xiàn)具體的打款到用戶賬號(hào)以及使用yii2-wx調(diào)用微信企業(yè)付款到零錢包接口實(shí)現(xiàn)錢到微信功能。

相關(guān)推薦：

微信小程序開(kāi)發(fā)實(shí)戰(zhàn)視頻教程

TP5.0實(shí)現(xiàn)簡(jiǎn)易管理員登錄注冊(cè)功能

以上がWeChat ギフト投げ銭機(jī)能の実裝方法を教える 3 つのヒント (完全なコード)の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。