登录  /  注册

三招教你怎样实现微信礼物打赏功能 (代码全)

php是最好的语言
发布: 2018-07-25 14:36:23
原创
8836人浏览过

教程中的内容未实现识别哪个帖子或文章收到的打款,当然我的站点已经实现,你可以试试哈。有段时间没有写实战类的文章了,今天分享一篇,使用yii2+houjs+yii2-wx实现微信送礼物功能。

先来个效果图

1455607284-5b236e4ad6e7d_articlex.jpg

简单点说就是点击“送礼物”按钮后出现一个弹出框,里面有很多礼物,点击某个礼物后弹出框刷新并出现一个二维码,微信扫码支付。

当然这个钱会进入到会员的个人账号内,然后提现。

为何要做这样一个功能那? 说心里话我真心没想过通过这个得到多少,更多算一种激励吧,如果你在我们学习社群分享了有价值的文章,你非常有可能受到我的礼物。

好了,还是说功能吧,功能有几个

  • 建立数据表结构(礼物以及送礼物日志)

  • 使用houjs完成前台弹出框

  • 使用yii2-wx实现支付二维码

  • 为用户增加账户功能

  • 使用yii2-wx的企业付款到零钱和yii2的控制台模式现实为用户打款功能(大于等于2元就打款)。

我勒个去,干货满满呀。开始。

数据表结构

既然是送礼品,那自然包含礼品表,还有送礼物的日志表,我规划如下。

礼物表gift

1130941675-5b236e5905e16_articlex.jpg

礼物日志表gift_log

37530968-5b236e6267994_articlex.jpg

对于 gift_log 表可以不用lang_id,这里为了统计方便添加了这个字段。

整体思路

用户送礼物的整体逻辑如下

  1. 点击“送礼物”和后台进行交互获取此社群礼物列表。

  2. 获取数据后使用jsmart引擎渲染出具体礼物的html代码。

  3. 使用modal将礼物列表放到弹出框弹出。

  4. 点击礼物和后台交互,后台生成二维码返回。

  5. 用户扫码付款。

  6. 付款成功。

获取礼物列表

接下来我们使用houjs来构建前台功能,关于houjs的使用可以去社群查看 传送门,我们主要使用其modal弹出框助手和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代表用于获取礼物列表的路由,为按钮做一个click事件处理

requirejs([&#39;mods/modal&#39;,&#39;jSmart&#39;],function(modal,jSmart){
    $(&#39;#giftBtn&#39;).click(function(){
        var url = $(this).attr(&#39;data-url&#39;);
        $.getJSON(url,{},function(d){
            if(d.result === &#39;ok&#39;){
                // d.data
            }else{
                modal.msg(d.message);
            }
        });
    });
})
登录后复制

发起了一个请求用来获取礼物列表,如果失败则提示错误信息。

接下来我们新建GiftController.php并定义list动作。

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

        return [&#39;result&#39;=>&#39;ok&#39;,&#39;data&#39;=>$data];
    }catch(Exception $e){
        return [&#39;result&#39;=>&#39;fail&#39;,&#39;message&#39;=>$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=&#39;{$gift.icon}&#39;/ alt="三招教你怎样实现微信礼物打赏功能 (代码全)" ></p>
                <p class="gift-name">{$gift.name}</p>
            </a>
        {/foreach}
        </p>
    </p>
</script>
登录后复制

这个模板的大体意思就是讲过来的d.data中的数据进行循环,每个礼物放到标签a中,然后我们向后台获取礼物列表的js代码进行补充,如下。

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

进行模板渲染,到了我们看效果的时候了。

1585242546-5b236eb94918f_articlex.jpg

我很喜欢,使用yii2和houjs的modal&jsmart,完成了礼物列表的功能。接下来我们要做一个重要的事情,和后台交互并且得到支付二维码。

得到支付二维码

在本章我们使用yii2-wx扩展实现微信支付功能,其思路点击礼物后获取支付二维码。

在进行之前我们对上一步的js方法进行优化,将代码放到一个单独的js模块中,在houjs中对于业务上的js代码推荐放到houjs/js/modules中,如下

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

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

因此获取礼物列表的js代码调用就变的简单了,如下

requirejs([&#39;modules/gift&#39;],function(gift){
    gift.list();
})
登录后复制

以后关于gift的js代码都可以放到houjs/js/modules/gift.js中。

好,还是说本部分话题。如何获取支付二维码?

我的思路如下:用户点击每个礼品后发起一次get请求到服务器,本次请求包含了礼物的ID,后台收到后生成送礼物日志并和微信服务器通讯得到支付二维码,返回给浏览器,前台渲染此二维码。

说干就干。

首先补充礼物列表,每个礼物的a链接,如下

<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=&#39;{$gift.icon}&#39;/ alt="三招教你怎样实现微信礼物打赏功能 (代码全)" ></p>
                <p class="gift-name">{$gift.name}</p>
            </a>
        {/foreach}
        </p>
    </p>
</script>
登录后复制

我们为每个礼物的a链接设置了3个属性

  • class="_get_qrcode" 一个类,这个类并不起到样式作用,主要是为js监听此标签使用。

  • href="javascript:;" 防止点击跳转

  • data-url 点击连接后,js函数将根据data-url提供的地址发起请求

接下来我们做一个js方法实现a链接点击的监听,如下

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

    /**
     * 获取某一个礼物的支付二维码
     */
    exports.qrcode = function(){
        $(&#39;._get_qrcode&#39;).click(function(){
            var url = $(this).attr(&#39;data-url&#39;);
            $.getJSON(url,{},function(d){
                if(d.result === &#39;ok&#39;){
                    $(&#39;#payQrcode&#39;)
                        .html("<img     style="max-width:90%"+d.qrcode+"&#39;/ alt="三招教你怎样实现微信礼物打赏功能 (代码全)" >");
                }else{
                    modal.msg(d.message);
                }
            });
        });
    };
});
登录后复制

有一点要说明,因此礼物列表是在页面dom渲染后加入的html代码,因此如果想让礼物列表的a链接被监听,在获取礼物列表成功后需要调用exports.qrcode()函数进行监听,如下

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

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

    /**
     * 获取某一个礼物的支付二维码
     */
    exports.qrcode = function(){
        ....
    };
});
登录后复制

此刻用户点击了礼物的a链接,gift.qrcode()方法开始运作,请求达到了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()];
        }
    }

}
登录后复制

首先要说明的是上述代码没有问题,但如果上线还是要处理细节的。

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

  1. 生成送礼物日志

  2. 调用yii2-wx生成支付二维码

  3. 使用QrCode生成二维码并传给浏览器

这里使用的是yii2-wx提供的生成二维码方法native,剩下的事情就是如何显示这个二维码。

为了让用户可以在支付前重新选择礼物,本次并没有选择弹出二维码,而是使用了礼物页面替换的方法,如下图

1.jpg

在礼物的右侧我增加了一个p来存放二维码,没有选择的时候用一些帮助来填充。这个二维码的存放工作由gift.qrcode()方法实现

$(&#39;#payQrcode&#39;).html("<img     style="max-width:90%"+d.qrcode+"&#39;/ alt="三招教你怎样实现微信礼物打赏功能 (代码全)" >");
登录后复制

对应的礼物列表模板也增加了支付区域

<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=&#39;{$gift.icon}&#39;/ alt="三招教你怎样实现微信礼物打赏功能 (代码全)" ></p>
                <p class="gift-name">{$gift.name}</p>
            </a>
        {/foreach}
        </p>
        <p id="payQrcode">
            <h1>使用小提示</h1>
            <p>
                点击左侧的小礼物后会出现支付二维码,扫码即送。
            </p>
        </p>
        <p class="clear"></p>
    </p>
</script>
登录后复制

好,看下效果。

2.jpg

用户拿手机支付

当用户得到支付二维码后必然是扫码支付,接下来有两个事情要做

  • yii2要处理微信支付结果通知,将此礼物日志设置为已经支付。

  • 浏览器上次礼物列表二维码消失,提示支付成功。

先来处理结果通知,这个使用yii2-wx非常好实现。在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的时候要注意的。

  • 关闭csrf验证 主要是防止yii2将微信给我们的结果通知请求屏蔽掉。

  • 在设置礼物日志已付款前要判断下,如果已经付款则返回true,这样微信就不会再发请求。

现在我们搞定了回调,看下效果。

3.jpg

不错不错

离成功越来越近了!接下来我们要解决一个问题,就是当用户支付后在浏览器上礼物列表的变化,我希望二维码消失同时出现一个支付成功的页面。

我需要一个轮询,那么开始吧,为此我在gift.js中增加一个轮询功能,这个功能在渲染出二维码后被触发。

//gift.js
exports.askIsPay = function(id){
    var url = &#39;/gift/is-pay.html&#39;;
    $.getJSON(url,{id:id},function(d){
        if(d.result === &#39;ok&#39;){
            $(&#39;#payQrcode&#39;).empty()
                .html("<h1>支付成功</h1><p>感谢您对作者的支持,他会知道您的名字以及打款。</p>");
        }else{
            setTimeout(function(){
                exports.askIsPay(id)
            },3000);
        }
    });
}
登录后复制

每3秒询问一次服务器上gift/is-pay动作是否此送礼物日志已经付款,当然要告诉是哪个订单,如果已经付款则改变p#payQrcode的内容,否则继续调用exports.askIsPay(id)再一次询问。一点注意的是我们在生成二维码的时候需要服务器将此日志的id返回(这需要服务器的gift/qrcode动作返回此送礼物日志的ID),当exports.askIsPay触发时export.qrcode将其传入。

...
if(d.result === &#39;ok&#39;){
    $(&#39;#payQrcode&#39;).empty()
        .html("<img     style="max-width:90%"+d.qrcode+"&#39;/ alt="三招教你怎样实现微信礼物打赏功能 (代码全)" >");
    exports.askIsPay(d.oId);
}else{
    modal.msg(d.message);
}
...
登录后复制

当然我们还要在服务器上新建一个控制器的动作。

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

        return [&#39;result&#39;=>&#39;ok&#39;];
    }catch(Exception $e){
        return [&#39;result&#39;=>&#39;fail&#39;,&#39;message&#39;=>$e->getMessage()];
    }
}
登录后复制

大功告成,看看效果。

4.jpg

小结

到此我们就完成了永不打赏礼物的全过程,算上部吧,下部我们将实现具体的打款到用户账号以及使用yii2-wx调用微信企业付款到零钱包接口实现钱到微信功能。

相关推荐:

微信小程序开发实战视频教程

TP5.0实现简易管理员登录注册功能

以上就是三招教你怎样实现微信礼物打赏功能 (代码全)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号