【微信小程序开发】栀子手作花花微信小程序商城开发最佳实践
本文介绍了通过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. 示例代码
<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template>2.3 分类页面设计
<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template>
2.4 商品详情页面设计
相关代码演示：
<template>
<view v-show="!isLoading":>
<SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover"
:images="goods.goods_images" />
<view v-if="!isLoading" >
<view >
<view >
<text >￥</text>
<text >{{ goods.goods_price_min }}</text>
<view v-if="goods.is_user_grade" >
<text>会员价</text>
</view>
<text v-if="goods.line_price_min > 0" >￥{{ goods.line_price_min }}</text>
</view>
<view >
<view >
<text>已售{{ goods.goods_sales }}件</text>
</view>
</view>
</view>
<view >
<view >
<text >{{ goods.goods_name }}</text>
</view>
<view ></view>
<view >
<button@click="onShowShareSheet()">
<text ></text>
<text >分享</text>
</button>
</view>
</view>
<view v-if="goods.selling_point" >
<text>{{ goods.selling_point }}</text>
</view>
</view>
<view v-if="goods.spec_type == 20"@click="onShowSkuPopup(1)">
<view >
<view >
<text >选择：</text>
<textv-for="(item, index) in goods.specList"
:key="index">{{ item.spec_name }}</text>
</view>
<view >
<text ></text>
</view>
</view>
</view>
<Service v-if="!isLoading" :goods-id="goodsId" />
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
<Comment v-if="!isLoading" :goods-id="goodsId" :limit="2" />
<view v-if="!isLoading" >
<view >
<text>商品描述</text>
</view>
<view v-if="goods.content != ''" >
<mp-html :content="goods.content" />
</view>
</view>
<view >
<view >
<view >
<view@click="onTargetHome">
<view >
<text ></text>
</view>
<view >
<text>首页</text>
</view>
</view>
<customer-btn v-if="isShowCustomerBtn" :showCard="true" :cardTitle="goods.goods_name"
:cardImage="goods.goods_image">
<view >
<view >
<text ></text>
</view>
<view >
<text>客服</text>
</view>
</view>
</customer-btn>
</view>
<view >
<view >
<view@click="onShowSkuPopup(3)">
<text>更多详情</text>
</view>
</view>
</view>
</view>
</view>
<share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" />
<u-modal v-model="showQrModal" :title="温馨提示">
<view >
<text>下单请长按二维码➕微信</text>
<image src="../../static/qrcode.jpg" mode="widthFix" :show-menu-by-longpress="true"/>
</view>
</u-modal>
</view>
</template>2.4 我的页面设计
<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> {{ userInfo.nick_name }}<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> {{ userInfo.grade.name }}<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> {{ userInfo.mobile }}<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> 未登录 点击登录账号<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> {{ isLogin ? assets.balance : '--' }}<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> 账户余额<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> {{ isLogin ? assets.points : '--' }}<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> {{ setting.points_name }}<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> {{ isLogin ? assets.coupon : '--' }}<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> 优惠券<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> 我的钱包<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template>我的服务<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> {{ item.name }} {{ item.count }} 99+<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template>{{ item.name }}<template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template><template>
<view:>
<Page :items="items" />
<PrivacyPopup :hideTabBar="true" />
</view>
</template> 退出登录 三、项目总结
由于篇幅原因，更多信息和源码可直接联系本人微信（red_tea_v2），代码和服务部署可以提供技术支持，其他问题可直接在文章下面评论。
来源:https://www.cnblogs.com/52tech/p/18378081
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]