視頻演示

以下演示為手機(jī)真機(jī)錄屏

1、功能列表

??????該微信商城系統(tǒng)實現(xiàn)的主要如下圖所示

2、項目結(jié)構(gòu)

zhengShop
├─ .eslintrc.js
├─ app.js
├─ app.json
├─ app.wxss
├─ components
│  ├─ SearchInput
│  │  ├─ SearchInput.js
│  │  ├─ SearchInput.json
│  │  ├─ SearchInput.less
│  │  ├─ SearchInput.wxml
│  │  └─ SearchInput.wxss
│  ├─ Tabs
│  │  ├─ Tabs.js
│  │  ├─ Tabs.json
│  │  ├─ Tabs.wxml
│  │  └─ Tabs.wxss
│  └─ UpImg
│     ├─ UpImg.js
│     ├─ UpImg.json
│     ├─ UpImg.wxml
│     └─ UpImg.wxss
├─ icons
│  ├─ cart.png
│  ├─ cart_after.png
│  ├─ category_after.png
│  ├─ cateory.png
│  ├─ fenxiang.png
│  ├─ gouwuche.png
│  ├─ home.png
│  ├─ home_after.png
│  ├─ info.png
│  └─ info_after.png
├─ lib
├─ pages
│  ├─ auth
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ cart
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.less
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ category
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.less
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ collect
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.less
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ feedback
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.less
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ goods_detail
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.less
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ goods_list
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.less
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ index
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.less
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ login
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ order
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.less
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ pay
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.less
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  ├─ search
│  │  ├─ index.js
│  │  ├─ index.json
│  │  ├─ index.less
│  │  ├─ index.wxml
│  │  └─ index.wxss
│  └─ user
│     ├─ index.js
│     ├─ index.json
│     ├─ index.less
│     ├─ index.wxml
│     └─ index.wxss
├─ project.config.json
├─ project.private.config.json
├─ request
│  └─ index.js
├─ sitemap.json
├─ styles
│  └─ iconfont.wxss
└─ utils
   └─ asyncWx.js

3、具體頁面展示

3.1 首頁

???????首頁基本構(gòu)成：1、頂部搜索頁；2、輪播圖（點擊輪播圖可跳轉(zhuǎn)）；3、導(dǎo)航欄分類（點擊可跳轉(zhuǎn)）。4、商品分類圖集（點擊頁面可跳轉(zhuǎn)）；

3.2 商品分類

???????頁面基本構(gòu)成：1、搜索框。2、商品分類（點擊左側(cè)不同分類，右方展示不同商品）。3、點擊右方商品，可以跳轉(zhuǎn)到對應(yīng)的商品列表頁面

3.3 商品列表

???????頁面基本構(gòu)成：1、搜索框。2、商品列表（點擊商品會跳轉(zhuǎn)）。3、觸底后，會加載新的數(shù)據(jù)。

3.4 商品詳情

???????頁面基本構(gòu)成：1、商品輪播圖展示。2、商品具體描述。3、點擊收藏，會將該商品加入收藏列表中。4、點擊加入購物車，可以將該商品加入購物車中。圖文詳情，找不到好的素材，暫時用1代替嘍。你可以自己填充對應(yīng)的數(shù)據(jù)

3.5 購物車

???????頁面基本構(gòu)成：1、收獲地址。（調(diào)用接口獲?。?、商品詳情。3、可以添加商品數(shù)量。4、總價和數(shù)量會隨著選中的商品變化。

3.6 商品支付

???????頁面基本構(gòu)成：1、如果沒選地址，先選擇收獲地址。2、購買的商品詳情，及訂單總價。3、如果要開通微信支付，調(diào)用支付接口就行，需要給APPID授權(quán)。比較麻煩，這里模擬支付。

3.7 訂單查詢

訂單只展示部分?jǐn)?shù)據(jù)

3.8 個人中心

1、這里收藏的商品數(shù)量，是真實的。點擊可以進(jìn)入商品收藏列表。2、我的訂單，也可以跳轉(zhuǎn)到訂單頁面。3、意見反饋也可以用

3.9 商品收藏

點擊我的收藏，這里有收藏的商品

3.10 意見反饋

4、部分源碼

首頁頁面源碼

<!-- index.wxml -->
<view class="pyg_index">
    <!-- 搜索框 開始 -->
    <SearchInput></SearchInput>
    <!-- 搜索框 結(jié)束 -->
    <!-- 輪播圖 開始 -->
    <view class="index_swiper">
        <swiper autoplay indicator-dots circular>
            <swiper-item wx:for="{{swiperList}}" wx:key="id">
                <navigator url="{{item.navigator_url}}">
                    <image mode="widthFix" src="{{item.name}}"></image>
                </navigator>
            </swiper-item>
        </swiper>
    </view>
    <!-- 輪播圖 結(jié)束 -->
    <!-- 樓層 開始 -->
    <view class="index_floor">
        <view class="floor_group" wx:for="{{FloorList}}" wx:for-item="item1" wx:for-index="index1" wx:key="id">
            <!-- 標(biāo)題 -->
            <view class="floor_title">{{item1.name}}</view>
            <!-- 內(nèi)容 -->
            <view class="floor_list">
                <navigator url="/pages/goods_list/index"  wx:for="{{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" wx:key="id">
                    <image mode="{{index2 ===0 ? 'heightFix':'scaleToFill'}}" src="{{item2.image_src}}" />
                </navigator>
            </view>
        </view>
    </view>
    <!-- 樓層 結(jié)束 -->
</view>

5、開發(fā)文檔

文章來源地址http://www.zghlxwxcb.cn/news/detail-508781.html

到了這里，關(guān)于微信小程序開發(fā)---購物商城系統(tǒng)。【詳細(xì)業(yè)務(wù)需求描述+實現(xiàn)效果】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！