文章根据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%;
}
最后还有一个是参考文档,部分接口连接