小程序的第三方框架
例如常见的:腾讯 wepy类似vue,美团 mpvue类似vue,京东 taro,滴滴 chameleon,uni—app类似vue。
此项目使用的原生框架MINA
1、搭建项目目录结构
目录名 | 作用 |
---|---|
styles | 存放公共样式 |
components | 存放组件 |
lib | 存放第三⽅库 |
utils | ⾃⼰的帮助库 |
request | ⾃⼰的接⼝帮助库 |
如下图所示:
2、搭建项目的页面
页面名称 | 名称 |
---|---|
⾸⻚ | index |
分类⻚⾯ | category |
商品列表⻚⾯ | goods_list |
商品详情⻚⾯ | goods_detail |
购物⻋⻚⾯ | cart |
收藏⻚⾯ | collect |
订单⻚⾯ | order |
搜索⻚⾯ | search |
个⼈中⼼⻚⾯ | user |
意⻅反馈⻚⾯ | feedback |
登录⻚⾯ | login |
授权⻚⾯ | auth |
结算⻚⾯ | pay |
如下图所示(在page文件中会显示如下文件):
3、引入字体图标
阿里巴巴字体图标库 iconfont,链接:
https://www.iconfont.cn/
.
1、搜索购物车,选择我们想要的图标
2、点击购物车,点击添加至项目
3、测试项目如下显示
可以新增一个文件夹,选择我们要使用的如下图所示的这些图标,点击font class,可根据直接喜好选择,这边附上我的选择引入到我们的项目当中链接:
//at.alicdn.com/t/font_2100755_gguxbeegnvg.css
.
点击链接,复制其中的代码至styles中,新建文件iconfont.wxss,这样我们使用的外网上的,不使用本地的了。
综上导入完成,测试下是否能够使用
1、打开page下文件,在app.wxss进行导入
2、在index文件测试是否能够使用(这边测试的是支付图标,代码在iconfont.wxss中可以查看到对应的图标名称)
//1、导入
@import "./styles/iconfont.wxss";
//2、测试
<view>首页:
<text class="iconfont iconzhifu:before"></text>
</view>
如图所示:
4、搭建页面下端的tabar结构
新增文件夹icon,放入我们要使用的图片
链接:
底部图片的链接
.提取码:uicj
如图所示:
在page下app.json文件中添加tabar,下图中列举了两个,首页和分类,如果List中只写一个的话是会报错的。
如下图所示会显示对应的图标:
写完剩下的两个,一共是4个,包括首页、分类、购物车和我的,List中的代码如下:
"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"
}
]
再细致修改下,tabar中的未选中以及选中和背景的颜色,代码如下所示:
"tabBar": {
"color": "#999", //未选中时的颜色
"selectedColor": "#ff2d4a", //选中时候的颜色
"backgroundColor": "#fafafa", //背景色
"position": "bottom",
"borderStyle": "black",
效果图,如下所示:
5、初始化页面样式
顶部的导航栏颜色,以及字体颜色,在全局配置文件app.json中编写代码
对样式进行初始化,打开全部文件,app.wxss中添加如下代码
@import "./styles/iconfont.wxss";
/*在微信小程序中不支持通配符 例如 ‘*’ */
page,view,text,swiper,swiper-item,image{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*主题颜色 通过变量来实现
1 less 中 存在 变量这个知识
2 原生的css和wxss也是支持 变量
*/
page{
/*定义主题的颜色*/
--themeColor:#eb4450;
/*定义统一的字体大小 假设设计稿 大小是 375px
1px=2rpx
*/
font: size 28rpx;
}
仅供学习参考使用!!!
不足之处,请指出,蟹蟹!!!