怎么快速上手一个微信小程序--(逆战片)

在这个特殊时期的日子里，躲在家里敲代码是最安全的。接下来为大家介绍下微信小程序的快速开发流程。

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": "阿伟严选",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "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": "购物车",
        "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.接下来其他的页面写法都大同小异，主要说一下购物车的页面
js

/**
 * 1 获取用户的收货地址
  1 绑定点击事件
  2 调用小程序内置 api  获取用户的收货地址  wx.chooseAddress

  2 获取 用户 对小程序 所授予 获取地址的  权限 状态 scope
    1 假设 用户 点击获取收货地址的提示框 确定  authSetting scope.address
      scope 值 true 直接调用 获取收货地址
    2 假设 用户 从来没有调用过 收货地址的api
      scope undefined 直接调用 获取收货地址
    3 假设 用户 点击获取收货地址的提示框 取消
      scope 值 false
      1 诱导用户 自己 打开 授权设置页面(wx.openSetting) 当用户重新给与 获取地址权限的时候
      2 获取收货地址
    4 把获取到的收货地址 存入到 本地存储中
 */
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()页面加载就触发
  onShow() {
    // 获取缓存中的收货地址信息
    const address = wx.getStorageSync("address");
    // ***************获取缓存中的购物车数据***************//
    const cart = wx.getStorageSync("cart") || [];
    this.setData({ address });
    this.setCart(cart);
    // ***************计算全选**********************//
    // every() 数组方法会遍历 会接受一个回调函数 那么每一个回调函数都会返回true 那么every方法的返回值为true,
    // 只要有一个回调函数返回了false 那么不在循环执行, 直接返回false
    // const allChecked = cart.length ? cart.every(v => v.checked) : false;
  },

  // 点击 收货地址
  async handleChooseAddress() {
    try {
      // 1 获取 权限状态
      const res1 = await getSetting();
      const scopeAddress = res1.authSetting["scope.address"];
      // 2 判断 权限状态
      if (scopeAddress === false) {
        await openSetting();
      }
      // 4 调用获取收货地址的 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. 获取购物车数组
    let { cart } = this.data;
    // 3.找到被修改的商品对象
    let index = cart.findIndex(v => v.goods_id === goods_id);
    // 4. 选中状态取反
    cart[index].checked = !cart[index].checked;
    this.setCart(cart);
  },
  // **(重点封装)设置购物车状态同时 重新计算 底部工具栏的数据 全选 总价格 购买的数量
  setCart(cart) {
    wx.setStorageSync("cart", cart);
    let allChecked = true;
    // 1 总价格 总数量
    let totalPrice = 0;
    let totalNum = 0;
    cart.forEach(v => {
      if (v.checked) {
        totalPrice += v.num * v.goods_price;
        totalNum += v.num;
      } else {
        allChecked = false;
      }
    });
    // 判断数组是否为空
    allChecked = cart.length != 0 ? allChecked : false;
    this.setData({
      cart,
      totalPrice,
      totalNum,
      allChecked
    });
    wx.setStorageSync("cart", cart);
  },
  // 全选 反选
  handleItemAllCheck() {
    // 1.获取data中的数据
    let { cart, allChecked } = this.data;
    // 2. 修改值
    allChecked = !allChecked;
    // 3. 循环修改cart数组中的商品选中状态
    cart.forEach(v => (v.checked = allChecked));
    // 4. 把修改后的值重新填充回data或者缓存中
    this.setCart(cart);
  },
  // 数量加减
  async handleItemNumEdit(e) {
    console.log(e);
    const { operation, id } = e.currentTarget.dataset;
    // 2 获取购物车数组
    let { cart } = this.data;
    // 3 找到需要修改的商品的索引
    const index = cart.findIndex(v => v.goods_id === id);
    // 4 进行修改数量
    if (cart[index].num === 1 && operation === -1) {
      //弹窗提示
      const res = await showModal({ content: "您是否要删除?" });
      if (res.confirm) {
        cart.splice(index, 1);
        this.setCart(cart);
      }
      // wx.showModal({
      //   title: "提示",
      //   content: "您是否要删除?",
      //   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 设置回缓存和data中
    this.setCart(cart);
  },
  //*************结算***************/
  async handlePay() {
    // 1 判断是否有收货地址
    const { address, totalNum } = this.data;
    if (!address.userName) {
      await showToast({ title: "您还没有收货地址!" });
      return;
    }
    // 判断用户有没有选购商品
    if (totalNum === 0) {
      await showToast({ title: "您还没有选购商品呢!" });
    }
    // 3 跳转到支付页面
    wx.navigateTo({
      url: "/pages/pay/index"
    });
  }
});

html

<!-- 收货地址 -->
<view class="revice_address_row">
  <!-- 当收货地址 不存在 按钮显示 -->
  <view class="address_btn" wx:if="{{!address.userName}}">
    <button type="primary" plain="{{true}}" bind:tap="handleChooseAddress">获取收货地址</button>
  </view>
  <!-- 当收货地址 存在 按钮显示 -->
  <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>
<!-- 购物车 -->
<view class="cart_content">
  <view class="cart_title">购物车</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>
  <!-- 总价格 -->
  <view class="total_price_wrap">
    <view class="total_price">
      合计:
      <text class="total_price_text">￥{{totalPrice}}</text>
    </view>
    <view>包含运费</view>
  </view>
  <!-- 结算 -->
  <view class="order_pay_wrap" bindtap="handlePay">结算({{totalNum}})</view>
</view>

购物车效果图如下:

1582440826(1).jpg

购物车基础逻辑代码这些基本够用了，看到这里是不是小伙伴们都按耐不住自己的双手了。
那就开始敲代码吧。最后谢谢大家能够为我点个赞！感谢铁铁们。