微信小程序介绍以及开发组件和flex布局
微信小程序的介绍
什么是微信小程序?
- 移动互联网时代,手机。
- 手机软件,在手机上中安装很多软件。
- 腾讯和阿里(只安装自己不用别人)
- 腾讯:微信 + N小程序
- 阿里:支付宝 + N小程序
如何开发
- 小程序:学习微信开发的语言(前端html、css、js、vue.js)
- 微信开发者工具
- API:restful接口(Python+django+drf框架)。
- pycharm
环境搭建
申请一个微信公众平台
保存自己的appid
下载工具
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CwKWYATQ-1592195221374)(
创建项目
开发程序
1全局配置
{
"pages": [
"pages/index/index",
"pages/home/home"
],
"window": {
"navigationBarBackgroundColor": "#FFDAB9",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "李业"
},
"tabBar": {
"selectedColor":"#CD5C5C",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/ic_menu_choice_nor.png",
"selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
},
{
"pagePath": "pages/home/home",
"text": "我的",
"iconPath": "static/tabbar/ic_menu_me_nor.png",
"selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
}
]
}
}
组件
text
编写文本信息,类似于span标签
view
容器,类似于div标签
image
图片使用方法都和html css中类似
像素
- px
- rpx,750rpx
在开发小程序时给组件定义大小时一律用rpx。不用px。
flex布局
一种非常方便的布局方式。
在容器中记住4个样式即可。
display: flex; flex布局
flex-direction: row; 规定主轴的方向:row/column
justify-content: space-around; 元素在主轴方向上的排列方式:flex-start/flex-end/space-around/space-between
align-items: center; 元素在副轴方向上的排列方式:flex-start/flex-end/space-around/space-between
设置flex-direction:决定主轴的方向(子元素/项目的排列方向)
1.row;
主轴横向从左至右
2.column;
主轴纵向,从上至下
justify-content属性:
默认情况下,项目都从主轴线的mian start点开始排列在主轴线上。
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
align-items属性:
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
ween:两端对齐,项目之间的间隔都相等。
align-items属性:
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。