【愚公系列】《微信小程序与云开发从入门到实践》060-迷你商城小程序的开发(“我的”页面的开发)

举报
愚公搬代码 发表于 2025/01/28 15:50:20 2025/01/28
48 0 0
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。
近期荣誉 2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳博主等。
博客内容 .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 👍点赞、✍评论、⭐收藏

🚀前言

在迷你商城小程序的开发过程中,“我的”页面作为用户与商城互动的重要接口,承载着用户个人信息管理、订单查询、购物记录等多项核心功能。它不仅是用户体验的关键组成部分,更是提升用户粘性和忠诚度的重要环节。一个设计合理、功能齐全的“我的”页面能够有效地帮助用户管理自己的购物信息,增强购物体验,从而促进二次消费。

随着越来越多的用户使用小程序进行日常购物,如何设计一个既美观又实用的“我的”页面,成为开发者需要面对的重要课题。用户在这个页面上希望能方便地查看订单状态、修改个人信息、管理收货地址及进行其他个性化设置。因此,合理的功能布局、流畅的操作体验和清晰的信息展示,都是提升用户满意度的重要因素。

🚀一、“我的”页面的开发

🔎1.“我的”模块主页开发

🦋1.1 页面布局

模块的主页主要展示订单管理和更多附加功能的入口。我们通过 user.wxml 文件编写页面布局,其中包括用户的基本信息模块和订单入口模块。整体页面采用上下布局设计:

  • 上半部分:显示用户的基本信息。
  • 下半部分:显示订单入口,通过列表的方式进行布局。
<!--pages/user/user.wxml-->
<view>
    <view class="header">
        <view class="avatar">
            <button wx:if="{{userInfo.avatarUrl.length == 0}}" style="width: 60px;height: 60px;" open-type="getUserInfo" bindgetuserinfo="userInfo"></button>
            <image wx:if="{{userInfo.avatarUrl.length > 0}}" src="{{userInfo.avatarUrl}}"></image>
        </view>
        <view class="name">{{userInfo.nickName ? userInfo.nickName : "未登录"}}</view>
    </view>
    <view class="banner">
        <view class="item" bindtap="goOrders" data-index="{{0}}">
            <text class="iconfont icon-baozhuang i"></text>
            <text class="t">待付款</text>
        </view>
        <view class="item" bindtap="goOrders" data-index="{{1}}">
            <text class="iconfont icon-tuangouzhong i"></text>
            <text class="t">待发货</text>
        </view>
        <view class="item" bindtap="goOrders" data-index="{{2}}">
            <text class="iconfont icon-wuliu i"></text>
            <text class="t">运输中</text>
        </view>
        <view class="item" bindtap="goOrders" data-index="{{3}}">
            <text class="iconfont icon-tuidan i"></text>
            <text class="t">已退货</text>
        </view>
        <view class="item" bindtap="goOrders" data-index="{{-1}}">
            <text class="iconfont icon-dingdan i"></text>
            <text class="t">全部订单</text>
        </view>
    </view>
    <view class="list">
        <view class="list-item">
            <text>钱包</text>
            <text class="arrow">></text>
        </view>
        <view class="list-item">
            <text>客服服务</text>
            <text class="arrow">></text>
        </view>
        <view class="list-item">
            <text>帮助</text>
            <text class="arrow">></text>
        </view>
        <view class="list-item">
            <text>设置</text>
            <text class="arrow">></text>
        </view>
    </view>
</view>

🦋1.2 页面样式

user.wxss 文件中,我们为 user.wxml 中的页面框架设置样式。样式表文件用于定义页面的视觉效果,确保页面内容清晰、结构美观。

/* pages/user/user.wxss */

.header {
    display: flex;
    flex-direction: row;
    height: 200px;
    padding-top: 40px;
    background-image:  linear-gradient(to left bottom, #ffffff, #f6e7f3);
}

.avatar {
    overflow: hidden;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    margin-left: 20px;
    margin-top: 15px;
}

.avatar image {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #c1c1c1;
}

.name {
    margin-top: 25px;
    margin-left: 20px;
}

.banner {
    height: 60px;
    width: 90%;
    background-color: white;
    position: absolute;
    top: 150px;
    left: 5%;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 #d1d1d1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.i {
    font-size: 20px;
    margin-bottom: 5px;
}

.t {
    font-size: 13px;
}

.list {
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 #d1d1d1;
    margin: 15px;
}

.list-item {
    margin: 8px;
    height: 40px;
    line-height: 40px;
    border-bottom: solid 1px #e1e1e1;
    color: #111111;
}

.arrow {
    position: absolute;
    right: 40px;
    color: gray;
}

🦋1.3 数据与跳转逻辑

user.js 中,我们实现了页面的数据处理和页面跳转逻辑。主要实现了以下功能:

  • 获取用户的基本信息。
  • 根据授权状态显示用户信息。
  • 处理订单入口的跳转逻辑。

以下是 user.js 的代码实现:

// pages/user/user.js
Page({
    onShow: function () {
        this.getTabBar().setData({selectedIndex:3});  
    },
    onLoad: function() {
        // 查看是否授权
        wx.getSetting({
            success:(res) => {
                if (res.authSetting['scope.userInfo']) {
                    // 已经授权,可以直接调用 getUserInfo 获取头像昵称
                    wx.getUserInfo({
                        success:(res) => {
                            console.log(res.userInfo);
                            this.setData({
                                userInfo:res.userInfo
                            });
                        }
                    })
                }
            }
        });   
    },
    data:{
        userInfo:{}
    },
    userInfo:function(res) {
        console.log(res.detail.userInfo);
        this.setData({
            userInfo:res.detail.userInfo
        });
    },
    goOrders:function(event) {
        let index = event.currentTarget.dataset.index;
        wx.navigateTo({
          url: `../orderList/orderList?state=${index}`,
        })
    }
})

🦋1.4 代码解析

  • onShow 方法:页面显示时,设置底部导航栏的选中状态。this.getTabBar().setData({ selectedIndex: 3 }) 将当前选中状态设置为第 3 个 Tab。

  • onLoad 方法:页面加载时,首先检查用户是否已授权。如果已授权,直接调用 wx.getUserInfo 获取用户信息(如头像、昵称等),并将其保存到页面的 data 中。

  • userInfo 方法:用户信息授权后调用,获取用户的详细信息,并将其设置到页面的 data 中,以便在界面中展示。

  • goOrders 方法:处理点击订单入口时的跳转逻辑。通过 event.currentTarget.dataset.index 获取点击项的索引,并通过 wx.navigateTo 跳转到订单列表页面(参数可以根据需要传递)。

🦋1.5 效果展示

运行代码后,页面效果类似于图13-15所示,用户信息和订单入口模块清晰展示,点击订单入口可以跳转到订单列表页面。

在这里插入图片描述

🔎2.订单列表页面开发

🦋2.1 云函数实现

在本项目中,订单列表页面需要展示用户相关的订单,并支持删除订单功能。为了实现这些功能,我们在 cloudfunctions 目录下新增了两个云函数:getOrdersdeleteOrder

☀️2.1.1 获取订单列表 - getOrders 云函数

getOrders 云函数用于根据订单状态获取用户的订单。实现代码如下:

const cloud = require('wx-server-sdk')
cloud.init({
  env: '' // 填写您的云环境ID
})
const db = cloud.database();
const _ = db.command;
exports.main = async (event, context) => {
    let state = Number(event.state);
    const wxContext = cloud.getWXContext();
    let openId = wxContext.OPENID;
    let orderDoc;
    if (state == -1) {
        orderDoc = await db.collection("shop_order").where({
            openId:openId
        }).get();
    } else {
        orderDoc = await db.collection("shop_order").where({
            state:state,
            openId:openId
        }).get();
    }
    let orders = orderDoc.data;
    console.log(orders);
    return orders;
}

该云函数根据传入的订单状态 state 参数来查询数据库,返回对应状态的订单列表。

☀️2.1.2 删除订单 - deleteOrder 云函数

deleteOrder 云函数用于删除指定的订单,代码如下:

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: '' // 填写您的云环境ID
})
const db = cloud.database();
// 云函数入口函数
exports.main = async (event, context) => {
    const wxContext = cloud.getWXContext()
    let openId = wxContext.OPENID;
    let orderId = event.orderId;
    let collection = db.collection("shop_order");
    return collection.where({
        _id:orderId,
        openId:openId
    }).remove();
}

该云函数根据传入的订单ID,删除对应的订单。

🦋2.2 小程序端实现

在小程序的 server.js 文件中,分别实现 getOrdersdeleteOrder 两个方法,代码如下:

getOrders:function(state, callback) {
    wx.cloud.callFunction({
        name:"getOrders",
        data:{
            state:state
        }
    }).then(res=>{
        callback(res.result);
    }).catch(error=>{
        wx.showToast({
          title: `获取订单列表失败`,
          icon:"none"
        })
        console.log(error);
    });       
},
deleteOrder:function(orderId, callback) {
    wx.cloud.callFunction({
        name:"deleteOrder",
        data:{
            orderId:orderId
        }
    }).then(res=>{
        callback(res.result);
    }).catch(error=>{
        wx.showToast({
          title: "删除订单失败",
          icon:"none"
        })
        console.log(error);
    });   
}

这两个方法分别调用云函数 getOrdersdeleteOrder,并处理返回结果。

🦋2.3 订单列表页面实现

pages/orderList 文件夹下创建订单列表页面,首先需要完善跳转方法:

☀️2.3.1 完善跳转方法(在 user.js 中)

goOrders:function(event) {
    let index = event.currentTarget.dataset.index;
    wx.navigateTo({
      url: `../orderList/orderList?state=${index}`,
    })
}

☀️2.3.2 orderList.js 逻辑实现

orderList.js 文件中,处理获取订单列表、显示订单详情和删除订单等功能,代码如下:

// pages/orderList/orderList.js
const server = require('../../utils/server/server').server;

Page({

    /**
     * 页面的初始数据
     */
    data: {
        state:-1,
        orders:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.data.state = options.state;
        console.log(this.data.state);
        this.requestData();
    },

    requestData() {
        server.getOrders(this.data.state, (res)=>{
            console.log(res);
            this.setData({
                orders:res
            });
        })
    },
    goDetail(event) {
        let index = Number(event.currentTarget.dataset.index);
        wx.navigateTo({
          url: '../orderDetail/orderDetail?orderId=' + this.data.orders[index]._id,
        })
    },
    delete(event) {
        let index = Number(event.currentTarget.dataset.index);
        server.deleteOrder(this.data.orders[index]._id, ()=>{
            wx.showToast({
              title: '删除成功',
              icon:"none"
            });
            this.requestData();
        });
    }
})

☀️2.3.3 页面布局与样式

orderList.wxmlorderList.wxss 文件用于布局和样式设置,具体代码可以参考附件中的 orderList.wxmlorderList.wxss

<!--pages/orderList/orderList.wxml-->
<view>
    <view class="card" wx:for="{{orders}}" wx:key="index" bindtap="goDetail" data-index="{{index}}">
        <view class="id">
            订单号:{{item._id}}
        </view>
        <view class="title">
            {{item.title}}
        </view>
        <view class="imgs">
            <image class="img" wx:for="{{item.img}}" wx:for-item="imageUrl" src="{{imageUrl}}"></image>
        </view>
        <view class="price">
            金额:¥{{item.sum}}
        </view>
        <view style="position: relative;">
            <view class="state">
                订单状态:{{item.stateText}}
            </view>
            <view class="delete" catchtap="delete" data-index="{{index}}">
                删除
            </view>
        </view>
    </view>
</view>

/* pages/orderList/orderList.wxss */

.card {
    height: 240px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
    background-color: white;
    margin-left: 5%;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 #d1d1d1;
    overflow: hidden;
}

.id {
    font-size: 11px;
    color: gray;
    text-align: center;
    margin: 10px;
    padding-bottom: 5px;
    border-bottom: dashed gray 1px;
}

.title {
    color: #111111;
    margin-left: 15px;
}

.imgs {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}

.img {
    width: 100px;
    height: 100px;
}

.price {
    text-align: right;
    margin-right: 20px;
}

.state {
    margin-top: 10px;
    margin-left: 15px;
    color: gray;
}

.delete {
    position: absolute;
    right: 20px;
    top: 0px;
    color:white;
    background-color: red;
    border-radius: 5px;
    width: 60px;
    height: 25px;
    text-align: center;
    line-height: 25px;
}

🦋2.4 效果展示

运行代码后,效果如图所示:

在这里插入图片描述

  • 订单列表根据状态显示不同的订单。
  • 点击订单可跳转到订单详情页。
  • 支持删除订单操作,删除成功后会刷新订单列表。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。