上一篇简单的写了微信小程序实现图书查询功能,这一篇开始实战做一个电商项目实战。
小程序端业务功能代码实现
1.项目整体搭建
1.1 创建小程序项目miniprogram-mall
网络异常，图片无法展示
|
1.2 导入矢量图标
1.在阿里云矢量库选择项目中需要的图标进行导入
网络异常，图片无法展示
|
2.创建styles/iconfont.wxss文件，粘贴复制的图标文件代码
@font-face { font-family: "iconfont"; /* Project id 2848128 */ src: url('//at.alicdn.com/t/font_2848128_mchidofoxgo.woff2?t=1643706746390') format('woff2'), url('//at.alicdn.com/t/font_2848128_mchidofoxgo.woff?t=1643706746390') format('woff'), url('//at.alicdn.com/t/font_2848128_mchidofoxgo.ttf?t=1643706746390') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-search:before { content: "\e648"; } .icon-quanbudingdan:before { content: "\e600"; } .icon-daifukuan:before { content: "\e601"; } .icon-tuikuan:before { content: "\e8ab"; } .icon-daishouhuo:before { content: "\e640"; } .icon-home:before { content: "\e69b"; } .icon-shoucang:before { content: "\e666"; } .icon-kefufenxiermaikefu:before { content: "\e889"; } .icon-chakantiezifenxiang:before { content: "\e660"; } .icon-weibiaoti2fuzhi08:before { content: "\e625"; } .icon-dingdan:before { content: "\e897"; } .icon-gouwuche:before { content: "\e899"; } .icon-fukuantongzhi:before { content: "\e60c"; } .icon-icon-:before { content: "\e701"; } .icon-shoucang1:before { content: "\e8c6"; }
3.全局导入
/**app.wxss**/ /* 全局引入iconfont */ @import "./styles/iconfont.wxss"
4.index页面测试
<!--index.wxml--> <View> <View class="iconfont icon-daifukuan">全局图标引入</View> <View class="iconfont icon-search">全局图标引入</View> <View class="iconfont icon-daifukuan">全局图标引入</View> </View>
5.效果
网络异常，图片无法展示
|
1.3 底部菜单tabbar实现
设置底部菜单
{ "pages":[ "pages/index/index", "pages/category/index", "pages/cart/index", "pages/my/index", "pages/logs/logs" ], "tabBar": { "color": "#999", "selectedColor": "#FF5700", "backgroundColor": "#fafafa", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "icons/_home.png", "selectedIconPath": "icons/home.png" },{ "pagePath": "pages/category/index", "text": "分类", "iconPath": "icons/_category.png", "selectedIconPath": "icons/category.png" },{ "pagePath": "pages/cart/index", "text": "购物车", "iconPath": "icons/_cart.png", "selectedIconPath": "icons/cart.png" },{ "pagePath": "pages/my/index", "text": "我的", "iconPath": "icons/_my.png", "selectedIconPath": "icons/my.png" }] }, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#FF5700", "navigationBarTitleText": "微信小程序电商实例", "navigationBarTextStyle":"white" }, "style": "v2", "sitemapLocation": "sitemap.json" }
测试：
网络异常，图片无法展示
|
1.4初始化全局样式设置
/* 初始化全局样式 */ page,view,text,swiper,swiper-item,image,navigator{ padding:0; margin: 0; box-sizing: border-box; }
全局变量定义 设置主题颜色，字体大小等
/* 全局变量定义 设置主题颜色，字体大小等 */ page{ /* 主题颜色 */ --themeColor:#FF5700; /* 字体大小 rpx自适应大小 */ font-size:28rpx; }
使用变量var
view{ color:var(--themeColor); }
导航栏背景颜色和文字颜色设置
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#FF5700", "navigationBarTitleText": "java1234商城", "navigationBarTextStyle": "white" }
1.5搜索框自定义组件实现
因为后面多个页面会用到搜索框，考虑到搜索框的重用性因此做成自定义组件，其他页面需要使用时直接引入即可。
1.创建components/SearchBar 页面
网络异常，图片无法展示
|
<!--components/SearchBar/SearchBar.wxml--> <view>搜索框</view>
2.index引入SearchBar
"usingComponents": { "SearchBar":"/components/SearchBar/SearchBar" }
<!--index.wxml 使用SearchBar--> <View> <View class="iconfont icon-daifukuan">全局图标引入</View> <View class="iconfont icon-search">全局图标引入</View> <View class="iconfont icon-daifukuan">全局图标引入</View> </View> <SearchBar></SearchBar>
3.测试：
网络异常，图片无法展示
|
1.6完善SearchBar.wxml搜索框组件
1.搜索页面SearchBar.wxml
<view class="search_bar"> <navigator url="/pages/search/index" open-type="navigate"> <icon type="search" size="16"></icon>搜索 </navigator> </view>
2.搜索组件样式设置
/* components/SearchBar/SearchBar.wxss */ .search_bar{ height: 90rpx; padding: 10rpx; background-color: var(--themeColor); } .search_bar navigator{ height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 15rpx; color: #666; } .search_bar navigator icon{ padding-right: 5rpx; }
修改index.wxml
<!--index.wxml--> <view> <SearchBar></SearchBar> </view>
测试：
网络异常，图片无法展示
|
下一篇 springboot后端项目搭建
