一、wxml文件：類似于html，<標簽名 屬性=“屬性值”></標簽名>

屬性值可為： 類 class=“info”

　　　　　　 id id=“zzz”

　　　　　　 樣式 style=" "

　　　　　　 事件函數 bindtap="f0"

　　　　　　 自定義數據 data-user-name=“user”

　　　　　　 隱藏當前標簽內容 hidden=“true”

　　imge標簽：<image src="/images/xx.jpg"></image>

　　絕對路徑：/images/xx.jpg

　　相對路徑：../../images/xx.jpg

二、wss文件

頁面布局：

1、傳統方式：無法靈活應對頁面結構變化　

.container{ background-color： #eee; text-align: center; } text{ display: block; } image,text{ margin-bottom: 60px; }

2、彈性盒子布局：實現整體控制，靈活應對頁面結構變化

.container{ background-color： #eee; ? display: flex; flex-direction: column; justify-content: space-around; align-items: center; } 3、元素大小適配不同寬度屏幕： px:絕對單位 rpx響應式長度 4、navigator標簽 實現頁面跳轉 <view> <text>我</text><navigator url='/pages/weekly/weekly' style='display:inline;' open-type='navigate' hover-class='nav-hover' class='nav-default'>每周推薦</navigator><text>一部好片</text> </view> 默認頁面可返回 open-type='navigate' 頁面不可返回 open-type='redirect' 控制點擊時樣式 hover-class='nav-hover' 注意： 根據級聯樣式算法，樣式按照先后順序應用 ?5、tabBar底部導航欄 在app.json文件中配置tabBar底部導航欄 "tabBar":{ "list": [ { "text": "關于", "pagePath": "pages/about/about", "iconPath": "images/icons/about.jpg", "selectedIconPath": "images/icons/about-selected.jpg" }, { "text": "每周推薦", "pagePath":"pages/weekly/weekly", "iconPath":"images/icons/weekly.jpg", "selectedIconPath":"images/icons/weekly-selected.jpg" } ], "color":"#000", "selectedColor":"#00f" } 用list數組存放導航欄的樣式 注意：page配置不能在文件中寫任何注釋，pagePath等路徑不能有錯

?

轉載于:https://www.cnblogs.com/yangshuangs/p/8763012.html

總結

以上是生活随笔為你收集整理的微信小程序学习打卡（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。