标签：实战 index wxss icons 微信电商 pages png

介绍

学习视频来源

SpringBoot微信小程序电商实战项目课程 Vue3.2 Element Plus后台管理 ( 火爆连载更新中... )_哔哩哔哩_bilibili

技术栈介绍

本套课程采用主流技术栈实现，Mysql数据库，SpringBoot2+Mybatis Plus后端，微信小程序原生实现，Vue3.2+Element Plus实现后台管理。基于JWT技术实现前后端分离。
微信小程序端涵盖了axios异步请求，Promise应用，swiper组件，自定义组件，应用了微信小程序提供的登录，支付，地址管理，包括下拉滑动分页，less应用，以及结合SpringBoot后端实现了企业级微信小程序支付功能，为了方便教学，采用ngrok实现映射本机IP，开发环境演示真实支付功能。
电商的后台管理采用了主流的Vue3.2+Element Plus组件实现，涵盖了axios+Promise工具类封装，自定义icon，vuex应用，router路由，路由守卫，使用了大量的Element Plus组件，如表格，分页，图片上传，下拉框，二级联动，Form表单，rules验证框架，dialog以及第三方vue-quil富文本组件等。

1. 创建微信小程序项目

准备工作

3_下载微信开发者工具以及安装_哔哩哔哩_bilibili 前几P会介绍微信开发者的注册以及开发工具的下载与使用

创建

创建时选择不使用云服务，选择javaScript模板

创建后

搭建空项目

删除app.wxss中的内容（里面是一些样式）
删除pages下的logs日志文件夹（app.json中要选出他的一条相关内容）
删除utils工具包文件夹（暂时不用）
删除index(首页)文件夹下的index.wxml，index.wxss，index.js中内容

index.json

{
  "usingComponents": {},
   //正常json中不能注释，这里目的是为了说明
   //程序主名字
  "navigationBarTitleText": "商城首页"
}

index.js

清空后输入Page，生成一个模板

2. iconfont矢量图引入

iconfont-阿里巴巴矢量图标库

网站使用方法

将图标添加到库

将库中图标添加到项目

进入连接后里面的内容就是我们需要的远程图标和样式

开发工具中使用

在pages同级列表下创建styles文件夹，里面创建iconfont.wxss文件，将上面内容复制进去-
在app.wxss中进行全局引入@import "./styles/iconfont.wxss"

以在首页使用为例：

<text class="iconfont icon-kefu">
</text>

3.底部菜单tabbar

该项目创建了icons文件夹并放置了一些本地图标

接下来对app.json进行处理，下面只写出改动部分

"pages":[
    //底部菜单的四个内容
    "pages/index/index",
    "pages/category/index",
    "pages/cart/index",
    "pages/my/index"
  ],
"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"
    }]
  },

4.初始化全局样式

在app.wxss中进行全局样式的设置

/* 初始化全局样式，该代码会报错，但是程序正常运行，原因未知 */
page,view,text,swiper,swiper-item,image,navigator{
    /* css中经典的盒式模型*/
  padding:0;
  margin:0;
  box-sizing:border-box;
}

/* 全局变量定义，设置主题颜色，字体大小等 */
page{
  /* 主题颜色 */
  --themeColor:#FF5700;
  /* 字体大小 rpx自适应大小，根据设备不同会自动适应屏幕大小 */
  font-size:28rpx;
}

使用上述全局样式

我们曾在index.wxml中写入了view标签包含的代码

现在我们在index.wxss中使用全局样式

/* 对view标签内容设置颜色，这里使用变量要使用var，--themeColor是我们上面设置的全局样式变量 */
view{
  color:var(--themeColor);
}

效果如下：

设置app.json中导航栏的颜色:

"window":{
    "backgroundTextStyle":"light",
    //设置导航栏的颜色
    "navigationBarBackgroundColor": "#FF5700",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"white"
  },

5.搜索框自定义组件实现

标签：实战,index,wxss,icons,微信,电商,pages,png
From： https://www.cnblogs.com/zaughtercode/p/17063793.html

实战：微信小程序电商项目

介绍