企业如何通过vue小程序开发满足高效运营与合规性需求
496
2024-06-17
三招教你实现微信礼物打赏功能全代码
教程中的内容未实现识别哪个帖子或文章收到的打款，当然我的站点已经实现，你可以试试哈。有段时间没有写实战类的文章了，今天分享一篇，使用yii2+houjs+yii2-wx实现微信送礼物功能。
先来个效果图
简单点说就是点击“送礼物”按钮后出现一个弹出框，里面有很多礼物，点击某个礼物后弹出框刷新并出现一个二维码，微信扫码支付。
当然这个钱会进入到会员的个人账号内，然后提现。
为何要做这样一个功能那？说心里话我真心没想过通过这个得到多少，更多算一种激励吧，如果你在我们学习社群分享了有价值的文章，你非常有可能受到我的礼物。
好了，还是说功能吧，功能有几个
建立数据表结构（礼物以及送礼物日志）
使用houjs完成前台弹出框
使用yii2-wx实现支付二维码
为用户增加账户功能
使用yii2-wx的企业付款到零钱和yii2的控制台模式现实为用户打款功能（大于等于2元就打款）。
我勒个去，干货满满呀。开始。
数据表结构
既然是送礼品，那自然包含礼品表，还有送礼物的日志表，我规划如下。
礼物表gift
礼物日志表gift_log
对于 gift_log 表可以不用lang_id，这里为了统计方便添加了这个字段。
整体思路
用户送礼物的整体逻辑如下
点击“送礼物”和后台进行交互获取此社群礼物列表。
获取数据后使用jsmart引擎渲染出具体礼物的html代码。
使用modal将礼物列表放到弹出框弹出。
点击礼物和后台交互，后台生成二维码返回。
用户扫码付款。
付款成功。
获取礼物列表
接下来我们使用houjs来构建前台功能，关于houjs的使用可以去社群查看 传送门，我们主要使用其modal弹出框助手和jsmart模板引擎。
首先指定一个按钮
<button class="ui green button" id="giftBtn" data-url="<?= Url::to(['/gift/list','id'=>$lang->id]);?>">
<i class="share icon"></i>送礼物
</button>
-
data-url代表用于获取礼物列表的路由，为按钮做一个click事件处理
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);
}
});
});
}）
-
发起了一个请求用来获取礼物列表，如果失败则提示错误信息。
接下来我们新建GiftController.php并定义list动作。
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='{$gift.icon}'/ alt="三招教你怎样实现微信礼物打赏功能 （代码全）" ></p>
<p class="gift-name">{$gift.name}</p>
</a>
{/foreach}
</p>
</p>
</script>
-
这个模板的大体意思就是讲过来的d.data中的数据进行循环，每个礼物放到标签a中，然后我们向后台获取礼物列表的js代码进行补充，如下。
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);
}
});
});
}）
-
进行模板渲染，到了我们看效果的时候了。
我很喜欢，使用yii2和houjs的modal&jsmart，完成了礼物列表的功能。接下来我们要做一个重要的事情，和后台交互并且得到支付二维码。
得到支付二维码
在本章我们使用yii2-wx扩展实现微信支付功能，其思路点击礼物后获取支付二维码。
在进行之前我们对上一步的js方法进行优化，将代码放到一个单独的js模块中，在houjs中对于业务上的js代码推荐放到houjs/js/modules中，如下
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);
}
});
});
};
});
-
因此获取礼物列表的js代码调用就变的简单了，如下
requirejs(['modules/gift'],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(['/gift/qrcode']);?>?id={$gift.id}">
<p class="gift-icon"><img src='{$gift.icon}'/ 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链接点击的监听，如下
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~