微信小程序电商项目总结(1)

0、项目搭建

1、新建项目，填入自己的AppID

 

2、搭建目录结构

 3、搭建项目Page

快捷键：alt+shift 选中多行，ctrl + shift + →，选中

 4、引入字体图标

（1）阿里巴巴矢量图标库 ；

（2）选择图标，加入购物车；选好之后，添加至项目；

（3）选择Font class 和 查看在线链接；

（4） 复制在线链接，到浏览器中打开链接，然后将打开的内容ctrl+A复制；

（5）在style目录下新建 iconfont.wxss 文件，将复制过来的在线链接中的内容粘贴过来；

 

（6）在app.wxss中全局引入

@import "./styles/iconfont.wxss";

（7）通过class类名来使用，注意，一定要加上 iconfont 

<!-- 搜索 -->
<view class="search_input">
    <navigator class="nav" url="../../pages/search/index" open-type="navigate">
        <text class="iconfont icon-sousuo"></text>
        搜索
    </navigator>
</view>

5、搭建项目tabbar结构

（1）找好图标，下载点击前后效果图的png，在根目录下新建icon文件夹，存放png

 （2）在app.json中写入tabbar

{
  "pages":[
    "pages/index/index",
    "pages/category/index",
    "pages/goods_list/index",
    "pages/goods_detail/index",
    "pages/cart/index",
    "pages/collect/index",
    "pages/order/index",
    "pages/search/index",
    "pages/user/index",
    "pages/feedback/index",
    "pages/login/index",
    "pages/auth/index",
    "pages/pay/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ff7a03",
    "navigationBarTitleText": "项目名称",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "color": "#b2b2b2",
    "selectedColor": "#fc9f35",
    "backgroundColor": "#fff",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./icon/home.png",
        "selectedIconPath": "./icon/home_fill.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "./icon/cate.png",
        "selectedIconPath": "./icon/cate_fill.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "./icon/cart.png",
        "selectedIconPath": "./icon/cart_fill.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "./icon/crown.png",
        "selectedIconPath": "./icon/crown_fill.png"
      }
    ]
  },
  
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

6、初始化页面样式

（1）在app.wxss 中，初始化

/* 替代通配符 */
page,view,text,swiper,swiper-item,image,navigator{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

page{
    /* 主题颜色，通过变量来实现，less，css，wxss都支持变量 */
    --themeColor:#ff7a03;
    /* 字体大小，假设设计图为375px，1px = 2rpx ; 14px = 28rpx */
    font-size: 28rpx;
}