2018年10月20日17:03:07

泽业建站网站长杨泽业：给mipcms文章末尾增加支付宝和微信的收款码，让你收款更加轻松

如果我们的网页栏目里面有销售、打赏等支付场景的，我们可以在这个页面的结尾添加我们的收款码，现在主流的就是支付宝和微信支付，那么我们就在文章的后面添加这两个收款码即可。

以本站为例，本站昨天开始新增了一个叫做“在线商城”的栏目，未来会有一些商业源码，软件，模板，教程等虚拟的商品进行在线销售，宝贝内容介绍完毕了，就可以直接扫码付款了。电脑浏览的话，打开app即可扫码支付，非常的方便；手机浏览的话，两个二维码虽然是并列的，但是也是分开的两张图，长按就能识别了，也是超级的方便。实践证明，客户支付越方便，成交就越容易。

好了接下来，讲讲怎么添加吧，我们的程序是mipcms的，那么我们添加的代码，一定要通过mip规则的检验，否则那就是没有添加正确，我下面添加的那是可以通过mip验证的，方法如下：

一、制作支付宝和微信的收款码，并上传网站。

1.1、把支付宝和微信的收款码图片，进行剪切，只要中间的二维码内容即可。

1.2、使用美图秀秀新建一个200*200的白色的空白图片，把支付宝截图下来的图片，以添加饰品的方式，添加到这个空白的图片上面，并且打上支付宝支付，同样的微信收款码也打上微信支付的的字样，方便用户知道，哪一张图片是哪一个支付。

1.3、把制作好的支付宝的收款码的图片重命名为alipay200.jpg，代表是支付宝200*200大小的收款码图片。微信收款码的图片重命名为weixinpay200.jpg代表是200*200大小的微信收款码，使用ftp上传到网站根目录的img文件夹里面。（为什么不叫alipay.jpg和weixinpay.jpg呢？因为我是把完整的支付宝收款码才叫alipay.jpg，完整的微信收款码才叫weixinpay.jpg，在专用的独立支付页面才使用）

二、添加一个叫做在线支付的广告代码

2.1、后台--插件--插件管理--广告管理--管理--添加广告

2.2、广告名称：在线支付

2.3、广告别名：pay

2.4、广告代码：

<div align="center">
<div class="pay" align="center">通过支付宝或者微信进行在线支付
<div class="alipay"><mip-img src="https://www.wzfws.com/img/alipay200.jpg" alt="支付宝支付"></mip-img></div>
<div class="weixinpay"><mip-img src="https://www.wzfws.com/img/weixinpay200.jpg" alt="微信支付"></mip-img></div>
</div>
</div>

2.5、提交以后，得到广告调用代码{:hook('adHook','pay')}

三、把广告代码添加到网站模板里面去。

3.1、如果你想全站调用这个收款码的话，就在文章详情页模板

template\default\article\articleDetail.html里面的猜你喜欢的上方添加广告调用代码{:hook('adHook','pay')}即可。

3.2、如果你只是想在某一个栏目里面调用的话，就复制这个详情页模板重命名为自己栏目的名字，如本站是在线商城shop这个栏目，我自定义为articleDetail-shop.html。

3.3、在后台栏目管理，把这个栏目的模板页选择里面的详情页把默认的articleDetail.html改成articleDetail-shop.html即可。

图也上传了，代码添加了，模板也修改了，网站显示的可不是我们要的效果哦，他不是一行排列两个图片，而是一行一个，上下排列的，还需要增加css样式才行。

四、添加css样式

在默认的css样式表（public/assets/default/css/mipcms.css）最后面添加下面代码即可：

.pay {width:auto;max-width: 405px; height: auto;}

.alipay {width:201px; height: 201px; float:left;clear:left;}

.weixinpay {width:201px; height: 201px; float:right;clear:right;}

结合上面的代码和css样式，不知道，大家看不看得懂，就是一个了一个大的div，这个div命名为pay，左边一个小的div，命名为alipay，右边是小的div命名是weixinpay，因为我的图片的宽和高都是200px的，所以我的div是201px足够容纳了,最上面的大div是405px足够容纳下面的两个小div了，然后左边的居左，右边的居右。

演示效果看昨天的栏目文章吧：