在這個(gè)特殊時(shí)期的日子里，躲在家里敲代碼是最安全的。接下來(lái)為大家介紹下微信小程序的快速開發(fā)流程。

1.首先看一下app.json的全局配置

{
  "pages": [
    "pages/index/index",
    "pages/category/index",
    "pages/goods_list/index",
    "pages/goods_detail/index",
    "pages/cart/index",
    "pages/collect/index",
    "pages/order/index",
    "pages/search/index",
    "pages/user/index",
    "pages/feedback/index",
    "pages/login/index",
    "pages/auth/index",
    "pages/pay/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "阿偉嚴(yán)選",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁(yè)",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分類",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "購(gòu)物車",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

tabBar效果圖如下:

1582440519(1).jpg

2.接下來(lái)其他的頁(yè)面寫法都大同小異，主要說(shuō)一下購(gòu)物車的頁(yè)面
js

/**
 * 1 獲取用戶的收貨地址
  1 綁定點(diǎn)擊事件
  2 調(diào)用小程序內(nèi)置 api  獲取用戶的收貨地址  wx.chooseAddress

  2 獲取 用戶 對(duì)小程序 所授予 獲取地址的  權(quán)限 狀態(tài) scope
    1 假設(shè) 用戶 點(diǎn)擊獲取收貨地址的提示框 確定  authSetting scope.address
      scope 值 true 直接調(diào)用 獲取收貨地址
    2 假設(shè) 用戶 從來(lái)沒(méi)有調(diào)用過(guò) 收貨地址的api
      scope undefined 直接調(diào)用 獲取收貨地址
    3 假設(shè) 用戶 點(diǎn)擊獲取收貨地址的提示框 取消
      scope 值 false
      1 誘導(dǎo)用戶 自己 打開 授權(quán)設(shè)置頁(yè)面(wx.openSetting) 當(dāng)用戶重新給與 獲取地址權(quán)限的時(shí)候
      2 獲取收貨地址
    4 把獲取到的收貨地址 存入到 本地存儲(chǔ)中
 */
import {
  getSetting,
  chooseAddress,
  openSetting,
  showModal,
  showToast
} from "../../utils/asyncWx";
import regeneratorRuntime from "../../lib/runtime/runtime";
Page({
  data: {
    address: {},
    cart: [],
    allChecked: false,
    totalPrice: 0,
    totalNum: 0
  },
  // onShow()頁(yè)面加載就觸發(fā)
  onShow() {
    // 獲取緩存中的收貨地址信息
    const address = wx.getStorageSync("address");
    // ***************獲取緩存中的購(gòu)物車數(shù)據(jù)***************//
    const cart = wx.getStorageSync("cart") || [];
    this.setData({ address });
    this.setCart(cart);
    // ***************計(jì)算全選**********************//
    // every() 數(shù)組方法會(huì)遍歷 會(huì)接受一個(gè)回調(diào)函數(shù) 那么每一個(gè)回調(diào)函數(shù)都會(huì)返回true 那么every方法的返回值為true,
    // 只要有一個(gè)回調(diào)函數(shù)返回了false 那么不在循環(huán)執(zhí)行, 直接返回false
    // const allChecked = cart.length ? cart.every(v => v.checked) : false;
  },

  // 點(diǎn)擊 收貨地址
  async handleChooseAddress() {
    try {
      // 1 獲取 權(quán)限狀態(tài)
      const res1 = await getSetting();
      const scopeAddress = res1.authSetting["scope.address"];
      // 2 判斷 權(quán)限狀態(tài)
      if (scopeAddress === false) {
        await openSetting();
      }
      // 4 調(diào)用獲取收貨地址的 api
      let address = await chooseAddress();
      // 5 存入到緩存中
      wx.setStorageSync("address", address);
    } catch (error) {
      console.log(error);
    }
  },
  // 商品的選中
  handleItemChange(e) {
    // 1. 獲取被修改的商品id
    const goods_id = e.currentTarget.dataset.id;
    // 2. 獲取購(gòu)物車數(shù)組
    let { cart } = this.data;
    // 3.找到被修改的商品對(duì)象
    let index = cart.findIndex(v => v.goods_id === goods_id);
    // 4. 選中狀態(tài)取反
    cart[index].checked = !cart[index].checked;
    this.setCart(cart);
  },
  // **(重點(diǎn)封裝)設(shè)置購(gòu)物車狀態(tài)同時(shí) 重新計(jì)算 底部工具欄的數(shù)據(jù) 全選 總價(jià)格 購(gòu)買的數(shù)量
  setCart(cart) {
    wx.setStorageSync("cart", cart);
    let allChecked = true;
    // 1 總價(jià)格 總數(shù)量
    let totalPrice = 0;
    let totalNum = 0;
    cart.forEach(v => {
      if (v.checked) {
        totalPrice += v.num * v.goods_price;
        totalNum += v.num;
      } else {
        allChecked = false;
      }
    });
    // 判斷數(shù)組是否為空
    allChecked = cart.length != 0 ? allChecked : false;
    this.setData({
      cart,
      totalPrice,
      totalNum,
      allChecked
    });
    wx.setStorageSync("cart", cart);
  },
  // 全選 反選
  handleItemAllCheck() {
    // 1.獲取data中的數(shù)據(jù)
    let { cart, allChecked } = this.data;
    // 2. 修改值
    allChecked = !allChecked;
    // 3. 循環(huán)修改cart數(shù)組中的商品選中狀態(tài)
    cart.forEach(v => (v.checked = allChecked));
    // 4. 把修改后的值重新填充回data或者緩存中
    this.setCart(cart);
  },
  // 數(shù)量加減
  async handleItemNumEdit(e) {
    console.log(e);
    const { operation, id } = e.currentTarget.dataset;
    // 2 獲取購(gòu)物車數(shù)組
    let { cart } = this.data;
    // 3 找到需要修改的商品的索引
    const index = cart.findIndex(v => v.goods_id === id);
    // 4 進(jìn)行修改數(shù)量
    if (cart[index].num === 1 && operation === -1) {
      //彈窗提示
      const res = await showModal({ content: "您是否要?jiǎng)h除?" });
      if (res.confirm) {
        cart.splice(index, 1);
        this.setCart(cart);
      }
      // wx.showModal({
      //   title: "提示",
      //   content: "您是否要?jiǎng)h除?",
      //   success: res => {
      //     if (res.confirm) {
      //       cart.splice(index, 1);
      //       this.setCart(cart);
      //     } else if (res.cancel) {
      //       console.log(222);
      //     }
      //   }
      // });
    } else {
      cart[index].num += operation;
    }
    // 5 設(shè)置回緩存和data中
    this.setCart(cart);
  },
  //*************結(jié)算***************/
  async handlePay() {
    // 1 判斷是否有收貨地址
    const { address, totalNum } = this.data;
    if (!address.userName) {
      await showToast({ title: "您還沒(méi)有收貨地址!" });
      return;
    }
    // 判斷用戶有沒(méi)有選購(gòu)商品
    if (totalNum === 0) {
      await showToast({ title: "您還沒(méi)有選購(gòu)商品呢!" });
    }
    // 3 跳轉(zhuǎn)到支付頁(yè)面
    wx.navigateTo({
      url: "/pages/pay/index"
    });
  }
});

html

<!-- 收貨地址 -->
<view class="revice_address_row">
  <!-- 當(dāng)收貨地址 不存在 按鈕顯示 -->
  <view class="address_btn" wx:if="{{!address.userName}}">
    <button type="primary" plain="{{true}}" bind:tap="handleChooseAddress">獲取收貨地址</button>
  </view>
  <!-- 當(dāng)收貨地址 存在 按鈕顯示 -->
  <view wx:else class="user_info_row">
    <view class="user_info">
      <view>收貨人:{{address.userName}}</view>
      <view>{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
    </view>
    <view class="user_phone">{{address.telNumber}}</view>
  </view>
</view>
<!-- 購(gòu)物車 -->
<view class="cart_content">
  <view class="cart_title">購(gòu)物車</view>
  <view class="cart_main">
    <block wx:if="{{cart.length!==0}}">
      <view class="cart_item" wx:for="{{cart}}" wx:key="goods_id">
        <!-- 單選框 -->
        <view class="cart_chk_wrap">
          <checkbox-group data-id="{{item.goods_id}}" bindchange="handleItemChange">
            <checkbox checked="{{item.checked}}"></checkbox>
          </checkbox-group>
        </view>
        <!-- 圖片 -->
        <navigator class="cart_img_wrap">
          <image src="{{item.goods_small_logo}}" mode="widthFix"></image>
        </navigator>
        <!-- 商品信息 -->
        <view class="cart_info_wrap">
          <view class="goods_name">{{item.goods_name}}</view>
          <view class="goods_price_wrap">
            <view class="goods_price">￥{{item.goods_price}}</view>
            <view class="cart_num_tool">
              <view class="num_edit" bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{-1}}">
                -
              </view>
              <view class="goods_num">{{item.num}}</view>
              <view class="num_edit" bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{1}}">
                +
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
    <block wx:else>
      <image mode="widthFix" src="http://hbimg.b0.upaiyun.com/e1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658"></image>
      <view class="del_white">主人趕快去買件商品吧~.~</view>
    </block>
  </view>
</view>
<!-- 底部工具欄 -->
<view class="footer_tool">
  <!-- 全選 -->
  <view class="all_chk_wrap">
    <checkbox-group bindchange="handleItemAllCheck">
      全選
      <checkbox checked="{{allChecked}}"></checkbox>
    </checkbox-group>
  </view>
  <!-- 總價(jià)格 -->
  <view class="total_price_wrap">
    <view class="total_price">
      合計(jì):
      <text class="total_price_text">￥{{totalPrice}}</text>
    </view>
    <view>包含運(yùn)費(fèi)</view>
  </view>
  <!-- 結(jié)算 -->
  <view class="order_pay_wrap" bindtap="handlePay">結(jié)算({{totalNum}})</view>
</view>

購(gòu)物車效果圖如下:

1582440826(1).jpg

購(gòu)物車基礎(chǔ)邏輯代碼這些基本夠用了，看到這里是不是小伙伴們都按耐不住自己的雙手了。
那就開始敲代碼吧。最后謝謝大家能夠?yàn)槲尹c(diǎn)個(gè)贊！感謝鐵鐵們。