在这个特殊时期的日子里，躲在家里敲代码是最安全的。接下来为大家介绍下微信小程序的快速开发流程。
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
购物车基础逻辑代码这些基本够用了，看到这里是不是小伙伴们都按耐不住自己的双手了。
那就开始敲代码吧。最后谢谢大家能够为我点个赞！感谢铁铁们。
