【干货】，分享自己做过的一个带二级分销、支付等功能的微信小程序（已上线）

先放几张效果图吧！





我之前是做安卓开发的，前段时间帮朋友开发了一款小程序。
前端学过html+css+js的童鞋应该对里面的一些语法都都很熟悉了，这里主要说下商品加入购物车的一些逻辑，我这里用的是将商品信息的数组缓存到storage的方法，购物车直接get到内存中那个数组名。还有弹出选择框这里也遇到了一些坑。我这里后端用的是php，对于一个做安卓的java????来说，php里面的一些东西还是花了一些时间去了解。下面是微信支付wxpayapi的jsapi代码，具体的这个文件可以去微信开发者文档里下载。

<?php 
ini_set('date.timezone','Asia/Shanghai');
//error_reporting(E_ERROR);
require_once "../lib/WxPay.Api.php";
require_once "WxPay.JsApiPay.php";
require_once 'log.php';

//初始化日志
// $logHandler= new CLogFileHandler("../logs/".date('Y-m-d').'.log');
// $log = Log::Init($logHandler, 15);

//打印输出数组信息
// function printf_info($data)
// {
//     foreach($data as $key=>$value){
//         echo "<font color='#00ff55;'>$key</font> : $value <br/>";
//     }
// }

//①、获取用户openid
$tools = new JsApiPay();
$openId = $tools->GetOpenid();

//②、统一下单
$input = new WxPayUnifiedOrder();
$input->SetBody("test");
$input->SetAttach("test");
$input->SetOut_trade_no(WxPayConfig::MCHID.date("YmdHis"));
$input->SetTotal_fee("1");
$input->SetTime_start(date("YmdHis"));
$input->SetTime_expire(date("YmdHis", time() + 10));
$input->SetGoods_tag("test");
$input->SetNotify_url("http://paysdk.weixin.qq.com/example/notify.php");
$input->SetTrade_type("JSAPI");
$input->SetOpenid($openId);
$order = WxPayApi::unifiedOrder($input);
//echo '<font color="#f00"><b>统一下单支付单信息</b></font><br/>';
//printf_info($order);
$jsApiParameters = $tools->GetJsApiParameters($order);
echo $jsApiParameters;

//获取共享收货地址js函数参数
$editAddress = $tools->GetEditAddressParameters();

//③、在支持成功回调通知中处理成功之后的事宜，见 notify.php
/**
 * 注意：
 * 1、当你的回调地址不可访问的时候，回调通知会失败，可以通过查询订单来确认支付是否成功
 * 2、jsapi支付时需要填入用户openid，WxPay.JsApiPay.php中有获取openid流程 （文档可以参考微信公众平台“网页授权接口”，
 * 参考http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html）
 */
 
?>

下面是部分前端代码：

<view class="main">
    <view wx:if="{{hasList}}">
        <view class="cart-box">
            <view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}">
                <icon wx:if="{{item.selected}}" type="success" color="red" data-index="{{index}}"  class="cart-pro-select" bindtap="selectList"/>
                <icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/>
                <navigator url="../details/details?id={{item.id}}"><image class="cart-thumb" src="{{item.image}}"></image></navigator>
                <text class="cart-pro-name">{{item.title}}</text>
                <text class="cart-pro-price">￥{{item.price}}</text>
                <view class="textview">
                <text style=" font-size: 30rpx; color:#C0C0C0;">{{item.sub}}</text>
                </view>
                <view class="cart-count-box">
                    <text class="cart-count-down" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</text>
                    <text class="cart-count-num">{{item.num}}</text>
                    <text class="cart-count-add" bindtap="addCount" data-index="{{index}}">+</text>
                </view>
                <text class="cart-del" bindtap="deleteList" data-index="{{index}}">×</text>
            </view>
        </view>

        <view class="cart-footer">
            <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" class="total-select" bindtap="selectAll"/>
            <icon wx:else type="circle" color="#fff" class="total-select" bindtap="selectAll"/>
            <view class="order-icon">
                <image bindtap="submitOrder" src="/images/icon1.png"></image>
            </view>
            <text>全选</text>
            <text class="cart-toatl-price">￥{{totalPrice}}</text>
        </view>
    </view>
    <view wx:else>
        <view class="cart-no-data">购物车是空的哦~</view>
    </view>
</view>

// page/component/new-pages/cart/cart.js
//var cars=new Cars(); //实例化 购物车
Page({
  data: {
    carts:[],               // 购物车列表
    hasList:false,          // 列表是否有数据
    totalPrice:0,           // 总价，初始为0
    selectAllStatus:true,    // 全选状态，默认全选
    obj:{
        name:"hello"
    }
  },
  onShareAppMessage: function (res) {
    var a = wx.getStorageSync("id")
    var b = wx.getStorageSync("name")
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {

      title: '名片500张仅19元 全国包邮 货到付款，转发可享受更多优惠价',


      path: '/pages/mine/mine?id=' + a + '&sub=' + b,
      success: function (res) {
        // 转发成功
        wx.showModal({
          title: '提示',
          content: '转发成功',

        })

      },
      fail: function (res) {
        // 转发失败
      }
    }
  },

  // 分割线
  onShow() {

     var that = this;
     var id1 = wx.getStorageSync('cart1') || [];
      var id2 = wx.getStorageSync('cart2') || [];
       var id3 = wx.getStorageSync('cart3') || [];
       var id4 = wx.getStorageSync('cart4') || [];
       var id5 = wx.getStorageSync('cart5') || [];//名片类，安格纸
       var id6 = wx.getStorageSync('cart6') || [];
       var id7 = wx.getStorageSync('cart7') || [];
       var id8 = wx.getStorageSync('cart8') || [];
       var id9 = wx.getStorageSync('cart9') || [];
       var id10 = wx.getStorageSync('cart10') || [];
       var id11 = wx.getStorageSync('cart11') || [];
       var id12 = wx.getStorageSync('cart12') || [];
       var id13 = wx.getStorageSync('cart13') || [];
       var id14 = wx.getStorageSync('cart14') || [];//哑面
       var id15 = wx.getStorageSync('cart15') || [];
       var id16 = wx.getStorageSync('cart16') || [];
       var id17 = wx.getStorageSync('cart17') || [];
       var id18 = wx.getStorageSync('cart18') || [];
     console.log(id1);
     console.log(id2);
     var sub1 = id1.concat(id2).concat(id3).concat(id4).concat(id5).concat(id6).concat(id7).concat(id8).concat(id9).concat(id10).concat(id11).concat(id12).concat(id13).concat(id14).concat(id15).concat(id16).concat(id17).concat(id18);
    

that.setData({ 
   hasList: true,
  carts: sub1,
  

});
this.getTotalPrice();
  },

   /*提交订单*/
    submitOrder:function(flag){
       var res = this.data.carts;
      
        if(!res){
            res=[];
        }
        //在下单的时候过滤不下单的商品，
        if(flag){
            var newRes=[];
            for(let i=0;i<res.length;i++){
                if(res[i].selected){
                    newRes.push(res[i]);
                }
            }
            res=newRes;
             console.log(res);
             wx.setStorageSync('res', res);
        }

       
        wx.navigateTo({
            url:'../orders/orders?account='+this.data.account+'&from=cars'
        });
    },
  /**
   * 当前商品选中事件
   */
  selectList(e) {
    console.log(e);
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    const selected = carts[index].selected;
    console.log(selected);
    var id=carts[index].id;
    console.log(id);
    carts[index].selected = !selected;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
  },


  

  /**
   * 删除购物车当前商品
   */
  deleteList(e) {
    const index = e.currentTarget.dataset.index;
    
    
    let carts = this.data.carts;
    console.log(e);
    console.log(carts);
    var id=carts[index].id;
    console.log(id);
    carts.splice(index,1);

    if(id==1){
    wx.removeStorageSync('cart1');
   
   
    }
    // 分割线
    if (id == 2) {
      wx.removeStorageSync('cart2');
    }
    // 分割线
    if (id == 3) {
      wx.removeStorageSync('cart3');
    }
    // 分割线
    if (id == 4) {
      wx.removeStorageSync('cart4');
    }
    // 分割线
    if (id == 5) {
      wx.removeStorageSync('cart5');
    }
    // 分割线
    if (id == 6) {
      wx.removeStorageSync('cart6');
    }
    // 分割线
    if (id == 7) {
      wx.removeStorageSync('cart7');
    }
    // 分割线
    if (id == 8) {
      wx.removeStorageSync('cart8');
     
    }
    // 分割线
    if (id == 9) {
      wx.removeStorageSync('cart9');

    }
    // 分割线
    if (id == 10) {
      wx.removeStorageSync('cart10');

    }
    // 分割线
    if (id == 11) {
      wx.removeStorageSync('cart11');

    }
    // 分割线
    if (id == 12) {
      wx.removeStorageSync('cart12');

    }
    // 分割线
    if (id == 13) {
      wx.removeStorageSync('cart13');

    }
    // 分割线
    if (id == 14) {
      wx.removeStorageSync('cart14');

    }
    // 分割线
    if (id == 15) {
      wx.removeStorageSync('cart15');

    }
    // 分割线
    if (id == 16) {
      wx.removeStorageSync('cart16');

    }
    // 分割线
    if (id == 17) {
      wx.removeStorageSync('cart17');

    }
    // 分割线
    if (id == 18) {
      wx.removeStorageSync('cart18');

    }
    // 分割线

    this.setData({
      carts: carts
    });
    if(!carts.length){
      this.setData({
        hasList: false
      });
    }else{
      this.getTotalPrice();
    }
  },

  /**
   * 购物车全选事件
   */
  selectAll(e) {
    //console.log(e)
    let selectAllStatus = this.data.selectAllStatus;
    selectAllStatus = !selectAllStatus;
    let carts = this.data.carts;

    for (let i = 0; i < carts.length; i++) {
      carts[i].selected = selectAllStatus;
    }
    this.setData({
      selectAllStatus: selectAllStatus,
      carts: carts
    });
    this.getTotalPrice();
  },

  /**
   * 绑定加数量事件
   */
  addCount(e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    num = num + 1;
    carts[index].num = num;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
  },

  /**
   * 绑定减数量事件
   */
  minusCount(e) {
    const index = e.currentTarget.dataset.index;
    const obj = e.currentTarget.dataset.obj;
    let carts = this.data.carts;
    let num = carts[index].num;
    if(num <= 1){
      return false;
    }
    num = num - 1;
    carts[index].num = num;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
  },

  /**
   * 计算总价
   */
  getTotalPrice() {
    let carts = this.data.carts;                  // 获取购物车列表
    let total = 0;
    for(let i = 0; i<carts.length; i++) {         // 循环列表得到每个数据
      if(carts[i].selected) {                     // 判断选中才会计算价格
        total += carts[i].num * carts[i].price;   // 所有价格加起来
      }
    }
    this.setData({                                // 最后赋值到data中渲染到页面
      carts: carts,
      totalPrice: total.toFixed(2)
    });
  }

})

有兴趣的童鞋可以下载学习下，没有积分或者有什么技术上问题的小伙伴，都可以私聊我，我有空就会回复的，qq:2029578566;
源文件下载地址