设置页面基础配置和tabbar
创建相关页面
-
页面详情(全部页面的第二个斜杠后面可为index)
-
快速编辑参考列式编程技巧,
多光标编辑:alt+鼠标左键
光标向下选择编辑列:alt+shift+down (向上选择按up)
同时向后选择一个单词:ctrl+shift+left (向右选择按right)
向下复制一行代码:alt+shift+down (向上复制按up)
引入字体库(可省略)
-
在字体库网站上选择好所要使用的图标,加入项目中
-
获取css代码(https://www.iconfont.cn/)
-
在项目中的style文件夹中创建iconfont.wxss,将浏览器访问中的代码加入到此文件中
-
在app.wxss中引入iconfont.wxss (相对路劲)
@import "./style/iconfont.wxss"
初始化全局组件样式
themeColor为自定义样式名
@import "./style/iconfont.wxss";
page,view,text,swiper,swiper-item{
padding:0;
margin:0;
box-sizing: border-box;
}
page{
--themeColor: #47B5FF;
font-size: 28rpx;
}
设置tabbar
- 在项目根目录下引入要使用的图片,然后将路径写在iconPath和selecticonPath处。tabbar图片必须放在项目中,放在云存储中引用不了。
- 效果如下 ,这里的图标是在阿里的字体库网站上找的。