微信小程序介紹以及開發組件和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,將佔滿整個容器的高度。