持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情

上一篇简单的写了微信小程序实现图书查询功能,这一篇开始实战做一个电商项目实战。

小程序端业务功能代码实现

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后端项目搭建

微信小程序实战（电商项目）