利用微信公众号实现商品的展示和支付(1)
在前面随笔《利用微信公众号实现商品的展示和支付(1)》介绍了商品的列表和明细信息的处理,本篇随笔接着上一篇,继续介绍关于商品的微信支付和购物车处理方面,其中微信支付里面,也涉及到了获取微信共享地址的处理,从而个更加方便录入邮寄地址信息;购物车可以从本地的localstorage对象进行获取和处理,也可通过接口获取数据库记录的购物车信息,本案例介绍通过localstorage进行购物车处理方式。
1、商品的微信支付处理
商品的微信支付处理,其中涉及了两个场景,一个是直接购买,一个是通过购物车的结算方式,两个处理界面有所差异,直接付款购买的界面是对当前选中商品进行单项的结算处理,默认数量为1;而购物车订单结算则是利用购物车的记录进行微信支付的处理,购物车可以从本地的localstorage对象进行获取和处理,也可通过接口获取数据库记录的购物车信息,本案例介绍通过localstorage进行购物车处理方式。
对选中商品直接结算界面如下所示。
购物车结算界面如下所示。
先来看看微信共享地址的处理界面,代码如下所示。
<!--配送地址处理--> <div class="weui-panel"> <div class="weui-panel__bd"> <div class="weui-media-box weui-media-box_small-appmsg"> <div class="weui-cells"> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd weui-cell_primary"> <p class="font-14"><span class="mg-r-10">配送地址</span><span class="fr"><a onclick="getaddress()" class="weui-btn_mini weui-btn_primary">获取微信地址</a></span></p> </div> </div> </div> </div> </div> </div> <div class="wy-media-box weui-media-box_text address-select"> <div class="weui-media-box_appmsg"> <div class="weui-media-box__hd proinfo-txt-l" style="width:20px;"><span class="promotion-label-tit"><img src="~/content/wechat/web/images/icon_nav_city.png" /></span></div> <div class="weui-media-box__bd"> <a href="/h5/address" class="weui-cell_access"> <h4 class="address-name"></h4> <div class="address-txt"></div> </a> </div> <div class="weui-media-box__hd proinfo-txt-l" style="width:16px;"><div class="weui-cell_access"><span class="weui-cell__ft"></span></div></div> </div> </div>
获取微信共享地址,需要配合微信的jssdk的js代码进行处理,如下是处理的代码。
<script language="javascript"> var appid = '@viewbag.appid'; var noncestr = '@viewbag.noncestr'; var signature = '@viewbag.signature'; var timestamp = '@viewbag.timestamp'; wx.config({ debug: false, appid: appid, // 必填,公众号的唯一标识 timestamp: timestamp, // 必填,生成签名的时间戳 noncestr: noncestr, // 必填,生成签名的随机串 signature: signature, // 必填,签名,见附录1 jsapilist: [ 'checkjsapi', 'chooseimage', 'previewimage', 'uploadimage', 'downloadimage', 'getlocalimgdata', 'openaddress' ] }); //所有准备好后 wx.ready(function () { }); //获取微信共享地址 function getaddress() { wx.openaddress({ success: function (res) { var username = res.username; // 收货人姓名 var postalcode = res.postalcode; // 邮编 var provincename = res.provincename; // 国标收货地址第一级地址(省) var cityname = res.cityname; // 国标收货地址第二级地址(市) var countryname = res.countryname; // 国标收货地址第三级地址(国家) var detailinfo = res.detailinfo; // 详细收货地址信息 var nationalcode = res.nationalcode; // 收货地址国家码 var telnumber = res.telnumber; // 收货人手机号码 //$.alert(`${detailinfo}`); $(".address-name").html(`<span>${username}</span><span>${telnumber}</span>`); $(".address-txt").text(`${detailinfo}`); } }); } </script>
而直接购买的产品信息,就是通过id获取对应商品信息,绑定在控件上即可,如下界面代码所示。
<!--购买商品信息--> <div class="wy-media-box weui-media-box_text"> <div class="weui-media-box__bd"> <div class="weui-media-box_appmsg ord-pro-list"> <div class="weui-media-box__hd"><a href="pro_info.html"><img id="productimg" class="weui-media-box__thumb" src="" alt=""></a></div> <div class="weui-media-box__bd"> <h1 class="weui-media-box__desc"><a href="/h5/productdetail?id=@request["id"]" class="ord-pro-link"><span id="productname"></span></a></h1> <p class="weui-media-box__desc">规格:<span>套</span></p> <div class="clear mg-t-10"> <div class="wy-pro-pri fl">¥<em class="num font-15" id="price">0</em></div> <div class="pro-amount fr"><div id="spinner-amount" class="spinner"></div></div> </div> </div> </div> </div> </div>
js处理代码如下所示
//绑定产品明细 function getproductdetail() { var url = "/h5/getproductdetail"; var data = { id: "@request["id"]" } //获取数据并绑定界面 $.getjson(url, data, function (result) { $("#productname").text(result.productname); $("#price").text(result.price); $("#productimg").attr("src", result.picture); //$("#description").text(result.description); $("#totalmoney").text(result.price); }); }
而微信支付的处理,我们可以通过参考官方的接口定义来处理我们的代码。
我们先来金额汇总的界面展示,通过按钮我们发起微信支付的处理操作。
<!--金额及发起支付--> <div class="wy-media-box weui-media-box_text"> <div class="mg10-0 t-c">总金额:<span class="wy-pro-pri mg-tb-5">¥<em class="num font-20" id="totalmoney">0</em></span></div> <div class="mg10-0"><a onclick="paymoney()" class="weui-btn weui-btn_primary">微信付款</a></div> <div class="mg10-0"><a href="/h5/productlist" class="weui-btn weui-btn_plain-primary">返回产品列表</a></div> </div>
参考下官方案例,我们处理的js代码如下所示。
//微信支付的调用处理 function onbridgeready() { //统一下单的数据 var total_fee = parsefloat($("#totalmoney").text()) * 100;//转换为分单位 var data = { total_fee: total_fee, //订单金额,单位为分 body: $("#productname").text(), //商品或支付单简要描述 detail: $("#productname").text(), //商品名称明细列表 openid: "@viewbag.openid", //当前用户标识 product_id: "@request["id"]", //商品id, trade_type=native,此参数必传 trade_type: "jsapi", //交易类型, jsapi--公众号支付、native--原生扫码支付、app--app支付 attach: "附加数据", // 附加数据,在查询api和支付通知中原样返回,该字段主要用于商户携带订单的自定义数据 }; //获取预下单参数并调用支付处理 var url = "/h5/getpreorder"; $.getjson(url, data, function (info) { weixinjsbridge.invoke( 'getbrandwcpayrequest', { "appid": info.appid, //公众号名称,由商户传入 "timestamp": info.timestamp, //时间戳,自1970年以来的秒数 "noncestr": info.noncestr, //随机串 "package": info.package, "signtype": info.signtype, //微信签名方式: "paysign": info.paysign //微信签名 }, function (res) { switch (res.err_msg) { case 'get_brand_wcpay_request:cancel': $.alert("取消支付"); break; case 'get_brand_wcpay_request:fail': $.alert("支付失败,可能的原因:签名错误、未注册appid、项目设置appid不正确、注册的appid与设置的不匹配、其他异常等。"); break; case 'get_brand_wcpay_request:ok': $.alert("支付成功"); break; } }); }); } //微信付款 function paymoney() { 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(); } }
这里的支付所需的参数,我们通过后端的/h5/getpreorder 获取生成,然后通过js进行异步发起支付操作。
这个getpreorder主要的操作就是根据我们传入的商品信息,然后获取对应的参数返回给前端。
/// <summary> /// 预生成订单支付需要的前端参数 /// </summary> /// <param name="order">订单数据</param> /// <returns></returns> public actionresult getpreorder(payorderdata order) { dynamic obj = new expandoobject(); if (order != null && order.total_fee > 0) { //调用支付api,获取统一下单数据 var payapi = new tenpayapi(this.accountinfo); var preresult = payapi.unifiedorder(order); var prepay_id = preresult.prepay_id;//预支付回话标识 //生成支付所需数据和签名 wxpaydata data = new wxpaydata(); data.setvalue("appid", accountinfo.appid);//公众帐号id data.setvalue("timestamp", data.generatetimestamp());//随机字符串 data.setvalue("noncestr", data.generatenoncestr());//随机字符串 data.setvalue("package", string.format("prepay_id={0}", prepay_id));//统一下单接口返回的prepay_id参数值,提交格式如:prepay_id=*** data.setvalue("signtype", "md5");//签名类型,默认为md5,支持hmac-sha256和md5。注意此处需与统一下单的签名类型一致 data.setvalue("paysign", data.makesign(accountinfo.payapikey));//签名 //构建一个前端使用的对象,用于配置支付处理的js参数 obj.appid = accountinfo.appid; obj.noncestr = data.getvalue("noncestr"); obj.timestamp = data.getvalue("timestamp"); obj.package = data.getvalue("package"); obj.signtype = data.getvalue("signtype"); obj.paysign = data.getvalue("paysign"); } return tojsoncontent(obj); }
这样我们就可以发起微信支付处理操作了。
当然,我们js方面,除了刚才利用getbrandwcpayrequest 来发起支付处理,我们还可以利用微信jssdk的choosewxpay函数支付发起处理的,如下代码所示。
//发起一个微信支付 function choosewxpay() { //统一下单的数据 var total_fee = parsefloat($("#totalmoney").text()) * 100;//转换为分单位 var data = { total_fee: total_fee, //订单金额,单位为分 body: $("#productname").text(), //商品或支付单简要描述 detail: $("#productname").text(), //商品名称明细列表 openid: "@viewbag.openid", //当前用户标识 product_id: "@request["id"]", //商品id, trade_type=native,此参数必传 trade_type: "jsapi", //交易类型, jsapi--公众号支付、native--原生扫码支付、app--app支付 attach: "附加数据", // 附加数据,在查询api和支付通知中原样返回,该字段主要用于商户携带订单的自定义数据 }; //获取预下单参数并调用支付处理 var url = "/h5/getpreorder"; $.getjson(url, data, function (info) { wx.choosewxpay({ appid: info.appid, timestamp: info.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timestamp字段名需大写其中的s字符 noncestr: info.noncestr, // 支付签名随机串,不长于 32 位 package: info.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***) signtype: info.signtype, // 签名方式,默认为'sha1',使用新版支付需传入'md5' paysign: info.paysign, // 支付签名 success: function (res) { // 支付成功后的回调函数 if (res.errmsg == 'choosewxpay:ok') { $.toast('支付成功'); //settimeout(function () { // window.location.href = "/";//这里默认跳转到主页 //}, 2000); //window.location.href = "/pay/order_details?orderid=" + $("#orderid").val(); } else if (res.errmsg == 'choosewxpay:cancel' || res.errmsg == 'choosewxpay:fail') { $.toast("支付失败"); //window.location.href = "/pay/order_details?orderid=" + $("#orderid").val(); } }, cancel: function () { $.toast("用户取消了支付2"); //window.location.href = "/pay/order_details?orderid=" + $("#orderid").val(); } }); wx.error(function (res) { $.toast("调用支付出现异常"); }); }); }
同样可以实现一样的微信支付效果。
2、商品的购物车处理
前面介绍过,购物车可以从本地的localstorage对象进行获取和处理,也可通过接口获取数据库记录的购物车信息,本案例介绍通过localstorage进行购物车处理方式。
为了封装对localstorage购物车的处理,我们引入一个对这个购物车的操作处理,主要就是添加、更新、获取列表、清空列表等相关操作。
对于以上js的代码使用demo代码如下所示。
<script> $(function () { var product = { 'id': 1, 属性名用引号括起来,属性间由逗号隔开 'name': '商品1', 'num': 1, 'price': 1 }; cart.addproduct(product); 商品加入到购物车 var productlist = cart.getproductlist(); 取出购物车商品 console.log(productlist); var isexist = cart.existproduct(); console.log(isexist); cart.deleteproduct(1); var isexist1 = cart.existproduct(); console.log(isexist1); }); </script>
购物车列表界面如下所示,主要就是展开存储里面的商品信息,并汇总展示,如下所示。
这个页面视图的代码如下所示。
<!--主体--> <header class="wy-header"> <div class="wy-header-icon-back"><span></span></div> <div class="wy-header-title">购物车</div> </header> <div class="weui-content" id="divcart"> </div> <!--底部导航--> <div class="foot-black"></div> <div class="weui-tabbar wy-foot-menu"> <div class="npd cart-foot-check-item weui-cells_checkbox allselect"> <div class="weui-cell allsec-well weui-check__label" for="all"> <div class="weui-cell__hd"> <input type="checkbox" class="weui-check" name="all-sec" id="all"> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p class="font-14">全选</p> </div> </div> </div> <div class="weui-tabbar__item npd"> <p class="cart-total-txt">合计:<i>¥</i><em class="num font-16" id="zong1">0.00</em></p> </div> <a href="/h5/shopcartorder" class="red-color npd w-90 t-c"> <p class="promotion-foot-menu-label">去结算</p> </a> </div>
这里主要就是根据数据,动态构建divcart里面的列表数据,相关的js代码如下所示。
//显示购物车列表 function showcartlist() { var productlist = cart.getproductlist(); //取出购物车商品 $("#divcart").html(""); //构建html控件 $.each(productlist, function (i, item) { var html = ` <div class="weui-panel weui-panel_access"> <div class="weui-panel__hd"><span>广州爱奇迪</span><a href="javascript:;" class="wy-dele"></a></div> <div class="weui-panel__bd"> <div class="weui-media-box_appmsg pd-10"> <div class="weui-media-box__hd check-w weui-cells_checkbox"> <div class="weui-check__label" for="cart-pto1"> <div class="weui-cell__hd cat-check"><input type="checkbox" class="weui-check" name="cartpro" id="cart-pto1"><i class="weui-icon-checked"></i></div> </div> </div> <div class="weui-media-box__hd"><a href="/h5/productdetail?id=${item.id}"><img class="weui-media-box__thumb" src="${item.picture}" alt=""></a></div> <div class="weui-media-box__bd"> <h1 class="weui-media-box__desc"><a href="/h5/productdetail?id=${item.id}" class="ord-pro-link">${item.name}</a></h1> <p class="weui-media-box__desc">规格:<span>套</span></p> <div class="clear mg-t-10"> <div class="wy-pro-pri fl">¥<em class="num font-15">${item.price}</em></div> <div class="pro-amount fr"> <div class="weui-count"> <a class="weui-count__btn weui-count__decrease"></a> <input class="weui-count__number" type="number" value="${item.num}" /> <a class="weui-count__btn weui-count__increase"></a> <input type="hidden" class="pro-id" value="${item.id}"/> </div> </div> </div> </div> </div> </div> </div>`; $("#divcart").append(html); }); ...................
对于数量的修改,我们同时修改购物车里面的数据即可,如下代码所示。
//对数量改变进行处理,更新购物车的对应产品id的数量 var max = 99, min = 1; $('.weui-count__decrease').each(function (i) { $(this).click(function (e) { var $input = $(e.currenttarget).parent().find('.weui-count__number'); var number = parseint($input.val() || "0") - 1 if (number < min) number = min; $input.val(number); var id = $(e.currenttarget).parent().find(".pro-id").val(); updateproductnum(id, number); }); }); $('.weui-count__increase').each(function (i) { $(this).click(function (e) { var $input = $(e.currenttarget).parent().find('.weui-count__number'); var number = parseint($input.val() || "0") + 1 if (number > max) number = max; $input.val(number); var id = $(e.currenttarget).parent().find(".pro-id").val(); updateproductnum(id, number); }); });
其中updateproductnum是对购物车数据的修改。
//修改购物车的内容 function updateproductnum(id, number) { console.log(id + ':' + number); cart.updateproductnum(id, number); //显示数量和金额 var amount = orderdetail.totalamount;//获取购物车的总金额 $("#zong1").text(amount); }
购物车的清空指定商品的js代码如下所示。
$(document).on("click", ".wy-dele", function () { $.confirm("您确定要把此商品从购物车删除吗?", "确认删除?", function () { var id = $(this).parent().parent().find(".pro-id").val(); cart.clearproduct(id);//移除指定商品 showcartlist();//更新列表 $.toast("文件已经删除!"); }, function () { //取消操作 }); });
购物车的结算页面,前面介绍过了,就是如下图所示,类似我们直接购买商品的界面。
这个地方主要差异在于也是动态获取一个或多个商品记录的信息,如下所示。
html视图界面代码如下所示。
<div id="divcart"> @*<div class="wy-media-box weui-media-box_text"> <div class="weui-media-box__bd"> <div class="weui-media-box_appmsg ord-pro-list"> <div class="weui-media-box__hd"><a href="pro_info.html"><img id="productimg" class="weui-media-box__thumb" src="" alt=""></a></div> <div class="weui-media-box__bd"> <h1 class="weui-media-box__desc"><a href="/h5/productdetail?id=@request["id"]" class="ord-pro-link"><span id="productname"></span></a></h1> <p class="weui-media-box__desc">规格:<span>套</span></p> <div class="clear mg-t-10"> <div class="wy-pro-pri fl">¥<em class="num font-15" id="price">0</em></div> <div class="pro-amount fr"><span class="font-13">数量×<em class="name">1</em></span></div> </div> </div> </div> </div> </div>*@ </div>
js代码主要就是动态构建列表,divcart里面的内容实现根据购物车商品列表进行处理,如下代码所示。
//显示购物车列表 function showcartlist() { var productlist = cart.getproductlist(); //取出购物车商品 $("#divcart").html(""); //构建html控件 var html = ""; $.each(productlist, function (i, item) { html += ` <div class="wy-media-box weui-media-box_text"> <div class="weui-media-box__bd"> <div class="weui-media-box_appmsg ord-pro-list"> <div class="weui-media-box__hd"><a href="/h5/productdetail?id=${item.id}"><img id="productimg" class="weui-media-box__thumb" src="${item.picture}" alt=""></a></div> <div class="weui-media-box__bd"> <h1 class="weui-media-box__desc"><a href="/h5/productdetail?id=${item.id}" class="ord-pro-link">${item.name}</a></h1> <p class="weui-media-box__desc">规格:<span>套</span></p> <div class="clear mg-t-10"> <div class="wy-pro-pri fl">¥<em class="num font-15" id="price">${item.price}</em></div> <div class="pro-amount fr"><span class="font-13">数量×<em class="name">${item.num}</em></span></div> <input type="hidden" class="pro-id" value="${item.id}"/> </div> </div> </div> </div> </div>`; }); $("#divcart").append(html); //显示数量和金额 var amount = orderdetail.totalamount;//获取购物车的总金额 $("#totalmoney").text(amount); }
上一篇: 完全零基础在Linux中安装 JDK