利用微信公众号实现商品的展示和支付（2）,利用微信公众号实现商品的展示和支付（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>
            <di