1. 帮助⽂档
2.项⽬搭建
2.1.新建⼩程序项⽬
填入自己的appid
2.2.搭建⽬录结构
在项目中添加如下文件夹。
2.3.搭建项⽬的⻚⾯
在app.json 中设置添加项目的所有页面
"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"
],
项目代码的结构如下:
2.4.引⼊字体图标
- 打开阿⾥巴巴字体图标⽹站
- 选择的图标
- 添加⾄项⽬
- 下载到本地
- 将样式⽂件由css修改为wxss
- ⼩程序中引⼊
将需要的图标加入购物车,然后点击添加至项目按钮。
点击Font class,并点击查看在线链接,显示css文件的路径
复制链接,在浏览器中打开,复制代码。
在styles目录下新建 iconfont.wxss 文件,将复制的内容粘贴。
在app.wxss 中 导入 iconfont.wxss,如下:
@import "./styles/iconfont.wxss";
这样就可以在项目中使用使用该图标了。
<text class="iconfont icon-shouyemw"></text>
2.5. 搭建项⽬tabbar结构
新建icons目录,将tabbar需要的图标粘贴到该目录中。
如下8张图标:
在app.json中添加tabbar:
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-o.png"
},
{
"pagePath": "pages/category/index",
"text": "分类",
"iconPath": "icons/category.png",
"selectedIconPath": "icons/category-o.png"
},
{
"pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "icons/cart.png",
"selectedIconPath": "icons/cart-o.png"
},
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my-o.png"
}]
},
2.6 navigationBar
app.json中设置navigationBar的背景颜色和字体颜色
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#eb4450",
"navigationBarTitleText": "小鸣优购",
"navigationBarTextStyle": "white"
},
效果如下:
来源:CSDN
作者:hongxue8888
链接:https://blog.csdn.net/hongxue8888/article/details/104540943