开发微信公众号1元抢购

时间:2016-06-06 16:37:48   收藏:0   阅读:997

近期做了许多微信方面的开发,基本涵盖了所有微信接口和相关功能,本文将介绍如何在微信公众号中实现“1元抢购”功能。

1元抢购指的是将指定的商品,按1元一份进行销售,粉丝可以购买任意数量的份次,当此商品的份数买满时,系统自动抽取一个中奖者,粉丝先通过微信进行充值,然后即可参与。商品的上架销售是滚动进行的,开一期上架一期,通过此功能可进行24小时滚动不简短的进行销售。

 

先看最终效果:

技术分享 技术分享 

技术分享 技术分享

 

在线演示:

技术分享

 

第一步是对接微信支付:

1、设置测试目录

在微信公众平台设置,栏目见图7.7。支付测试状态下,设置测试目录,测试人的微信号添加到白名单,发起支付的页面目录必须与设置的精确匹配。并将支付链接发到对应的公众号会话窗口中才能正常发起支付测试。注意正式目录一定不能与测试目录设置成一样,否则支付会出错。

技术分享

图7.7 微信内网页支付设置栏目入口

2、设置正式支付目录

根据图中栏目顺序进入修改栏目,勾选JSAPI网页支付开通该权限,并配置好支付授权目录,该目录必须是发起支付的页面的精确目录,子目录下无法正常调用支付。具体界面如图7.8所示:

技术分享

 

业务流程时序图

技术分享

 

在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。

注意:WeixinJSBridge内置对象在其他浏览器中无效。

列表中参数名区分大小,大小写错误签名验证会失败。

getBrandWCPayRequest参数以及返回值定义见图7.1,返回列表值说明见图7.2。

表7.1 网页端接口参数列表

名称变量名必填类型示例值描述
公众号id appId String(16) wx8888888888888888 商户注册具有支付权限的公众号成功后即可获得
时间戳 timeStamp String(32) 1414561699 当前的时间,其他详见时间戳规则
随机字符串 nonceStr String(32) 5K8264ILTKCH16CQ2502SI8ZNMTM67VS 随机字符串,不长于32位。推荐随机数生成算法
订单详情扩展字符串 package String(128) prepay_id=123456789 统一下单接口返回的prepay_id参数值,提交格式如:prepay_id=***
签名方式 signType String(32) MD5 签名算法,暂支持MD5
签名 paySign String(64) C380BEC2BFD727A4B6845133519F3AD6 签名,详见签名生成算法

表7.2 网页内支付接口err_msg返回结果值说明

返回值描述
get_brand_wcpay_request:ok 支付成功
get_brand_wcpay_request:cancel 支付过程中用户取消
get_brand_wcpay_request:fail 支付失败

注:JS API的返回结果get_brand_wcpay_request:ok仅在用户成功完成支付时返回。由于前端交互复杂,get_brand_wcpay_request:cancel或者get_brand_wcpay_request:fail可以统一处理为用户遇到错误或者主动放弃,不必细化区分。

示例代码如下:

function onBridgeReady(){
   WeixinJSBridge.invoke(
       ‘getBrandWCPayRequest‘, {
           "appId" : "wx2421b1c4370ec43b",     //公众号名称,由商户传入     
           "timeStamp":" 1395712654",         //时间戳,自1970年以来的秒数     
           "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串     
           "package" : "prepay_id=u802345jgfjsdfgsdg888",     
           "signType" : "MD5",         //微信签名方式:     
           "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
       },
       function(res){     
           if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回    ok,但并不保证它绝对可靠。 
       }
   ); 
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener(‘WeixinJSBridgeReady‘, onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent(‘WeixinJSBridgeReady‘, onBridgeReady); 
       document.attachEvent(‘onWeixinJSBridgeReady‘, onBridgeReady);
   }
}else{
   onBridgeReady();
}

 

未完待续……

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!