The content in the tutorial does not realize which post or article has received the payment. Of course, my site has implemented it, you can try it. It’s been a while since I’ve written a practical article. Today I’ll share one, using yii2 houjs yii2-wx to implement the gift-sending function on WeChat.

Let’s take a look at the renderings first

To put it simply, after clicking the "Send Gift" button, a pop-up box will appear, which contains There are many gifts. After clicking on a gift, the pop-up box refreshes and a QR code appears. Scan the code on WeChat to pay.

Of course, the money will be entered into the member's personal account and then withdrawn.

Why do you want to do such a function? To be honest, I really didn’t think about getting much from this. It is more of an incentive. If you share valuable articles in our learning community, you are very likely to receive a gift from me.

Okay, let’s talk about functions. There are several functions.

• Creating a data table structure (gifts and gift-delivery logs)

• Use houjs to complete the front-end pop-up box

• Use yii2-wx to implement payment QR code

• Add account functions for users

• Enterprises using yii2-wx can pay in small change and the console mode of yii2 can realize the payment function for users (payment is made if it is greater than or equal to 2 yuan).

Let me check it out, it’s full of useful information. start.

Data table structure

Since it is giving gifts, it naturally includes a gift table and a log table for giving gifts. I plan as follows.

Gift table gift

Gift log table gift_log

For the gift_log table, lang_id is not required. This field is added here for statistical convenience.

Overall idea

The overall logic for users to send gifts is as follows

1. Click "Send Gift" to interact with the background to obtain this community gift list.

2. After obtaining the data, use the jsmart engine to render the html code of the specific gift.

3. Use modal to put the gift list into the pop-up box.

4. Click on the gift to interact with the background, and the background will generate a QR code and return it.

5. Users scan the QR code to pay.

6. Payment successful.

Get the gift list

Next we use houjs to build the front-end function. Regarding the use of houjs, you can go to the community to view the portal. We mainly use its modal pop-up box. Helper and jsmart template engine.

First specify a button

<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 represents the route used to obtain the gift list, and do a click event processing for the button

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);
            }
        });
    });
}）

Initiated a request to obtain Gift list, error message if failed.

Next we create a new GiftController.php and define the list action.

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()];
    }
}

From here we know that d.data in the data obtained after clicking the button is the gift list of this community.

After the front desk gets the gift list, use jsmart to convert the data into html code. To do this, we need to make a jsmart template first and add this template to the gift button page.

<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="Three tips to teach you how to implement WeChat gift tipping function (full code)" ></p>
                <p class="gift-name">{$gift.name}</p>
            </a>
        {/foreach}
        </p>
    </p>
</script>

The general meaning of this template is that the data in d.data mentioned above is circulated, each gift is placed in tag a, and then we add the js code to obtain the gift list from the background, as follows.

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);
            }
        });
    });
}）

Perform template rendering, and it’s time for us to see the effect.

I like it very much, using yii2 and houjs's modal&jsmart to complete the gift list function. Next we have to do an important thing, interact with the backend and get the payment QR code.

Get the payment QR code

In this chapter we use the yii2-wx extension to implement the WeChat payment function. The idea is to obtain the payment QR code after clicking on the gift.

Before proceeding, we optimize the js method in the previous step and put the code into a separate js module. In houjs, it is recommended to put the business js code in houjs/js/modules, as follows

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);
                }
            });
        });
    };
});

Therefore, the js code call to obtain the gift list becomes simple, as follows

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

In the future, the js code for gift can be placed in houjs/js/modules/gift.js.

Okay, let’s talk about this part of the topic. How to obtain the payment QR code?

My idea is as follows: After the user clicks on each gift, he initiates a get request to the server. This request contains the ID of the gift. After receiving it in the background, a gift log is generated. It communicates with the WeChat server to obtain the payment QR code, returns it to the browser, and renders the QR code in the frontend.

Just do it.

First add the gift list, the a link of each gift, as follows

<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="Three tips to teach you how to implement WeChat gift tipping function (full code)" ></p>
                <p class="gift-name">{$gift.name}</p>
            </a>
        {/foreach}
        </p>
    </p>
</script>

We set 3 attributes for the a link of each gift

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

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

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

接下來我們做一個js方法實現(xiàn)a鏈接點擊的監(jiān)聽，如下

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

    /**
     * 獲取某一個禮物的支付二維碼
     */
    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="Three tips to teach you how to implement WeChat gift tipping function (full code)" >");
                }else{
                    modal.msg(d.message);
                }
            });
        });
    };
});

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

// 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);
                }
            });
        });
    };

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

此刻用戶點擊了禮物的a鏈接，gift.qrcode()方法開始運作，請求達(dá)到了yii2的gift/qrcode動作，我寫了如下代碼。

// 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()];
        }
    }

}

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

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

1. 生成送禮物日志

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

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

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

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

在禮物的右側(cè)我增加了一個p來存放二維碼，沒有選擇的時候用一些幫助來填充。這個二維碼的存放工作由gift.qrcode()方法實現(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="Three tips to teach you how to implement WeChat gift tipping function (full code)" >");

對應(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="Three tips to teach you how to implement WeChat gift tipping function (full code)" ></p>
                <p class="gift-name">{$gift.name}</p>
            </a>
        {/foreach}
        </p>
        <p id="payQrcode">
            <h1>使用小提示</h1>
            <p>
                點擊左側(cè)的小禮物后會出現(xiàn)支付二維碼，掃碼即送。
            </p>
        </p>
        <p class="clear"></p>
    </p>
</script>

好，看下效果。

用戶拿手機支付

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

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

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

先來處理結(jié)果通知，這個使用yii2-wx非常好實現(xiàn)。在GiftController中增加一個notify動作。

// 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;
    }

}

對上面的邏輯有幾點要注意，這也是我們用yii2-wx的時候要注意的。

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

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

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

不錯不錯

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

我需要一個輪詢，那么開始吧，為此我在gift.js中增加一個輪詢功能，這個功能在渲染出二維碼后被觸發(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>感謝您對作者的支持，他會知道您的名字以及打款。</p>");
        }else{
            setTimeout(function(){
                exports.askIsPay(id)
            },3000);
        }
    });
}

每3秒詢問一次服務(wù)器上gift/is-pay動作是否此送禮物日志已經(jīng)付款，當(dāng)然要告訴是哪個訂單，如果已經(jīng)付款則改變p#payQrcode的內(nèi)容，否則繼續(xù)調(diào)用exports.askIsPay(id)再一次詢問。一點注意的是我們在生成二維碼的時候需要服務(wù)器將此日志的id返回（這需要服務(wù)器的gift/qrcode動作返回此送禮物日志的ID），當(dāng)exports.askIsPay觸發(fā)時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="Three tips to teach you how to implement WeChat gift tipping function (full code)" >");
    exports.askIsPay(d.oId);
}else{
    modal.msg(d.message);
}
...

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

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

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

大功告成，看看效果。

小結(jié)

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

相關(guān)推薦：

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

TP5.0實現(xiàn)簡易管理員登錄注冊功能

The above is the detailed content of Three tips to teach you how to implement WeChat gift tipping function (full code). For more information, please follow other related articles on the PHP Chinese website!