如何用微信小程序?qū)懸粋€拼多多我的訂單頁面代碼

來自：素雅營銷研究院

方知筆記

2025年06月25日 07:09

在開發(fā)微信小程序時，我們經(jīng)常需要實現(xiàn)各種功能頁面，比如用戶中心、商品詳情頁、購物車等。本文將重點介紹如何使用微信小程序來編寫一個類似于拼多多的“我的訂單”頁面。

1. 準備工作

在開始編寫代碼之前，我們需要確保以下幾點：

已經(jīng)注冊并登錄了微信公眾平臺賬號。
安裝了微信開發(fā)者工具。
創(chuàng)建了一個小程序項目。

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

我們需要規(guī)劃好項目的目錄結(jié)構(gòu)。假設(shè)我們的項目名為 pinduoduo，那么目錄結(jié)構(gòu)可以如下：

pinduoduo/
├── app.js
├── app.json
├── app.wxss
├── pages/
│   └── order/
│       ├── order.js
│       ├── order.json
│       ├── order.wxml
│       └── order.wxss
└── utils/
└── api.js

3. 配置路由

在 app.json 中配置路由，以便能夠訪問到訂單頁面：

{
"pages": [
"pages/order/order"
],
"window": {
"navigationBarTitleText": "拼多多",
"navigationBarBackgroundColor": "#ff5722",
"navigationBarTextStyle": "white"
}
}

4. 編寫 WXML 模板

在 pages/order/order.wxml 中編寫訂單頁面的布局：

<view class="container">
<view class="header">
<text>我的訂單</text>
</view>
<view class="order-list">
<block wx:for="{{orders}}" wx:key="id">
<view class="order-item">
<image class="product-img" src="{{item.productImg}}"></image>
<view class="order-info">
<text>{{item.productName}}</text>
<text>{{item.price}}</text>
<text>{{item.status}}</text>
</view>
</view>
</block>
</view>
</view>

5. 編寫 WXSS 樣式

在 pages/order/order.wxss 中編寫訂單頁面的樣式：

.container {
padding: 20px;
}

.header {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}

.order-list {
display: flex;
flex-direction: column;
}

.order-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.product-img {
width: 80px;
height: 80px;
margin-right: 20px;
}

.order-info {
flex: 1;
}

6. 編寫 JavaScript 邏輯

在 pages/order/order.js 中編寫訂單頁面的邏輯：

Page({
data: {
orders: []
},
onLoad() {
this.getOrders();
},
getOrders() {
// 模擬獲取訂單數(shù)據(jù)，實際開發(fā)中應(yīng)調(diào)用后端接口
const orders = [
{ id: 1, productImg: 'https://example.com/product1.jpg', productName: '商品1', price: '￥100', status: '已發(fā)貨' },
{ id: 2, productImg: 'https://example.com/product2.jpg', productName: '商品2', price: '￥200', status: '待支付' },
{ id: 3, productImg: 'https://example.com/product3.jpg', productName: '商品3', price: '￥300', status: '已完成' }
];
this.setData({ orders });
}
});