微信小程序开发一个小型商城（一、准备工作）

文章根据b站视频 零基础玩转微信小程序 教程（黑马）
最开始我们需要在app.json文件当中声明所有使用到的界面。代码如下所示：

"pages": [
    "pages/index/index",
    "pages/category/index",
    "pages/goods_list/index",
    "pages/goods_detail/main",
    "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"
  ],

其次需要对windows属性进行部分适配：

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "lzq shop",
    "navigationBarTextStyle": "white"
  },

最后就是在页面下方定义tabBar界面：一个有四个：需要映入对应的小图标，图标放于与pages同层级的icon文件夹下：图标资源，单击下载

"tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "borderStyle": "black",
   
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "icon/home.png",
      "selectedIconPath": "icon/home-o.png"
    },
    {
      "pagePath": "pages/category/index",
      "text": "分类",
      "iconPath": "icon/category.png",
      "selectedIconPath": "icon/category-o.png"
    },
    {
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "icon/cart.png",
      "selectedIconPath": "icon/cart-o.png"
    },{
      "pagePath": "pages/user/index",
      "text": "我的",
      "iconPath": "icon/my.png",
      "selectedIconPath": "icon/my-o.png"
    }
  ]
  },

随后在与pages同层级目录新建一个style文件夹，用于引入外部图标。参考此文章，单击前往 在这个项目当中会用到一些小图标：如下图所示，可以自行挑选：

打开上方网址后会得到一段很长的关于样式的代码，全选代码后复制粘贴到style文件夹下的iconfont.wxss文件当中。
随后我们在全局样式文件app.wxss当中进行引入：并且加上一些全局样式

@import "./styles/iconfont.wxss";
/*初始化*/
page,viewe,text,swiper,swiper-item,image,navigator{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
page{
    /*主题颜色*/
    --themeColor:#eb4450;
    /*字体大小*/
    font-size: 28rpx;
}
image{
    width: 100%;
}

最后还有一个是参考文档，部分接口连接

下一篇文章地址，单击前往 微信小程序开发一个小型商城（二、首页设计）