微信小程序完整項(xiàng)目實(shí)戰(zhàn)記錄(前端+SpringBoot后端)
更新時(shí)間：2024年09月06日 09:31:44 作者：無(wú)語(yǔ)小咪
隨著微信小程序的流行,越來(lái)越多的開(kāi)發(fā)者開(kāi)始涉足小程序開(kāi)發(fā),下面這篇文章主要給大家介紹了關(guān)于微信小程序完整項(xiàng)目實(shí)戰(zhàn)的相關(guān)資料,項(xiàng)目包括前端+SpringBoot后端,需要的朋友可以參考下
前言
項(xiàng)目功能及技術(shù)
小程序主要有首頁(yè)、商品詳情、商品分類、商品評(píng)價(jià)、購(gòu)物車、個(gè)人中心等模塊。
管理端主要有人員管理、權(quán)限管理、商品管理、訂單管理等模塊。html+css+js：微信小程序界面。
SpringBoot框架+Java程序語(yǔ)言：小程序及后臺(tái)管理系統(tǒng)API的實(shí)現(xiàn)。
Layui前端框架：web后臺(tái)管理界面樣式及數(shù)據(jù)渲染框架。
MySQL數(shù)據(jù)庫(kù)：數(shù)據(jù)支持。
效果圖
小程序
管理端
API
SpringBoot框架搭建
1.創(chuàng)建maven project，先創(chuàng)建一個(gè)名為SpringBootDemo的項(xiàng)目，選擇【New Project】
然后在彈出的下圖窗口中，選擇左側(cè)菜單的【New Project】
在project下創(chuàng)建module，點(diǎn)擊右鍵選擇【new】—【Module…】
左側(cè)選擇【Spring initializr】，通過(guò)idea中集成的Spring initializr工具進(jìn)行spring boot項(xiàng)目的快速創(chuàng)建。窗口右側(cè)：name可根據(jù)自己喜好設(shè)置，group和artifact和上面一樣的規(guī)則，其他選項(xiàng)保持默認(rèn)值即可，【next】
Developer Tools模塊勾選【Spring Boot DevTools】，web模塊勾選【Spring Web】，此時(shí)，一個(gè)Springboot項(xiàng)目已經(jīng)搭建完成，可開(kāi)發(fā)后續(xù)功能
實(shí)體映射創(chuàng)建Mapper
創(chuàng)建一個(gè)entity實(shí)體類文件夾，并在該文件夾下創(chuàng)建項(xiàng)目用到的實(shí)體類
package com.example.demo.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;
@Data
public class User {
@TableId(type = IdType.AUTO)
private Long id;
private String account;
private String pwd;
private String userDesc;
private String userHead;
private LocalDateTime createTime;
private Long role;
private String nickname;
private String email;
private String tags;
}
接口封裝
由于我們使用mybatis-plus，所以簡(jiǎn)單的增刪改查不用自己寫(xiě)，框架自帶了，只需要實(shí)現(xiàn)或者繼承他的Mapper、Service
創(chuàng)建控制器Controller
整合Swagger
添加依賴
先導(dǎo)入spring boot的web包
<!--swagger依賴-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.9.2</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.9.2</version>
</dependency>
配置Swagger
創(chuàng)建一個(gè)swagger的配置類，命名為SwaggerConfig.java
/*
*用于定義API主界面的信息，比如可以聲明所有的API的總標(biāo)題、描述、版本
*/
private ApiInfo apiDemo() {
return new ApiInfoBuilder()
//用來(lái)自定義API的標(biāo)題
.title("SpringBoot項(xiàng)目SwaggerAPIAPI標(biāo)題測(cè)試")
//用來(lái)描述整體的API
.description("SpringBoot項(xiàng)目SwaggerAPI描述測(cè)試")
//創(chuàng)建人信息
.contact(new Contact("測(cè)試員張三","http://localhost:8080/springboot/swagger-ui.html","xxxxxxxx@163.com"))
//用于定義服務(wù)的域名
//.termsOfServiceUrl("")
.version("1.0") //可以用來(lái)定義版本
.build();
}
接口測(cè)試
運(yùn)行Spring Boot項(xiàng)目，默認(rèn)端口8080，通過(guò)地址欄訪問(wèn)url
接口組定義
根據(jù)不同的業(yè)務(wù)區(qū)分不同的接口組，使用@API來(lái)劃分
@Api(tags = "用戶管理") // tags：組名稱
@RestController
public class RoleController {
}
接口定義
使用@ApiModel來(lái)標(biāo)注實(shí)體類，同時(shí)在接口中定義入?yún)閷?shí)體類作為參數(shù)。
@ApiModel：用來(lái)標(biāo)類
常用配置項(xiàng)：value：實(shí)體類簡(jiǎn)稱；description：實(shí)體類說(shuō)明
@ApiModelProperty：用來(lái)描述類的字段的含義。
常用字段類型
| 字段類型 | 所占字節(jié) | 存儲(chǔ)范圍 | 最大存儲(chǔ)值 | 使用場(chǎng)景 |
|---|---|---|---|---|
| TINYINT | 1 | -128~127 | 127 | 存儲(chǔ)小整數(shù) |
| INT | 4 | -2147483648~2147483647 | 2147483647 | 存儲(chǔ)大整數(shù) |
| BIGINT | 8 | -9223372036854775808~9223372036854775807 | 9223372036854775807 | 存儲(chǔ)極大整數(shù) |
| DECIMAL | 可變長(zhǎng)度 | 存儲(chǔ)精度要求高的數(shù)值 | ||
| CHAR | 固定長(zhǎng)度 | 最多255字節(jié) | 255個(gè)字符 | 存儲(chǔ)長(zhǎng)度固定的字符串 |
| VARCHAR | 可變長(zhǎng)度 | 最多65535字節(jié) | 65535個(gè)字符 | 存儲(chǔ)長(zhǎng)度不固定的字符串 |
| DATETIME | 8 | ‘1000-01-01 00:00:00’~‘9999-12-31 23:59:59’ | ‘9999-12-31 23:59:59’ | 存儲(chǔ)日期和時(shí)間 |
參考代碼塊
<!-- 自定義頂部 start -->
<view class="yx-custom" style="padding-top:{{statusBarHeight}}px;background-image: linear-gradient(43deg, #12C206,#00C90F);">
<view class="headerBox">
<view class="leftAddress">
<image class="leftAddressIcon" src="{{imgUrl}}/upload/20220608/addressIcon.png" lazy-load="true"></image>
<view class="leftAddressText little">橘貓餐廳</view>
<image class="rightJtIcon" src="{{imgUrl}}/upload/20220608/jtBottom.png" lazy-load="true"></image>
</view>
<view class="appletsTitle"></view>
</view>
</view>
<!-- 自定義頂部 占位標(biāo)簽 -->
<view class="yx-empty_custom" style="padding-top:{{statusBarHeight}}px;"></view>
<!-- banner圖 -->
<view style="background: url({{imgUrl}}/upload/20220608/topBackImg.png);background-size: 100% 100%;width:750rpx;height:324rpx;">
<view class="bannerBottom"></view>
</view>
<!-- 分類及商品 -->
<view class="containerBox" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
<scroll-view class="menu-left" scroll-y="true" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
<view wx:for="{{menuList}}" class="little {{menuIndex==index?'menu-item-check':'menu-item'}} {{item.prevClass}} {{item.nextClass}}"
bindtap="clickMenu" data-index="{{index}}">{{item.title}}</view>
<view class="bottomHeightBox"></view>
</scroll-view>
<scroll-view class="menu-right" scroll-y="true" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
<view class="menuTitleBox">
<text>熱門(mén)推薦</text>
</view>
<view class="productContainer">
<view class="productItem" wx:for="{{20}}" bindtap="goDetail">
<view class="productImage" style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;"></view>
<view class="productName little">超級(jí)無(wú)敵好吃美味烤鴨</view>
<view class="productPriceBox">
<view class="salePrice">
<text style="font-size:22rpx;">￥</text>
<text>58.88</text>
<text style="font-weight:400;">/g</text>
</view>
<view class="oldPrice middleLine">￥98</view>
</view>
</view>
</view>
<view class="bottomHeightBox"></view>
</scroll-view>
</view>
<!-- <image class="scanIcon" src="{{imgUrl}}/Areas/dfapi/Content/images/cp.png" lazy-load="true"></image> -->
<image class="scanIcon" src="{{imgUrl}}{{scanUrl}}" lazy-load="true" bindtap="scanTableCode"></image>
<!--pages/productDetail/index.wxml-->
<!-- 商品輪播圖 -->
<view class="product-banner">
<swiper class="product-banner" bindchange='onSlideChange' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{productBanner}}" wx:key="id">
<swiper-item>
<view>
<image src="{{item}}" class="product-banner" alt="" lazy-load="true" />
</view>
</swiper-item>
</block>
</swiper>
</view>
<!-- 秒殺商品展示 -->
<view wx:if="{{productActiviType==0}}" class="activeBox"
style="background: url({{imgUrl}}/upload/20220608/kill-pro-back.png);background-size: 100% 100%;">
<view class="kill-leftBox">
<view class="product-priceBox">
<view style="height:35rpx;line-height: 35rpx;">
<text class="symbol-kill">￥</text>
<text class="price-kill">58.8</text>
<text class="throuth-kill">￥98</text>
</view>
<view class="num-kill displayBox">限量200份</view>
</view>
<view class="justNum-kill">
<text>已售198份</text><text
class="just-rightText">每人限購(gòu)1份</text>
</view>
</view>
<view class="kill-rightBox">
<view class="just-text">距秒殺結(jié)束僅剩</view>
<view class="kill-timeBox">
<view class="clockBox margin-one displayBox">{{hour}}</view>
<view class="littleClock">:</view>
<view class="clockBox displayBox">{{min}}</view>
<view class="littleClock">:</view>
<view class="clockBox displayBox">{{second}}</view>
</view>
</view>
</view>
<!-- 商品名稱 -->
<view class="productName-box littleTwo">
超級(jí)無(wú)敵好吃美味烤鴨
</view>
<!-- 商品描述 -->
<view class="productDesc-box littleTwo">
色澤紅艷，肉質(zhì)細(xì)嫩，味道醇厚，肥而不膩
</view>
<!-- 分享獎(jiǎng)勵(lì) -->
<view class="productShare-money" bindtap="shareProduct">
<view class="left-Share">
<text>該商品分享可得獎(jiǎng)勵(lì)￥10</text>
</view>
<view class="right-Share">
<image src="{{imgUrl}}/upload/20220608/share.png" lazy-load="true"></image>
<text>立即分享</text>
</view>
</view>
<!-- 商品配置規(guī)格 -->
<!-- <view class="productInfoBox">
<view class="heightInfo"></view>
<view class="Distribution" bindtap="chouseAddress">
<view class="title-info">配送</view>
<view class="chouseSpe">請(qǐng)選擇收貨地址</view>
<image src="{{imgUrl}}/upload/20220608/rightJt.png" lazy-load="true"></image>
</view>
</view> -->
<!-- 服務(wù) -->
<view class="services-box">
<view class="services-left">服務(wù)</view>
<view class="services-right">新鮮品質(zhì) 配送到家 售后無(wú)憂</view>
</view>
<!-- 商品評(píng)價(jià) -->
<view class="product-reply" >
<view class="reply-title">
<view class="leftReolyCount">
評(píng)價(jià)(2824)
</view>
<view class="middleSeeMore">
<view>查看全部評(píng)價(jià)</view>
</view>
<image class="grayRight" src="{{imgUrl}}/upload/20220608/rightJt.png" lazy-load="true"></image>
</view>
<view class="replyUserInfo">
<image class="replyUserHead" src="{{imgUrl}}/upload/20220608/jocker.jpg" lazy-load="true"></image>
<view class="rightUserName">
<view class="userName little">橘貓大俠</view>
<view class="starBox">
<image src="{{imgUrl}}/upload/20220608/star5.png" class="starImg">
</image>
</view>
</view>
</view>
<view class="replyContet littleTwo">
味道好，配送快，值得信賴！
</view>
</view>
<!-- 商品詳情 -->
<image class="proImgDetail" src="{{imgUrl}}/upload/20220608/prodetailImg.png" lazy-load="true"></image>
<view style="height:56rpx;"></view>
<view class="productDetailTable" wx:if="{{spuList.length>0}}">
<view wx:if="{{!isShowDetail}}">
<view class="productTableTr">
<view class="leftTr">
<view class="little leftTrText">{{spuList[0].name}}</view>
</view>
<view class="rightTr little">{{spuList[0].content}}</view>
</view>
</view>
<view wx:if="{{isShowDetail}}" class="productTableTr" wx:for="{{spuList}}">
<view class="leftTr">
<view class="little leftTrText">{{item.name}}</view>
</view>
<view class="rightTr little">{{item.content}}</view>
</view>
</view>
<view class="DetailArrow displayBox" wx:if="{{spuList.length>0}}">
<image wx:if="{{!isShowDetail}}" bindtap="clickArrow" class="arrowImg"
src="{{imgUrl}}/upload/20220608/nextJt.png" lazy-load="true"></image>
<text wx:if="{{!isShowDetail}}" bindtap="clickArrow" style="margin-left:10rpx;">展開(kāi)</text>
<image wx:if="{{isShowDetail}}" bindtap="clickArrow" class="arrowImg"
src="{{imgUrl}}/upload/20220608/topJt.png" lazy-load="true"></image>
<text wx:if="{{isShowDetail}}" bindtap="clickArrow" style="margin-left:10rpx;">收起</text>
</view>
<view style="height:56rpx;"></view>
<image src="{{imgUrl}}/upload/20220608/explain.png" class="explain"></image>
<!-- 你可能還喜歡 -->
<view class="maybeLike">
<image src="{{imgUrl}}/upload/20220608/2323-2.png" class="maybeLikePng"></image>
<!-- 配置商品 -->
<view class="indexProductList">
<view class="productItemBottom" wx:for="{{4}}">
<view style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;" class="productImgBottom"></view>
<view class="bottom-productName little">北京烤鴨</view>
<view class="iconBox little">
干凈又衛(wèi)生
</view>
<view class="buyBox-bottom">
<view class="leftPrice-bottom">
<text class="priceFh">￥</text>
<text class="bottom-price">58</text>
<text class="bottom-oldPrice">￥98</text>
</view>
<view class="rightAdd-bottom" data-index="{{index}}" >
<image class="rightAdd-bottom" src="{{imgUrl}}/upload/20220608/addcart.png" lazy-load="true">
</image>
</view>
</view>
</view>
</view>
</view>
<view style="height:162rpx;"></view>
<view class="footer">
<view class="leftFooter">
<view bindtap="GoHome">
<view style="background: url({{imgUrl}}/upload/20220608/6-1.png);background-size: 100% 100%;"
class="footImg"></view>
<view class="footText">首頁(yè)</view>
</view>
<view bindtap="GoShopping">
<view style="background: url({{imgUrl}}/upload/20220608/6-5.png);background-size: 100% 100%;"
class="footImg2"></view>
<view class="footText2">購(gòu)物車</view>
</view>
</view>
<view class="rightFooter">
<view class="displayShow" >
<view class="addCart-btn displayBox" catchtap="btnAddCart_footer">加入購(gòu)物車</view>
<view class="purchase-btn displayBox" bindtap="rightNowBuy">立即購(gòu)買(mǎi)</view>
</view>
</view>
</view>
<!--pages/shoppingCart/index.wxml-->
<!--pages/login/index.wxml-->
<view class="yx-custom" style="padding-top:{{statusBarHeight}}px;background-image: linear-gradient(43deg, #12C206,#00C90F);">
<view class="headerBox">
<view class="leftAddress">
</view>
<view class="appletsTitle">購(gòu)物車</view>
</view>
</view>
<!-- 自定義頂部 占位標(biāo)簽 -->
<view class="yx-empty_custom" style="padding-top:{{statusBarHeight}}px;"></view>
<!-- 可下單的購(gòu)物車商品 -->
<view class="go-product">
<view class="product-num">
<view class="left-productNum">共有5件商品</view>
<view class="right-delProduct" bindtap="deleteProduct">
<text>刪除</text>
</view>
</view>
<view wx:for="{{2}}" wx:for-index="idx" wx:for-item="item">
<view class="discount">
<view class="left-discount little">熱門(mén)推薦</view>
<view class="discount-jt">
<image src="{{imgUrl}}/upload/20220608/cartJt.png" lazy-load="true"></image>
</view>
</view>
<view wx:for="2" wx:for-index="indexProduct" wx:for-item="ProItem">
<view class="list">
<view class="product-item height{{indexProduct}}">
<movable-area>
<movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}" inertia="true" data-productIndex="{{indexProduct}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindchange="handleMovableChange">
<view class="productItem_new ">
<view class="checkedIconBox">
<view class="cart-con-item-icon">
<icon wx:if="{{ProItem.selected}}" type="success" color="#FFBD20" bindtap="selectList_yx" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}" />
<icon wx:else type="circle" bindtap="selectList_yx" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}" />
</view>
</view>
<view class="rightProductInfo">
<image src="{{imgUrl}}/upload/20220608/ky.jpg" class="cart-productImg"></image>
<view class="productInfoBox">
<view class="cart-productName littleTwo">超級(jí)無(wú)敵好吃美味烤鴨</view>
<view class="cart-productSku little">500g</view>
<view class="cart-productPrice">
<text class="priceSymbol">￥</text>
<text class="cart-price">58.8</text>
<text class="cart-oldPrice">￥98</text>
</view>
</view>
<view class="cart-rightNumBox">
<view class="cart-con-item-num">
<text class="cart-con-item-num-left" catchtap="bindMinus" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}">-</text>
<input type="cart-con-item-num-mid" bindinput="bindIptCartNum" data-index='{{indexProduct}}' value="1" disabled="{{true}}" />
<text class="cart-con-item-num-right" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}" catchtap="bindPlus">+</text>
</view>
</view>
</view>
</view>
</movable-view>
</movable-area>
<view class="delete-btn" data-id="{{item.id}}" bindtap="handleDeleteProduct" data-other="{{idx}}" data-index="{{indexProduct}}" data-cartid="{{ProItem.cartId}}">刪除</view>
</view>
</view>
</view>
</view>
</view>
<view class="cant-product">
<view class="cantTitle displayBox">因配送范圍，庫(kù)存原因等導(dǎo)致失效的商品</view>
<view class="productItem_new height{{index}}" wx:for="{{2}}">
<view class="cantProductLeft displayBox">
失效
</view>
<view class="rightProductInfo">
<view class="cart-productImg" style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;">
<image src="{{imgUrl}}/upload/20220608/yyyy.png" class="cart-productImg" lazy-load="true"></image>
</view>
<view class="productInfoBox">
<view class="cart-productNameYY littleTwo">曾經(jīng)好吃的烤鴨</view>
<view class="cart-productYyy little">抱歉，該商品已售罄或下架</view>
<view class="cart-productPrice">
<text class="priceSymbolYY">￥</text>
<text class="cart-priceYY">0</text>
</view>
</view>
<view class="cart-rightNumBox">
</view>
</view>
</view>
<view class="clearBox">
<view class="clear displayBox" bindtap="clearProduct">清空失效寶貝</view>
<view class="switchAddress displayBox" bindtap="switchAdd">切換地址</view>
</view>
</view>
<view class="maybeLike" wx:if="{{recommendProduct.length>0}}">
<image src="{{imgUrl}}/upload/20220608/2323-2.png" class="maybeLikePng"></image>
<view class="indexProductList">
<view class="productItemBottom" wx:for="{{recommendProduct}}">
<view style="background: url({{item.productPic}});background-size: 100% 100%;" class="productImgBottom"></view>
<view class="bottom-productName little">{{item.productName}}</view>
<view class="iconBox little">
{{item.remark}}
</view>
<view class="buyBox-bottom">
<view class="leftPrice-bottom">
<text class="priceFh">￥</text>
<text class="bottom-price">{{item.price}}</text>
<text class="bottom-oldPrice">￥{{item.proSalePrice}}</text>
</view>
<view class="rightAdd-bottom" catchtap="btnAddCart" data-index="{{index}}" data-goodsid="{{item.productId}}">
<image class="rightAdd-bottom" src="{{imgUrl}}/Areas/dfapi/Content/images/addcart.png" lazy-load="true">
</image>
</view>
</view>
</view>
</view>
</view>
<view class="seeDetailPriceBox" wx:if="{{isShowDetailPrice}}" catchtap="btnHideDetail">
<view class="shareb2">
<view class="shareb2-con">
<viwe class="detailTitle displayBox">優(yōu)惠明細(xì)</viwe>
<view class="orderAllPrice">
<view class="leftTitle">
<text>商品總額</text>
</view>
<view class="rightTitle">
<text>￥{{totalPrice}}</text>
</view>
</view>
<view class="orderAllPrice">
<view class="leftTitle">
<text>運(yùn)費(fèi)</text>
</view>
<view class="rightTitle">
<text>+￥{{freight}}</text>
</view>
</view>
<view class="orderAllPrice">
<view class="leftTitle">
<text>優(yōu)惠券</text>
</view>
<view class="rightTitle">
<text style="color:#FF4C0E;">-￥{{couponAmount}}</text>
</view>
</view>
<view class="orderAllPrice">
<view class="leftTitle">
<text>折扣</text>
</view>
<view class="rightTitle">
<text style="color:#FF4C0E;">-￥{{discountMoney}}</text>
</view>
</view>
<view class="orderAllPriceFinal">
<view class="leftTitle">
<text>合計(jì)</text>
</view>
<view class="rightTitle">
<text>￥{{amountPayable}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="cart-foter">
<view class="allChecked">
<image wx:if="{{!isCheckAll}}" src="{{imgUrl}}/upload/20220608/uncheck.png" bindtap="selectAll" lazy-load="true" class="checkImg"></image>
<image wx:else src="{{imgUrl}}/upload/20220608/checked.png" lazy-load="true" bindtap="selectAll" class="checkImg"></image>
<view class="allCheckText">全選</view>
</view>
<view class="middlePrice">
<view class="priceBox">
<text class="hjTitle">合計(jì):</text>
<text class="symbol">￥</text>
<text class="priceAll">￥198</text>
</view>
<view class="coupon">
<text>優(yōu)惠:</text>
<text>￥</text>
<text>{{finalCou}}</text>
<text class="seeDetail">查看明細(xì)</text>
<image wx:if="{{isShowDetailPrice}}" src="{{imgUrl}}/upload/20220608/orangeOn.png" lazy-load="true" class="orangeJt" bindtap="seeDetailPrice"></image>
<image wx:else src="{{imgUrl}}/upload/20220608/orangeBo.png" lazy-load="true" class="orangeJt" bindtap="seeDetailPrice"></image>
</view>
</view>
<view class="right-btnJs">
<view class="addOrder displayBox" bindtap="goBuy">結(jié)算</view>
</view>
</view>
<view class="bottomHeightBox"></view>
<!--pages/myCenter/index.wxml-->
<!-- 頭部背景 收益容器 -->
<view class="center-Top">
<view class="center-TopBack">
<view class="userInfo-box">
<view class="leftInfo">
<view class="cnter-user">
<image src="{{imgUrl}}/upload/20220608/noUser.png" class="cnter-user" lazy-load="true">
</image>
</view>
<view class="userNameBox">
<view class="uNameText">
<!-- <open-data type="userNickName"></open-data> -->
<!-- <view wx:else bindtap="login">注冊(cè)/登錄</view> -->
<view >
<text>摔跤貓子</text>
<!-- <button class="kefu-btn" type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo"
style="width:100%"></button> -->
<button class="kefu-btn" style="width:100%"></button>
</view>
</view>
<view class="shop">
<text>用戶</text>
</view>
</view>
</view>
</view>
<!-- 我的訂單入口 -->
<view class="myOrder-menu">
<view class="order-title">
<view class="leftTitle">我的訂單</view>
<view class="rightSeeMore" bindtap="goToOrder" data-id="0">
<image src="{{imgUrl}}/upload/20220608/black-jt.png" lazy-load="true"></image>
<text style="float:right;padding-right:10rpx;">查看更多</text>
</view>
</view>
<view class="orderMenu-img">
<view class="ordermenu-detail" bindtap="goToOrder" data-id="1">
<image src="{{imgUrl}}/upload/20220608/dfk.png" lazy-load="true"></image>
<view class="num-mark" wx:if="{{toBePaid>0}}">{{toBePaid}}</view>
<view class="order-text-staus">待付款</view>
</view>
<view class="ordermenu-detail" bindtap="goToOrder" data-id="2">
<image src="{{imgUrl}}/upload/20220608/dfh.png" lazy-load="true"></image>
<view class="num-mark" wx:if="{{toBeDelivered>0}}">{{toBeDelivered}}</view>
<view class="order-text-staus">待發(fā)貨</view>
</view>
<view class="ordermenu-detail" bindtap="goToOrder" data-id="3">
<image src="{{imgUrl}}/upload/20220608/dsh.png" lazy-load="true"></image>
<view class="num-mark" wx:if="{{toBeReceived>0}}">{{toBeReceived}}</view>
<view class="order-text-staus">待收貨</view>
</view>
<view class="ordermenu-detail" bindtap="goReplyList">
<image src="{{imgUrl}}/upload/20220608/dpj.png" lazy-load="true"></image>
<view class="num-mark" wx:if="{{toBeReply>0}}">{{toBeReply}}</view>
<view class="order-text-staus">評(píng)價(jià)</view>
</view>
<view class="ordermenu-detail" bindtap="afterSale">
<image src="{{imgUrl}}/upload/20220608/dtk.png" lazy-load="true"></image>
<view class="num-mark" wx:if="{{cancel>0}}">{{cancel}}</view>
<view class="order-text-staus">售后/退款</view>
</view>
</view>
</view>
</view>
</view>
<!-- 常用工具入口 -->
<view class="tool-box">
<view class="often-tool-title">常用工具</view>
<view class="tool-menu-one" >
<view class="tool-menu-detail" bindtap="GotomyEarnings">
<view style="background: url({{imgUrl}}/upload/20220608/profit.png);background-size: 100% 100%;"
class="toolImgBack"></view>
<view class="tool-title">我的收益</view>
</view>
<view class="tool-menu-detail" bindtap="GotoMyTeam">
<view style="background: url({{imgUrl}}/upload/20220608/myteam.png);background-size: 100% 100%;"
class="toolImgBack"></view>
<view class="tool-title">我的團(tuán)隊(duì)</view>
</view>
<view class="tool-menu-detail" bindtap="goCouponList">
<view style="background: url({{imgUrl}}/upload/20220608/myCou.png);background-size: 100% 100%;"
class="toolImgBack"></view>
<view class="tool-title">我的優(yōu)惠券</view>
</view>
<view class="tool-menu-detail" bindtap="goAddressList">
<view style="background: url({{imgUrl}}/upload/20220608/myAdd.png);background-size: 100% 100%;"
class="toolImgBack"></view>
<view class="tool-title">收貨地址</view>
</view>
</view>
<view class="tool-menu-two">
<view class="tool-menu-detail" style="position: relative;">
<view style="background: url({{imgUrl}}/upload/20220608/customService.png);background-size: 100% 100%;"
class="toolImgBack"></view>
<view class="tool-title">聯(lián)系客服</view>
<button class="kefu-btn" open-type="contact" style="width:100%"></button>
</view>
<view class="tool-menu-detail" bindtap="setUp">
<view style="background: url({{imgUrl}}/upload/20220608/set.png);background-size: 100% 100%;"
class="toolImgBack"></view>
<view class="tool-title">設(shè)置</view>
</view>
</view>
</view>總結(jié)
到此這篇關(guān)于微信小程序完整項(xiàng)目實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)微信小程序完整項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- SpringBoot前后端交互、全局異常處理之后端異常信息拋到前端顯示彈窗
- 前端如何調(diào)用后端接口進(jìn)行數(shù)據(jù)交互詳解(axios和SpringBoot)
- SpringBoot前端傳遞數(shù)組后端接收兩種常用的方法
- vue2前端使用axios發(fā)起post請(qǐng)求后端(springboot)接收不到值解決辦法
- SpringBoot整合WebSocket實(shí)現(xiàn)后端向前端主動(dòng)推送消息方式
- springboot項(xiàng)目中后端接收前端傳參的方法示例詳解
- SpringBoot的前后端聯(lián)調(diào)：表單提交、AJAX登錄與狀態(tài)管理、以及JSON數(shù)據(jù)交互
相關(guān)文章
Maven導(dǎo)入本地jar包的實(shí)現(xiàn)步驟
本文主要介紹了Maven導(dǎo)入本地jar包的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了SpringBoot之RabbitMQ的使用方法，詳細(xì)的介紹了2種模式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了springcloud整合x(chóng)xl-job的示例代碼,主要分為四個(gè)過(guò)程，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
java中double類型運(yùn)算結(jié)果異常的解決方法
下面小編就為大家?guī)?lái)一篇java中double類型運(yùn)算結(jié)果異常的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
Java守護(hù)線程(Daemon Thread)的實(shí)現(xiàn)示例
本文主要介紹了Java守護(hù)線程(Daemon Thread)的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-11-11
springBoot中的CORS跨域注解@CrossOrigin詳解
這篇文章主要介紹了springBoot中的CORS跨域注解@CrossOrigin詳解,通常,服務(wù)于?JS?的主機(jī)(例如?example.com)與服務(wù)于數(shù)據(jù)的主機(jī)(例如?api.example.com)是不同的,在這種情況下,CORS?可以實(shí)現(xiàn)跨域通信,需要的朋友可以參考下2023-12-12
SpringAop @Around執(zhí)行兩次的原因及解決
這篇文章主要介紹了SpringAop @Around執(zhí)行兩次的原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
SpringBoot jar包大小優(yōu)化問(wèn)題及解決
這篇文章主要介紹了SpringBoot jar包大小優(yōu)化問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
Spring框架功能很強(qiáng)大，但是就算是一個(gè)很簡(jiǎn)單的項(xiàng)目，我們也要配置很多東西。接下來(lái)通過(guò)本文給大家分享Spring Boot Starter 知識(shí)，感興趣的朋友一起看看吧2017-10-10
mybatis-plus如何配置自定義數(shù)據(jù)類型TypeHandle
這篇文章主要介紹了mybatis-plus如何配置自定義數(shù)據(jù)類型TypeHandle，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01