微信小程序微商城（八）：缓存实现商品购物车功能

Myth丶恋晨 2022-05-20 09:21 538阅读 0赞

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

上一篇：[微信小程序微商城（七）：动态API实现商品分类][API]

看效果

![61556ac935632a7b9c1e7f9ff53fb680.gif][]

购物车.gif

开发计划

1、商品详情页将商品信息放入缓存
    2、购物车页面读取缓存获取商品信息
    3、购物车商品计算和删除缓存商品

一、商品详情页将商品信息放入缓存

detail.wxml

绑定bindtap事件将商品加入购物车。

detail.js

/**
       * 加入购物车
       */
      addCar: function (e) {    
        var goods = this.data.goods;
        goods.isSelect=false;    
        var count = this.data.goods.count;    
        var title = this.data.goods.title;    
        if (title.length > 13) {
          goods.title = title.substring(0, 13) + '...';
        }    
        // 获取购物车的缓存数组（没有数据，则赋予一个空数组）  
        var arr = wx.getStorageSync('cart') || [];    
        console.log("arr,{}", arr);    
        if (arr.length > 0) {      
            // 遍历购物车数组  
          for (var j in arr) {        
            // 判断购物车内的item的id，和事件传递过来的id，是否相等  
            if (arr[j].goodsId == goodsId) {          
            // 相等的话，给count+1（即再次添加入购物车，数量+1）  
              arr[j].count = arr[j].count + 1;          
            // 最后，把购物车数据，存放入缓存（此处不用再给购物车数组push元素进去，因为这个是购物车有的，直接更新当前数组即可）  
              try {
                wx.setStorageSync('cart', arr)
              } catch (e) {            
                console.log(e)
              }          
            //关闭窗口
              wx.showToast({            
                title: '加入购物车成功！',            
                icon: 'success',            
                duration: 2000
              });          
            this.closeDialog();          
                // 返回（在if内使用return，跳出循环节约运算，节约性能） 
              return;
            }
          }      
            // 遍历完购物车后，没有对应的item项，把goodslist的当前项放入购物车数组  
          arr.push(goods);
        } else {
          arr.push(goods);
        }    
        // 最后，把购物车数据，存放入缓存  
        try {
          wx.setStorageSync('cart', arr)      
            // 返回（在if内使用return，跳出循环节约运算，节约性能） 
          //关闭窗口
          wx.showToast({        
             title: '加入购物车成功！',        
             icon: 'success',        
             duration: 2000
          });      
            this.closeDialog(); 
          return;
        } catch (e) {      
            console.log(e)
        }
      }

二、购物车页面读取缓存获取商品信息

cart.wxml

<view class="J-shopping-cart-empty" hidden="{
       {iscart}}"><view class="shopping-cart-empty">
            <view class="bg"></view> 
            <view class="cart"></view>
            <text class='empty-text'>购物车空空如也</text>  
            <p></p>
            <navigator url="/pages/goods/goods">
             <a href="//m.vip.com" class="button button-primary" >
                去抢购        </a>
            </navigator>
        </view></view> <view class="scroll" hidden="{
       {hidden}}"><scroll-view class="scroll" scroll-y="true">
      <view class="separate"></view>
      <view wx:for="{
       {carts}}">
        <view class="cart_container">  
          <view  wx:if="{
       {!item.isSelect}}">
                <icon class="item-select" bindtap="switchSelect" data-index="{
       {index}}" data-id="{
       {index}}"  type="circle" size="20"></icon>
          </view>
          <view wx:elif="{
       {item.isSelect}}">
                <icon class="item-select" bindtap="switchSelect" data-index="{
       {index}}" data-id="{
       {index}}"  type="success" color="#f0145a" size="20"></icon>
          </view>
    
          <image class="item-image" src="{
       {item.imgUrl}}"></image>
          <import src="../template/template.wxml" />
          <view class="column">
            <text class="title">{
       {item.title}}</text>
             <image bindtap="delGoods" id="img{
       {index}}" data-index="{
       {index}}" src="../../images/del.png"></image> 
            <view class="row">
              <text class="sku-price">￥{
       {item.price * item.count}}</text>
              <view class="sku">
                  <template is="quantity"  data="{
       { ...item,index:index}}" /> 
              </view>
            </view>
    
          </view>
        </view>
        <view class="separate"></view>
      </view></scroll-view></view>
     <view class="bottom_total" hidden="{
       {hidden}}">
      <view class="bottom_line"></view>
    
      <view class="row">
    
        <view  wx:if="{
       {!isAllSelect}}">
                <icon class="item-allselect" bindtap="allSelect" type="circle" size="20"></icon>
          </view>
          <view wx:elif="{
       {isAllSelect}}">
                <icon class="item-allselect" bindtap="allSelect" type="success" color="#f0145a" size="20"></icon>
          </view>
        <text class="small_text">全选</text>
        <text>合计:￥ </text>
        <text class="price">{
       {totalMoney}}</text>
        <button class="button-red" bindtap="toBuy" formType="submit">去结算      </button>
      </view></view>

cart.wxss

@import "../template/template.wxss"; 
    page{  
      background: #f3f4f5;  
      /* font-size: 37.5px;  */
    }  
     .column image {  
         width:33rpx;  
         height:35rpx;  
         display:inline-block;  
         overflow:hidden;  
         float:right;  
         margin-top: -40rpx;  
         margin-left:400rpx;
    } 
     .J-shopping-cart-empty{    
         margin: 0;    
         padding: 0;    
         border: 0;    
         font: inherit;    
         font-size: 100%;    
         vertical-align: baseline;
    }
    .shopping-cart-empty {   
        height: 250px;    
        padding-top: 3.2rem;    
        padding-bottom: 1.6rem;    
        background-color: #fff;    
        text-align: center;    
        position: relative;
    } 
    .shopping-cart-empty .bg{    
        position: absolute;    
        width: 16.29333rem;    
        height: 6.73333rem;    
        
        background: transparent url(data:image/png;base64,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);    
        left: 50%;    
        -webkit-transform: translateX(-50%);    
        transform: translateX(-50%);      
        background-size: 100%;    
        top: 0;
    } 
    .shopping-cart-empty .cart{        
        width: 5.83333rem;    
        height: 7.46rem;    
        background: transparent url(data:image/png;base64,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) no-repeat;  
        background-size: 100%;    
        margin: 0 auto;
    }  
    .shopping-cart-empty .button {   
        width: 8.46667rem;    
        height: 1.5rem;    
        display: block;    
        margin: 20rpx auto;
    }
    .empty-text {    
        font-size: .64667rem;    
        color: #222;    
        margin-top: .53333rem;    
        line-height: .74667rem;    
        font-weight: 400;
    }
    .button-primary {    
        border: 1px solid #de3c96;    
        color: #de3c96;    
        text-decoration: none;    
        text-align: center;    
        display: block;    
        border-radius: .21267rem;    
        line-height: 1.5rem;    
        -webkit-appearance: none;    
        background: none;    
        padding: 0 .26667rem;    
        margin: 0;    
        white-space: nowrap;    
        position: relative;    
        text-overflow: ellipsis;    
        font-size: .74333rem;    
        font-family: inherit;    
        cursor: pointer;    
        user-select: none;
    } 
    
    
    .cart_container {  
        display: flex;  
        flex-direction: row;  
        background-color: #FFFFFF;  
        margin-bottom: 10rpx;
    }
    .scroll {   
        margin-bottom: 120rpx; 
    }
    .column {  
        display: flex;  
        flex-direction: column;
    }
    .row { 
        display: flex;  
        flex-direction: row;   
        align-items: center;
    }
    .sku {  
        margin-left: 100rpx;  
        position: absolute;  
        right: 30rpx;  
        margin-top: 30rpx; 
    }
    .sku-price {  
        color: red;  
        position: relative;   
        margin-top: 30rpx; 
    }
    .price {  
        color: red;  
        position: relative;
    }
    .title {  
        font-size: 32rpx;  
        margin-top: 40rpx;
    }
    .small_text {  
        font-size: 28rpx;  
        margin-right: 40rpx;  
        margin-left: 25rpx;
    }
    .item-select {  
        width: 40rpx;  
        height: 40rpx;  
        margin-top: 90rpx;  
        margin-left: 20rpx;
    }
    .item-allselect {  
        width: 40rpx;  
        height: 40rpx; 
        margin-left: 20rpx;   
        margin-top:25rpx;   
    }
    .item-image {  
        width: 180rpx;  
        height: 180rpx;  
        margin: 20rpx;
    } 
    .bottom_line {  
        width: 100%;  
        height: 2rpx;  
        background: lightgray;
    } 
    .bottom_total {  
        position: fixed;  
        display: flex;  
        flex-direction: column;  
        bottom: 0;  
        width: 100%;  
        height: 120rpx;  
        line-height: 120rpx;  
        background: white;  /* margin-top: 300rpx; */
        border-top: 1rpx solid #ccc;  z-index: 99;
    }
    .button-red {  
        background-color: #f0145a; 
        position: fixed;  
        right: 0;  
        color: white;  
        text-align: center;  
        display: inline-block;  
        font-size: 30rpx;  
        border-radius: 0rpx;  
        width: 30%;  
        height: 120rpx;  
        line-height: 120rpx;  /* border: 1rpx solid #ccc; */
    }

cart.js

/**
       * 页面的初始数据
       */
      data: {    
        carts: [], //数据 
        iscart: false,    
        hidden: null,    
        isAllSelect: false,    
        totalMoney: 0,
      },
    onShow: function () {    
        // 获取产品展示页保存的缓存数据（购物车的缓存数组，没有数据，则赋予一个空数组）  
        var arr = wx.getStorageSync('cart') || [];    
        console.info("缓存数据："+arr);    // 有数据的话，就遍历数据，计算总金额 和 总数量  
        if (arr.length > 0) {      
            // 更新数据  
          this.setData({        
            carts: arr,        
            iscart: true,        
            hidden: false
          });      
            console.info("缓存数据：" + this.data.carts);
        }else{      
            this.setData({        
                iscart: false,        
                hidden: true,
          });
        }
      },

三、购物车商品计算和删除缓存商品

cart.js

//勾选事件处理函数  
      switchSelect: function (e) {    
        // 获取item项的id，和数组的下标值  
        var Allprice = 0, i = 0;    
        let id = e.target.dataset.id,
    
          index = parseInt(e.target.dataset.index);    
        this.data.carts[index].isSelect = !this.data.carts[index].isSelect;    //价钱统计
        if (this.data.carts[index].isSelect) {      
            this.data.totalMoney = this.data.totalMoney + (this.data.carts[index].price * this.data.carts[index].count);
        }    else {      
            this.data.totalMoney = this.data.totalMoney - (this.data.carts[index].price * this.data.carts[index].count);
        }    
        //是否全选判断
        for (i = 0; i < this.data.carts.length; i++) {
          Allprice = Allprice + (this.data.carts[index].price * this.data.carts[index].count);
        }    
        if (Allprice == this.data.totalMoney) {      
            this.data.isAllSelect = true;
        }    else {      
            this.data.isAllSelect = false;
        }    
        this.setData({      
            carts: this.data.carts,      
            totalMoney: this.data.totalMoney,      
            isAllSelect: this.data.isAllSelect,
        })
      },  
        //全选
      allSelect: function (e) {   
         //处理全选逻辑
        let i = 0;    
         if (!this.data.isAllSelect) {      
             this.data.totalMoney = 0;      
             for (i = 0; i < this.data.carts.length; i++) {        
                 this.data.carts[i].isSelect = true;        
                 this.data.totalMoney = this.data.totalMoney + (this.data.carts[i].price * this.data.carts[i].count);
    
          }
        }    else {      
            for (i = 0; i < this.data.carts.length; i++) {        
                this.data.carts[i].isSelect = false;
          }      
                this.data.totalMoney = 0;
        }    
                this.setData({      
                    carts: this.data.carts,      
                    isAllSelect: !this.data.isAllSelect,      
                    totalMoney: this.data.totalMoney,
        })
      },  // 去结算
      toBuy() {
        wx.showToast({      
           title: '去结算',      
           icon: 'success',      
           duration: 3000
        });    
        this.setData({      
           showDialog: !this.data.showDialog
        });
      },  //数量变化处理
      handleQuantityChange(e) {    
          var componentId = e.componentId;    
          var quantity = e.quantity;    
          this.data.carts[componentId].count.quantity = quantity;    
          this.setData({      
             carts: this.data.carts,
        });
      },  
       /* 减数 */
      delCount: function (e) {    
       var index = e.target.dataset.index;    
       console.log("刚刚您点击了加一");    
       var count = this.data.carts[index].count;    // 商品总数量-1
        if (count > 1) {      
           this.data.carts[index].count--;
        }    
           // 将数值与状态写回  
        this.setData({      
           carts: this.data.carts
        });    
           console.log("carts:" + this.data.carts);    
           this.priceCount();
      },  
           /* 加数 */
      addCount: function (e) {    
           var index = e.target.dataset.index;    
           console.log("刚刚您点击了加+");    
           var count = this.data.carts[index].count;    // 商品总数量+1  
        if (count < 10) {      
           this.data.carts[index].count++;
        }    
           // 将数值与状态写回  
        this.setData({      
           carts: this.data.carts
        });    
           console.log("carts:" + this.data.carts);    
           this.priceCount();
      }, 
      priceCount: function (e) {    
          this.data.totalMoney = 0;    
          for (var i = 0; i < this.data.carts.length; i++) {      
          if (this.data.carts[i].isSelect == true) {        
              this.data.totalMoney = this.data.totalMoney + (this.data.carts[i].price * this.data.carts[i].count);
          }
    
        }    
              this.setData({      
                  totalMoney: this.data.totalMoney,
            })
      },  
      /* 删除item */
      delGoods: function (e) {    
          this.data.carts.splice(e.target.id.substring(3),1);    // 更新data数据对象  
        if (this.data.carts.length > 0) {      
              this.setData({        
                  carts: this.data.carts
          })
          wx.setStorageSync('cart', this.data.carts);      
                  this.priceCount();
        } else {      
                  this.setData({            
                      cart: this.data.carts,        
                      iscart: false,        
                      hidden: true,
          })
          wx.setStorageSync('cart', []);
        }
      }

备注

微信小程序微商城系列 都是通过https 动态获取数据并展示的，建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去，谢谢各位！大家在使用过程中有哪些建议可以提出来，我们一起学习哈~~~

微信小程序微商城系列

[微信小程序微商城：开发者key获取][key]  
[微信小程序微商城（一）：https框架搭建并实现导航功能][https]  
[微信小程序微商城（二）：电商首页轮播、分类导航和新品特卖实现][Link 1]  
[微信小程序微商城（三）：电商首页福利专场无限下拉刷新动态API数据实现][API 1]  
[微信小程序微商城（四）：动态API实现商品详情页（上）][API 2]  
[微信小程序微商城（五）：动态API实现商品详情页（下）][API 3]  
[微信小程序微商城（六）：动态API实现新品特卖商品流式布局][API 4]  
[微信小程序微商城（七）：动态API实现商品分类][API 5]

关注我们

如果需要源码可以关注“IT实战联盟”公\*众\*号并留言（微商城源码，5个字会收到源码下载地址，一定要看源码里面的操作手册会少走很多弯路），也可以加入交流群和作者互撩哦~~~

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

[http_blog.100boot.cn]: http://blog.100boot.cn/
[API]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484642&idx=1&sn=3f7f2f92d2d087838d5ececcd29bbedd&chksm=fc4df6a3cb3a7fb571795c3825670d53314dac44cfd756ec71a6d2c43e936cecb5fdd5368b3c&mpshare=1&scene=21&srcid=0716zjdqO1q9zi5GUCAusN35&key=7124b505fbe8e19488d6305e6574903343808c340e93c7304774cd2b6f43c45af86c9be231ae835ec8384c6bce04241bdf8f106cc6c8ebfda96d399804366b9ea594c5edfbfd658d5d687316b0a6d571&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=JapGSUpZUDPhMJpIVJhZwo3ZrPThTfV/aUjt2/xyHyqNzwYvMQ4xjS3MLA51vtEu#wechat_redirect
[61556ac935632a7b9c1e7f9ff53fb680.gif]: /images/20220520/dae646a4d9f8477e8a29dae1e0dd37ba.png
[key]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484489&idx=2&sn=fc4d45faecbd7d702298aeee26cb389a&chksm=fc4df608cb3a7f1eda90f46b2119f3f57552f69c0aeac475d3320f6a3e252b1ea664fa7be2e3&mpshare=1&scene=21&srcid=0613CgkG8U8GmYCgMLNwf0SQ&key=0ca581e96f9f14296135cd5c62f3396e5b142b077a4b28dc59f9d2660b1615e4c29e32f353744b14703530eb2c1401ed93b62db580cf8d37021539c994c20528da24c59e7513c166bc48b341bb2f6165&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[https]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484489&idx=1&sn=b30937e849bece0968ea07ac72b83d11&chksm=fc4df608cb3a7f1ea60ab5b51108c080baa1a79c75c8a7231421d85ec07c7c0ef713cc772b84&mpshare=1&scene=21&srcid=0613hky4NypPiIvTYp7yPXEK&key=cb58026704e90da05c9bb8c1e0058f00378cf7005c217c2f2b9fec70ac71b74a51e2000b118aa9b882a0e5a35ca7b536920fa63b700d4c624a71e31c5ddc4925cb70cfe3e5ec46ca9841ffa357610357&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484498&idx=1&sn=03bd2b638203a9fd3bc5314cf96a0f5a&chksm=fc4df613cb3a7f0557f113ef814d06ca28c395fd5053756eda4811c7df6fa95604f9171fe383&mpshare=1&scene=21&srcid=06136trF43RMxRkzdSpLrSm1&key=28a021edb6a1ada0e2e6b8a9e3d4ed36e9a02977c3ac3d4414ed747e08e5ab6952338ea87fed34f2a5064003302a2773b0652665c21743b43b9943cf819bd90eb830887b0919c2fa5453c04b72910225&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[API 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484532&idx=1&sn=2fddf4e443288e3fec41393fa751a0df&chksm=fc4df635cb3a7f23c8c846c57a543b15f9aff5f3cbd66a2d0cb40bec236c233f3385cfbc54da&mpshare=1&scene=21&srcid=0613oKpIiyVZLjDtjc9k33BD&key=abba1b7731e3ee594e57918b9830a98c76a76dc40fdb0b7cbc313afa8e9a71043f6b58c675129778ac8f55a62526dc735b90ef574155ada0253b36c0ac82f89400626cf41e3ed5a6069d75d71447c811&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[API 2]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484573&idx=1&sn=532c79a23a34124f12fe18742862a065&chksm=fc4df6dccb3a7fcaf8bfa9e01677ba9e039df1626a4860b6babc2eaed0b441e1bfa6c78b8cac&mpshare=1&scene=21&srcid=06253QOBZClvSa6AWZCUiPHs&key=a4e2496d259028b023ae234f79eb7f7236f147c293aac7232090dbbe47380e30ae9c324096a5118986094382b61eed4321f0390a7def09f11c60edbd8f7f7af6c2207379e9d2ac8a75935bc7a4fd7b62&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=RiQfX7aFv1krSBkA4l9rb5O6TBfs0c0irkk7oYxMb8Kq7w/qrnJYQiMPOsoaemxD#wechat_redirect
[API 3]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484602&idx=1&sn=266f52c93555991342a53c54023e1cd6&chksm=fc4df6fbcb3a7fedf6955106d6a334ff261c9eccc4ef21d018e779a05e55a7a385c2dc3e198a&mpshare=1&scene=21&srcid=0629lHl8WErLVb5wLrGgxbzk&key=0858e38169824f6534380e37725cf31f96d30d43b0b9cf1b2e5fe21023cca8d2a17d8cc11c3b719f0995b1f9b6d94a92647ba1120a29b51dfdc6dd9627d38b8de1172ebb7ab60adf3165dfde4fdb9575&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=B/jVtPW4CBO7Y1M2PVvZJTsypbCj7Cq/R1MXoEZenwDn1b3Ke7p4ExqI%20bsdxrwD#wechat_redirect
[API 4]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484618&idx=1&sn=19d13006f5c2de9bca116f9a07eabffc&chksm=fc4df68bcb3a7f9daef274aa660c003d4a3f779ef7e88b6e5bc1a1549a39e419283c7d059d1f&mpshare=1&scene=21&srcid=0710OAyxIUC7gaqbp2Fu1naO&key=e4a49b375d6ee2523ba149218dc5f7058754dc6bafe7e2fb77270fab49eb9a3cc1a5a450940da2f5a70694f4b3236a3721493da752537062e67b54f68c9a7e5e35ee4cf01a92ec6efc692bb2f34f9514&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=LnFpt2WbaHWzS6SpgE0YXJmGsyZdHR1ZkrH4KDe/SbmL2QXo3agnduejh8Qi0P28#wechat_redirect
[API 5]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484642&idx=1&sn=3f7f2f92d2d087838d5ececcd29bbedd&chksm=fc4df6a3cb3a7fb571795c3825670d53314dac44cfd756ec71a6d2c43e936cecb5fdd5368b3c&mpshare=1&scene=21&srcid=0716zjdqO1q9zi5GUCAusN35&key=a4e2496d259028b0116de61c041ad35cc5cabb78cebaaf6cf1aa9138cf04ab90e878b3e8ab6b87bc5c013e1fa175c4691215e59cedc2d7889e9dfe0332bd0dac41e19b7925046f1895563a2e07b73e16&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=JapGSUpZUDPhMJpIVJhZwo3ZrPThTfV/aUjt2/xyHyqNzwYvMQ4xjS3MLA51vtEu#wechat_redirect