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

小咪咪 2023-07-25 08:43 28阅读 0赞

文章根据b站视频 [零基础玩转微信小程序][Link 1] 教程（黑马）  
最开始我们需要在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文件夹下：[图标资源，单击下载][Link 2]

"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文件夹，用于引入外部图标。[参考此文章，单击前往][Link 3] 在这个项目当中会用到一些小图标：如下图所示，可以自行挑选：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
打开上方网址后会得到一段很长的关于样式的代码，全选代码后复制粘贴到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%;
    }

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

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

[Link 1]: https://www.bilibili.com/video/BV1y7411z7hQ?from=search&seid=10413799014358138772
[Link 2]: https://file.icve.com.cn/ssykt/658/613/A4B996ED1BE8BC10FE987C985870BC71.rar?response-content-disposition=attachment;filename=icons.rar
[Link 3]: https://blog.csdn.net/qq_44973159/article/details/105360035
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: /images/20230528/13ffc3c5663a49eba5bd68ff0cb01463.png
[Link 4]: https://www.showdoc.cc/128719739414963
[Link 5]: https://blog.csdn.net/qq_44973159/article/details/105492046