【微信小程序】黑马优购–01项目搭建
小程序的第三方框架有
1.腾讯wepy 类似Vue
2.美团mpvue 类似Vue
3.京东taro 类似react
4.滴滴 chameleon
5.uni-app 类似Vue
6.原生框架 MIMA
本项目使用原生框架
1.接口文档
2.帮助文档
1.小程序开发文档
2.阿里巴巴字体 iconfont
3.项目搭建
3.1新建小程序项目
填入自己的APPID
3.2搭建项目结构
3.3搭建项目的页面
3.4引入字体图标
1.打开阿里巴巴字体图标网站
2.选择图标
3.添加至项目
4.查看在线链接然后复制
在新的页面打开看到代码后全选复制,然后返回微信开发工具找到新建的style文件粘贴
5.将样式文件由CSS修改为wxss
6.小程序中引入
在app.wxss中
/**app.wxss**/
@import "./styles/iconfont.wxss"
最后在那个页面要使用只需要输入<text class="iconfont xxx"></text>,xxx是你要使用的图标名称
3.5搭建项目的tabbar结构
参照小程序基础篇中tabbar的知识点
"tabBar": {
"color": "#2c2c2c",
"selectedColor": "#d81e06",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./icons/home.png",
"selectedIconPath": "./icons/home-o.png"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "./icons/category.png",
"selectedIconPath": "./icons/category-o.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "./icons/cart.png",
"selectedIconPath": "./icons/cart-o.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "./icons/my.png",
"selectedIconPath": "./icons/my-o.png"
}
]
},
3.6初始化页面样式
在app.wxss中
/**app.wxss**/
@import "./styles/iconfont.wxss";
/* 在微信小程序中不支持通配符 * */
page,view,text,swiper,swiper-item,image,navigator{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* 主题颜色 通过变量来实现
1 less 中存在变量这个知识
2 原生的CSS和wxss也是支持变量
*/
page{
/* 定义主题颜色 */
--themeColor:#eb4450;
/* 定义充一字体大小 假设设计稿大小是375px
1px=2rpx
*/
font-size: 28rpx;
}
在那个页面要使用自定义主题颜色,就在那个页面的wxss中
{
/* 使用主题颜色 */
color: var(--themeColor);
}