【微信小程序开发】栀子手作花花微信小程序商城开发最佳实践

不如从前

本文介绍了通过uniapp技术实现了一套栀子手作在线购物商城系统。包含首页、分类、我的等常用功能入口。

一、功能演示

首页：包含了商品介绍，领劵中心和商品列表区域。
商品分类：支持不同的商品分类和商品搜素。
商品详情：包含了商品详细的描述信息，透出了分享、首页、客服等入口。
我的：包含了账户的常见的个人操作信息，知乎此领劵，在线客服，钱包管理等入口。
H5端在线体验地址：https://wx.gaoredu.com/
微信小程序：可以直接搜索“栀子手作”进入在线体验。

二、开发流程

2.1 项目准备与搭建

1. 环境搭建

首先，确保你已经安装了Node.js和HBuilderX，因为uniapp的项目可以通过HBuilderX来方便地创建和管理。安装HBuilderX后，在官网（https://www.dcloud.io/hbuilderx.html）下载并安装。
2. 创建uniapp项目

启动HBuilderX，点击菜单栏中的“文件”→“新建”→“项目”，选择“uni-app”类型，输入项目名称（如“huahuaMall”），选择项目保存路径，点击“创建”按钮。项目创建成功后，你会看到一个基本的项目结构，包括pages、static、components等目录。
2.2 首页设计

这里是栀子手作的小店的首页设计：

1. 页面布局

首页是商城的门户，通常包含轮播图、搜索框、热门商品列表等功能模块。

• 轮播图：使用和组件展示。
  
• 搜索框：自定义一个搜索组件，可以放置在中。
  
• 商品列表：使用循环遍历商品数据，每个商品使用展示。
  

2. 示例代码

1. <template>
2.   <view  :>
3.    
4.     <Page :items="items" />
5.    
6.    
7.     <PrivacyPopup :hideTabBar="true" />
8.    
9.   </view>
10. </template>

复制代码

2.3 分类页面设计

1. <template>
2.   <view  :>
3.    
4.     <Page :items="items" />
5.    
6.    
7.     <PrivacyPopup :hideTabBar="true" />
8.    
9.   </view>
10. </template>                  

复制代码

 
2.4 商品详情页面设计

相关代码演示：

1. <template>
2.         <view v-show="!isLoading"  :>
3.                
4.                 <SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover"
5.                         :images="goods.goods_images" />
7.                
8.                 <view v-if="!isLoading" >
9.                        
10.                         <view >
11.                                 <view >
12.                                        
13.                                         <text >￥</text>
14.                                         <text >{{ goods.goods_price_min }}</text>
15.                                        
16.                                         <view v-if="goods.is_user_grade" >
17.                                                 <text>会员价</text>
18.                                         </view>
19.                                        
20.                                         <text v-if="goods.line_price_min > 0" >￥{{ goods.line_price_min }}</text>
21.                                 </view>
22.                                 <view >
23.                                        
24.                                         <view >
25.                                                 <text>已售{{ goods.goods_sales }}件</text>
26.                                         </view>
27.                                 </view>
28.                         </view>
29.                        
30.                         <view >
31.                                 <view >
32.                                         <text >{{ goods.goods_name }}</text>
33.                                 </view>
34.                                 <view ></view>
35.                                 <view >
36.                                         <button  @click="onShowShareSheet()">
37.                                                 <text ></text>
38.                                                 <text >分享</text>
39.                                         </button>
40.                                 </view>
41.                         </view>
42.                        
43.                         <view v-if="goods.selling_point" >
44.                                 <text>{{ goods.selling_point }}</text>
45.                         </view>
46.                 </view>
48.                
49.                 <view v-if="goods.spec_type == 20"  @click="onShowSkuPopup(1)">
50.                         <view >
51.                                 <view >
52.                                         <text >选择：</text>
53.                                         <text  v-for="(item, index) in goods.specList"
54.                                                 :key="index">{{ item.spec_name }}</text>
55.                                 </view>
56.                                 <view >
57.                                         <text ></text>
58.                                 </view>
59.                         </view>
60.                 </view>
62.                
63.                 <Service v-if="!isLoading" :goods-id="goodsId" />
65.                
66.                 <SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
68.                
69.                 <Comment v-if="!isLoading" :goods-id="goodsId" :limit="2" />
71.                
72.                 <view v-if="!isLoading" >
73.                         <view >
74.                                 <text>商品描述</text>
75.                         </view>
76.                         <view v-if="goods.content != ''" >
77.                                 <mp-html :content="goods.content" />
78.                         </view>
79.                 </view>
81.                
82.                 <view >
83.                         <view >
84.                                
85.                                 <view >
86.                                        
87.                                         <view  @click="onTargetHome">
88.                                                 <view >
89.                                                         <text ></text>
90.                                                 </view>
91.                                                 <view >
92.                                                         <text>首页</text>
93.                                                 </view>
94.                                         </view>
95.                                        
96.                                         <customer-btn v-if="isShowCustomerBtn" :showCard="true" :cardTitle="goods.goods_name"
97.                                                 :cardImage="goods.goods_image">
98.                                                 <view >
99.                                                         <view >
100.                                                                 <text ></text>
101.                                                         </view>
102.                                                         <view >
103.                                                                 <text>客服</text>
104.                                                         </view>
105.                                                 </view>
106.                                         </customer-btn>
107.                                        
108.                                        
109.                                 </view>
110.                                
111.                                 <view >
112.                                         <view >
113.                                                
114.                                                 <view  @click="onShowSkuPopup(3)">
115.                                                         <text>更多详情</text>
116.                                                 </view>
117.                                         </view>
118.                                 </view>
119.                         </view>
120.                 </view>
122.                
123.                
125.                
126.                 <share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" />
128.                
129.                 <u-modal v-model="showQrModal" :title="温馨提示">
130.                         <view >
131.                                 <text>下单请长按二维码➕微信</text>
132.                                 <image src="../../static/qrcode.jpg" mode="widthFix" :show-menu-by-longpress="true"/>
133.                         </view>
134.                 </u-modal>
135.         </view>
136. </template>

复制代码

2.4 我的页面设计

1. <template>
2.   <view  :>
3.    
4.     <Page :items="items" />
5.    
6.    
7.     <PrivacyPopup :hideTabBar="true" />
8.    
9.   </view>
10. </template><template>
11.   <view  :>
12.    
13.     <Page :items="items" />
14.    
15.    
16.     <PrivacyPopup :hideTabBar="true" />
17.    
18.   </view>
19. </template>                          {{ userInfo.nick_name }}<template>
20.   <view  :>
21.    
22.     <Page :items="items" />
23.    
24.    
25.     <PrivacyPopup :hideTabBar="true" />
26.    
27.   </view>
28. </template><template>
29.   <view  :>
30.    
31.     <Page :items="items" />
32.    
33.    
34.     <PrivacyPopup :hideTabBar="true" />
35.    
36.   </view>
37. </template><template>
38.   <view  :>
39.    
40.     <Page :items="items" />
41.    
42.    
43.     <PrivacyPopup :hideTabBar="true" />
44.    
45.   </view>
46. </template>              {{ userInfo.grade.name }}<template>
47.   <view  :>
48.    
49.     <Page :items="items" />
50.    
51.    
52.     <PrivacyPopup :hideTabBar="true" />
53.    
54.   </view>
55. </template>              {{ userInfo.mobile }}<template>
56.   <view  :>
57.    
58.     <Page :items="items" />
59.    
60.    
61.     <PrivacyPopup :hideTabBar="true" />
62.    
63.   </view>
64. </template><template>
65.   <view  :>
66.    
67.     <Page :items="items" />
68.    
69.    
70.     <PrivacyPopup :hideTabBar="true" />
71.    
72.   </view>
73. </template>              未登录          点击登录账号<template>
74.   <view  :>
75.    
76.     <Page :items="items" />
77.    
78.    
79.     <PrivacyPopup :hideTabBar="true" />
80.    
81.   </view>
82. </template><template>
83.   <view  :>
84.    
85.     <Page :items="items" />
86.    
87.    
88.     <PrivacyPopup :hideTabBar="true" />
89.    
90.   </view>
91. </template>              {{ isLogin ? assets.balance : '--' }}<template>
92.   <view  :>
93.    
94.     <Page :items="items" />
95.    
96.    
97.     <PrivacyPopup :hideTabBar="true" />
98.    
99.   </view>
100. </template>    账户余额<template>
101.   <view  :>
102.    
103.     <Page :items="items" />
104.    
105.    
106.     <PrivacyPopup :hideTabBar="true" />
107.    
108.   </view>
109. </template>                    {{ isLogin ? assets.points : '--' }}<template>
110.   <view  :>
111.    
112.     <Page :items="items" />
113.    
114.    
115.     <PrivacyPopup :hideTabBar="true" />
116.    
117.   </view>
118. </template>    {{ setting[SettingKeyEnum.POINTS.value].points_name }}<template>
119.   <view  :>
120.    
121.     <Page :items="items" />
122.    
123.    
124.     <PrivacyPopup :hideTabBar="true" />
125.    
126.   </view>
127. </template>                    {{ isLogin ? assets.coupon : '--' }}<template>
128.   <view  :>
129.    
130.     <Page :items="items" />
131.    
132.    
133.     <PrivacyPopup :hideTabBar="true" />
134.    
135.   </view>
136. </template>    优惠券<template>
137.   <view  :>
138.    
139.     <Page :items="items" />
140.    
141.    
142.     <PrivacyPopup :hideTabBar="true" />
143.    
144.   </view>
145. </template><template>
146.   <view  :>
147.    
148.     <Page :items="items" />
149.    
150.    
151.     <PrivacyPopup :hideTabBar="true" />
152.    
153.   </view>
154. </template><template>
155.   <view  :>
156.    
157.     <Page :items="items" />
158.    
159.    
160.     <PrivacyPopup :hideTabBar="true" />
161.    
162.   </view>
163. </template>        我的钱包<template>
164.   <view  :>
165.    
166.     <Page :items="items" />
167.    
168.    
169.     <PrivacyPopup :hideTabBar="true" />
170.    
171.   </view>
172. </template><template>
173.   <view  :>
174.    
175.     <Page :items="items" />
176.    
177.    
178.     <PrivacyPopup :hideTabBar="true" />
179.    
180.   </view>
181. </template>  我的服务<template>
182.   <view  :>
183.    
184.     <Page :items="items" />
185.    
186.    
187.     <PrivacyPopup :hideTabBar="true" />
188.    
189.   </view>
190. </template><template>
191.   <view  :>
192.    
193.     <Page :items="items" />
194.    
195.    
196.     <PrivacyPopup :hideTabBar="true" />
197.    
198.   </view>
199. </template>                  {{ item.name }}                          {{ item.count }}              99+<template>
200.   <view  :>
201.    
202.     <Page :items="items" />
203.    
204.    
205.     <PrivacyPopup :hideTabBar="true" />
206.    
207.   </view>
208. </template><template>
209.   <view  :>
210.    
211.     <Page :items="items" />
212.    
213.    
214.     <PrivacyPopup :hideTabBar="true" />
215.    
216.   </view>
217. </template><template>
218.   <view  :>
219.    
220.     <Page :items="items" />
221.    
222.    
223.     <PrivacyPopup :hideTabBar="true" />
224.    
225.   </view>
226. </template><template>
227.   <view  :>
228.    
229.     <Page :items="items" />
230.    
231.    
232.     <PrivacyPopup :hideTabBar="true" />
233.    
234.   </view>
235. </template>{{ item.name }}<template>
236.   <view  :>
237.    
238.     <Page :items="items" />
239.    
240.    
241.     <PrivacyPopup :hideTabBar="true" />
242.    
243.   </view>
244. </template><template>
245.   <view  :>
246.    
247.     <Page :items="items" />
248.    
249.    
250.     <PrivacyPopup :hideTabBar="true" />
251.    
252.   </view>
253. </template>      退出登录            

复制代码

三、项目总结

由于篇幅原因，更多信息和源码可直接联系本人微信（red_tea_v2），代码和服务部署可以提供技术支持，其他问题可直接在文章下面评论。

来源:https://www.cnblogs.com/52tech/p/18378081
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！