微信小程序介紹以及開發組件和flex佈局

微信小程序介紹以及開發組件和flex佈局

微信小程序的介紹

什麼是微信小程序?

  • 移動互聯網時代,手機。
  • 手機軟件,在手機上中安裝很多軟件。
  • 騰訊和阿里(只安裝自己不用別人)
    • 騰訊:微信 + N小程序
    • 阿里:支付寶 + N小程序

如何開發

  • 小程序:學習微信開發的語言(前端html、css、js、vue.js)
    • 微信開發者工具
  • API:restful接口(Python+django+drf框架)。
    • pycharm

環境搭建

申請一個微信公衆平臺

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TAy4LtH2-1592195221371)(C:\Users\dell\Desktop\我的前端博客\images\wx.png)]

保存自己的appid

下載工具

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CwKWYATQ-1592195221374)(C:\Users\dell\Desktop\我的前端博客\images\微信.png)]

創建項目

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-V5Y7m85K-1592195221375)(C:\Users\dell\Desktop\我的前端博客\images\微信1.png)]

開發程序

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,將佔滿整個容器的高度。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章