微信小程式環境搭建和骰子布局

2021-09-24 14:29:31 字數 1282 閱讀 1807

assets檔案有乙個icons的資料夾,裡面存放著圖示;

pages檔案分為分類的頁面classify資料夾,首頁頁面index資料夾,購物車頁面shopcat資料夾,我的頁面mine資料夾,而每個資料夾都有乙個js,json,wxml,wxss檔案。

骰子布局有六個屬性:

①flex-direction:屬性決定主軸的方向(即專案的排列方向)。

row(預設值):主軸為水平方向,起點在左端。

row-reverse:主軸為水平方向,起點在右端。

column:主軸為垂直方向,起點在上沿。

column-reverse:主軸為垂直方向,起點在下沿。

.box

②flex-wrap屬性:預設情況下,專案都排在一條線(又稱"軸線")上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。

nowrap(預設):不換行。

wrap:換行,第一行在上方。

wrap-reverse:換行,第一行在下方。

.box

③flex-flow屬性:flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap。

.box

④justify-content屬性定義了專案在主軸上的對齊方式。

flex-start(預設值):左對齊

flex-end:右對齊

center: 居中

space-between:兩端對齊,專案之間的間隔都相等。

space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。

.box

⑤align-items屬性定義專案在交叉軸上如何對齊。

flex-start:交叉軸的起點對齊。

flex-end:交叉軸的終點對齊。

center:交叉軸的中點對齊。

baseline: 專案的第一行文字的基線對齊。

stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。

.box

⑥align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。

flex-start:與交叉軸的起點對齊。

flex-end:與交叉軸的終點對齊。

center:與交叉軸的中點對齊。

space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。

space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch(預設值):軸線佔滿整個交叉軸。

實訓第二天 微信小程式環境搭建和骰子布局

pages 頁面路徑列表 pages index index pages classify classiry pages shopcart shopcart pages mine mine window 二 骰子布局 採用 flex 布局的元素,稱為 flex 容器 flex container 簡...

微信小程式 搭建小程式環境

1 store.js 儲存資訊 2 router.js 路由相關配置 頁面跳轉 3 request.js 網路相關配置 在util下建立store.js 如下 儲存資料,獲取uid等 module.exports else 獲取資料 getitem key,set name else 刪除資料 cl...

微信小程式搭建和開發相關指引

幾點 1 環境搭建 2 開發和除錯 3 發布 一 環境搭建 1 申請帳號 訪問 註冊和申請 具體參考頁面指引 介面效果 3 配置服務 配置服務位址等資訊 填寫相關的位址樣例 伺服器網域名稱 就是小程式跟後台做資料互動,認證可以訪問的url位址 走https 因為需要對互動資料做保密傳輸 所以需要證書...