微信小程序的配置
第二單元 微信小程序配置
一、昨日知識點回顧
二、本單元知識點概述
(Ⅰ)指定教材
無
(Ⅱ)知識點概述
三、本單元教學目標
(Ⅰ)重點知識目標
1.小程序常用的內置UI組件 2.小程序常用的全局配置和頁面配置 3.小程序的生命周期函數(Ⅱ)能力目標
1.掌握小程序常用的內置UI組件 2.掌握小程序常用的全局配置和頁面配置 3.掌握小程序的生命周期函數四、本單元知識詳講
2.1. 小程序項目結構
2.1.1 項目結構簡介
小程序頁面項目結構簡介
注意:
-
對于小程序來說:app.js 和 app.json 文件是必須的
-
對于小程序的頁面來說:.js 和 .wxml 文件是必須的
小程序頁面和vue組件的對比
-
每個.vue組件,是由 template 模板結構、script 行為邏輯、 style 樣式3個部分組成的
-
每個小程序的頁面,是由 .wxml 結構、.js 邏輯、.json 配置、.wxss 樣式表 這4個文件組成的
2.2 小程序頁面
2.2.1 小程序頁面結構
小程序頁面中每個組成部分的作用
-
.wxml : 用來描述當前這個頁面的結構,同時提供了類似于Vue中指令的語法
-
.js : 用來定義當前頁面中用到的數據、交互邏輯和響應用戶的操作
-
.json : 用來定義當前頁面的個性化配置,例如,為每個頁面單獨配置頂部顏色、是否允許下拉刷新等
-
.wxss : 用來定義樣式來美化當前的頁面
創建自己的小程序頁面
在 pages 目錄上右鍵,選擇 “新建目錄”,并將目錄命名為 home
在新建的 home 目錄上右鍵,選擇 “新建page”,并將頁面命名為 home
注意:選擇“新建page”后,開發者工具會自動創建頁面相關的4個文件
設置小程序的默認首頁
打開 app.json 全局配置文件,找到 pages 節點。這個 pages 節點 是一個數組,存儲了項目中所有頁面的訪問路徑。其中,pages 數組中第一個頁面路徑,就是小程序項目的默認首頁
修改 pages 數組中路徑的順序,即可修改小程序的默認首頁
注意:在小程序頁面的.js文件當中,即使我們沒有任何的邏輯要寫,也要在js文件中寫一個頁面初始化的Page({})函數
// pages/index.js Page({})2.3. 小程序組件
-
小程序提供了豐富的基礎組件給開發者,開發者可以像搭積木一樣,組合各種組件拼合成自己的小程序。
-
小程序中的組件,就像HTML中的div,p標簽的作用一樣,用于搭建頁面的基礎結構。
-
注意:小程序中的所有組件標簽都必須閉合
2.3.1 View視圖容器組件用法
| hover-class | String | none | 指定按下去的樣式類。當 hover-class="none" 時,沒有點擊態效果 |
| hover-stop- propagation | Boolean | false | 指定是否阻止本節點的祖先節點出現點擊狀態 |
| hover-start-time | Number | 50 | 按住后多久出現點擊態,單位毫秒 |
| hover-stay-time | Number | 400 | 手指松開后點擊態保留時間,單位毫秒 |
使用:
<view hover-class="v1" hover-start-time="2000" hover-stay-time="2000">123456789</view> <view hover-class="v1">父親<view hover-class="v2" hover-stop-propagation>兒子</view> </view> .v1 {background: #f00; } .v2 {background: #ff0; }2.3.2 Button按鈕組件的用法
| size | String | default | 按鈕的大小 |
| type | String | default | 按鈕的樣式類型 |
| plain | Boolean | false | 按鈕是否鏤空,背景色透明 |
| disabled | Boolean | false | 是否禁用 |
| loading | Boolean | false | 名稱前是否帶 loading 圖標 |
使用:
<button type="default" size="mini">按鈕</button> <button type="primary" size="mini">按鈕</button> <button plain type="warn" size="mini">按鈕</button> <button size="mini">按鈕</button>2.3.3 Text文本組件
| selectable | Boolean | false | 文本是否可選,除了text組件之外,其它組件都無法長按選中(已廢棄) |
| user-select | Boolean | false | 文本是否可選,該屬性會使文本節點顯示為 inline-block |
| space | String | false | 顯示連續空格,可選值:ensp、emsp、nbsp |
| decode | Boolean | false | 是否解碼,可解析 ? < > & ' ? ? |
-
ensp:指的是一個空格的大小為一個英文字母的大小
-
emsp:指的是一個空格的大小為一個漢字的大小
-
nbsp:指的是一個空格的大小為當前元素的大小
使用:
<text user-select>123456</text> <view><text space="ensp">1 </text><text>1</text> </view> <view><text space="emsp">3 </text><text>4</text> </view> <view><text space="nbsp" style="font-size: 20px">5 </text><text>6</text> </view>2.3.4 Input文本輸入框組件
| value | String | 輸入框的初始內容 | |
| type | String | "text" | input 的類型 |
| password | Boolean | false | 是否是密碼類型 |
| placeholder | String | 輸入框為空時占位符 | |
| disabled | Boolean | false | 是否禁用 |
| maxlength | Number | 140 | 最大輸入長度,設置為 -1 時不限制最大長度 |
使用:
<input value="123" maxlength="10" />2.3.5 Image圖片組件
-
常見的屬性:
-
src :支持本地和網絡上的圖片
-
mode :指定圖片裁剪、縮放的模式
-
-
注意:image組件默認寬度300px、高度225px
-
更 多 屬 性 用 法 請 翻 閱 image 官 方 文 檔 :image | 微信開放文檔
使用:
<image src="https://wx.qlogo.cn/mmhead/Q3auHgzwzM5VYMZMkfp8a114fwUq6lF2iajBhiatxFeIdKwVIiaq8bprA/0"></image> <image></image> <image mode="aspectFill" src="/assets/生命周期圖示.png"></image> <image mode="aspectFit" src="/assets/生命周期圖示.png"></image>2.4. Wxss中常用的樣式問題
2.4.1 wxss
什么是wxss
-
wxss(WeiXin Style Sheets)是一套樣式語言,用來決定 WXML 的組件應該怎么顯示;
-
wxss 具有 CSS 大部分特性
-
wxss 對 CSS 進行了擴充以及修改,以適應微信小程序的開發
wxss擴展的特性
-
尺寸單位
-
樣式導入
wsxx和css的關系
wxss目前支持的選擇器
-
標簽選擇器
-
id選擇器
-
class選擇器
-
偽類選擇器
-
data-*屬性選擇器
-
:nth-of-type() 等常用的 css3 選擇器
-
注意:在小程序當中,所有的自定義屬性都是以data-開頭的
全局樣式與局部樣式
-
全局樣式:定義在 app.wxss 中的樣式為全局樣式,作用于每一個頁面
-
局部樣式:在 page 的 wxss 文件中定義的樣式為局部樣式,只作用在對應的頁面,并會覆蓋 app.wxss 中相同的選擇器
-
注意:當局部樣式的權重大于或等于全局樣式的權重時,才會覆蓋全局的樣式效果!
代碼:
<!-- 在小程序當中,所有的自定義屬性都是以`data-`開頭的 --> <view data-color="bg-color">123</view> [data-color="bg-color"] {background: #f00; }2.4.2 小程序布局單位
什么是rpx尺寸單位
-
rpx(responsive pixel): 是微信小程序獨有的、解決屏幕自適應的尺寸單位
-
可以根據屏幕寬度進行自適應。不論大小屏幕,規定屏幕寬為750rpx
-
通過rpx設置元素和字體的大小,小程序在不同尺寸的屏幕上,可以實現自動適配
2.4.3 rpx與px
rpx與px之間的換算
-
以 iPhone6 為例,iPhone6 的屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
-
在iPhone6上,如果要繪制寬100px,高20px的盒子,換算成rpx單位,寬高分別為?200rpx 和?40rpx
rpx和iphone6設計稿的關系
-
官方建議:開發微信小程序時,設計師可以用?iPhone6 作為視覺稿的標準。如果要根據iPhone6的設計稿, 繪制小程序頁面,可以直接把單位從 px 替換為 rpx 。例如,假設iPhone6設計稿上,要繪制一個 寬高為 200px?的盒子,換算為 rpx 為 200rpx
4.4 @import
-
使用 @import 語句可以導入外聯樣式表;
-
語法格式為:@import “wxss樣式表的路徑;”
-
注意:@import "路徑"后面必須要有分號
2.5. 配置文件
2.5.1 App.json配置文件
app.json配置文件的作用
-
小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置,它決定了頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等
在app.json配置文件中,最主要的配置節點是
-
pages 數組:配置小程序的頁面路徑
-
window 對象:用于設置小程序的狀態欄、導航條、標題、窗口背景色
-
tabBar 對象:配置小程序的tab欄效果
2.5.2 Pages數組的用法
-
pages 用于指定小程序由哪些頁面組成,每一項都對應一個頁面的 路徑+文件名信息
-
文件名不需要寫文件后綴,框架會自動去尋找對應位置的 .json、 .js、 .wxml 和 .wxss 四個文件進行處理
2.6. 小程序窗口
2.6.1 小程序窗口的組成部分
組成部分
window節點常用配置項
| navigationBarTitleText | String | 字符串 | 導航欄標題文字內容 |
| navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色,如 #000000 |
| navigationBarTextStyle | String | white | 導航欄標題顏色,僅支持 black / white |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉 loading 的樣式,僅支持 dark / light |
| enablePullDownRefresh | Boolean | false | 是否全局開啟下拉刷新。詳見 Page.onPullDownRefresh |
| onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離,單位為px。詳見 Page.onReachBottom |
2.6.2 設置導航欄標題文本
-
步驟:app.json -> window -> navigationBarTitleText
-
實現:app.json中
{"window":{"navigationBarTitleText": "積云"} }
2.6.3 設置導航欄標題樣式
-
步驟:app.json -> window -> navigationBarBackgroundColor
-
實現:
{"window":{"navigationBarBackgroundColor": "#2b4b6b","navigationBarTitleText": "積云","navigationBarTextStyle":"white", // 設置導航欄標題顏色,默認是black} }
2.7. 下拉
2.7.1 全局開啟下拉刷新功能
-
概念:下拉刷新是移動端的專有名詞,通過手指在屏幕上的下拉滑動操作,從而重新加載頁面數據的行為
-
步驟:app.json -> window -> 把 enablePullDownRefresh 的值設置為 true
-
實現:
{"window":{"navigationBarBackgroundColor": "#2b4b6b","navigationBarTitleText": "積云","navigationBarTextStyle":"white", "enablePullDownRefresh": true,} }
2.7.2 設置下拉刷新窗口的背景色
-
當全局開啟下拉刷新功能之后,默認的窗口背景為白色;如果自定義下拉刷新窗口背景色
-
設置步驟為 : app.json -> window -> 為 ?backgroundColor 指定 16進制顏色值 #eee
-
實現:app.json
{"window":{"navigationBarBackgroundColor": "#2b4b6b","navigationBarTitleText": "積云","navigationBarTextStyle":"white","enablePullDownRefresh": true,"backgroundColor": "#eee"} }
2.7.3 設置下拉loading的樣式
-
當全局開啟下拉刷新功能之后,默認窗口的loading樣式為白色,如果要更改loading樣式的效果
-
設置步驟為 app.json -> window -> 為 backgroundTextStyle 指定 dark 值
-
實現:app.json
{"window":{"backgroundTextStyle":"dark", // 默認是light"navigationBarBackgroundColor": "#2b4b6b","navigationBarTitleText": "積云","navigationBarTextStyle":"white","enablePullDownRefresh": true,"backgroundColor": "#eee"} }
2.7.4 設置上拉觸底的距離
-
概念:上拉觸底是移動端的專有名詞,通過手指在屏幕上的上拉滑動操作,從而加載更多數據的行為
-
步驟:app.json -> window -> 為 ?onReachBottomDistance?設置新的數值
-
注意:默認距離為50px,如果沒有特殊需求,建議使用默認值即可
-
實現:app.json
{"window":{"backgroundTextStyle":"dark", // 默認是light"navigationBarBackgroundColor": "#2b4b6b","navigationBarTitleText": "積云","navigationBarTextStyle":"white","enablePullDownRefresh": true,"backgroundColor": "#eee","onReachBottonDistance": 100} }
2.7.5 Tabbar的使用與配置
什么是tabBar
-
tabBar是移動端常見的頁面配置,用于實現多頁面的快速切換。小程序中常見的tabBar分為兩種
-
頂部tabBar
-
底部tabBar
-
-
注意事項
-
tabBar中,只能配置最少2個,最多5個簽頁
-
頂部tabBar不顯示icon圖標
-
tabBar屬性
| color | HexColor | 否 | tab 上的文字默認顏色,僅支持十六進制顏色 | ||
| selectedColor | HexColor | 否 | tab 上的文字選中時的顏色,僅支持十六進制顏色 | ||
| backgroundColor | HexColor | 否 | tab 的背景色,僅支持十六進制顏色 | ||
| borderStyle | string | 否 | black | tabbar 上邊框的顏色, 僅支持 black / white | |
| list | Array | 是 | tab 的列表,詳見 list 屬性說明,最少 2 個、最多 5 個 tab | ||
| position | string | 否 | bottom | tabBar 的位置,僅支持 bottom / top |
其中 list 接受一個數組,只能配置最少 2 個、最多 5 個 tab。tab 按數組的順序排序,每個項都是一個對象,其屬性值如下
| pagePath | string | 是 | 頁面路徑,必須在 pages 中先定義 |
| text | string | 是 | tab 上按鈕文字 |
| iconPath | string | 否 | 圖片路徑,icon 大小限制為 40kb,建議尺寸為 81px * 81px,不支持網絡圖片。 當 position 為 top 時,不顯示 icon。 |
| selectedIconPath | string | 否 | 選中時的圖片路徑,icon 大小限制為 40kb,建議尺寸為 81px * 81px,不支持網絡圖片。 當 position 為 top 時,不顯示 icon。 |
tabBar屬性與頁面的對應關系
配置tabBar案例
步驟:
拷貝資源
新建4個tabBar對應的頁面
配置tabBar選項
代碼實現:
通過app.json中的pages節點,快速新建4個tab頁面
"pages":["pages/home/home","pages/cate/cate","pages/cart/cart","pages/my/my" ]在app.json中,與window同級來配置tabBar屬性
"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首頁","iconPath": "/static/tab_icons/home.png","selectedIconPath": "/static/tab_icons/home-active.png"},{"pagePath": "pages/cate/cate","text": "分類","iconPath": "/static/tab_icons/cate.png","selectedIconPath": "/static/tab_icons/cate-active.png"},{"pagePath": "pages/cart/cart","text": "購物車","iconPath": "/static/tab_icons/cart.png","selectedIconPath": "/static/tab_icons/cart-active.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "/static/tab_icons/my.png","selectedIconPath": "/static/tab_icons/my-active.png"}],"selectedColor": "#C00","position": "top" // 頂部tabBar,默認是bottom }2.8. 頁面配置
2.8.1 頁面配置與局部配置的關系
-
小程序的頁面級別配置優先于全局配置
2.8.2 頁面配置屬性
頁面配置與全局配置的關系
-
小程序中,app.json 中的 window節點,可以全局配置小程序中每個頁面的窗口表現;
-
如果某些小程序頁面,想要擁有特殊的窗口表現,此時,“頁面級別的.json配置文件”就可以實現這種需求
-
頁面級別配置優先于全局配置生效
頁面配置可選的配置項列表
| navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色,如 #000000 |
| navigationBarTextStyle | String | white | 導航欄標題顏色,僅支持 black / white |
| navigationBarTitleText | String | 導航欄標題文字內容 | |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉loading的樣式,僅支持 dark / light |
注意:頁面的.json只能設置 window 相關的配置項,以決定本頁面的窗口表現。
2.9. 生命周期
2.9.1 小程序生命周期概念
-
生命周期(Life Cycle)是指一個對象從 創建?-> 運行 -> 銷毀 的整個階段,強調的是一個時間段
2.9.2 小程序生命周期的兩種類型
-
在小程序中,包含兩種類型的生命周期
-
應用生命周期:特指小程序從啟動 -> 運行 -> 銷毀的過程;
-
頁面生命周期:特指小程序中,每個頁面的加載 -> 渲染 -> 銷毀的過程;
2.9.3 小程序生命周期函數
什么是生命周期函數
-
生命周期函數:是由小程序框架提供的內置函數,會伴隨著生命周期,自動按次序執行
生命周期函數的作用
-
允許程序員在特定的生命周期時間點上,執行某些特定的操作。例如,頁面剛加載的時候, 在生命周期函數中自動發起數據請求,獲取當前頁面的數據
注意:生命周期強調的是時間段,生命周期函數強調的是時間點。
2.9.4 應用生命周期函數
-
app.js 是小程序執行的入口文件,在 app.js 中必須調用 App() 函數,且只能調用一次。其中,App() 函數是用 來注冊并執行小程序的。
-
App(Object) 函數接收一個Object參數,可以通過這個Object參數,指定小程序的生命周期函數。
小程序應用生命周期函數示例
App({// 小程序初始化完成時,執行此函數,可以做一些初始化的工作。onLaunch: function(options) {},// 小程序顯示到屏幕上的時候,執行此函數。onShow : function(options) {},// 小程序被最小化的時候,執行此函數。onHide : function() {} })應用生命周期函數表
| onLaunch | Function | 生命周期回調 - 監聽小程序初始化 | 小程序初始化完成時(全局只觸發一次) |
| onShow | Function | 生命周期回調 - 監聽小程序顯示 | 小程序啟動,或從后臺進入前臺顯示時 |
| onHide | Function | 生命周期回調 - 監聽小程序隱藏 | 小程序從前臺進入后臺時 |
頁面生命周期函數
-
每個小程序頁面,必須擁有自己的 .js 文件,且必須調用 Page() 函數,否則報錯。其中Page() 函數用來注冊小程序頁面。
-
Page(Object)?函數接收一個Object參數,可以通過這個Object參數,指定頁面的生命周期函數。
頁面生命周期函數表
| onLoad | Function | 生命周期回調 - 監聽頁面加載 |
| onShow | Function | 生命周期回調 - 監聽頁面顯示 |
| onReady | Function | 生命周期回調 - 監聽頁面初次渲染完成 |
| onHide | Function | 生命周期回調 - 監聽頁面隱藏 |
| onUnload | Function | 生命周期回調 - 監聽頁面卸載 |
小程序頁面生命周期示例:
Page({onLoad: function() { // 監聽頁面加載consolelog('load')},onReady: function() { // 監聽頁面初次渲染完成console.log('ready')},onShow: funciton() { // 監聽頁面顯示console.log('show')},onHide: function() { // 監聽頁面隱藏console.log('hide')},onUnload: function() { // 監聽頁面卸載console.log('unload')} })五、本單元知識總結
1.明白下單的流程六、作業安排
(Ⅰ)課后作業
( Ⅱ )預習作業
預習附錄:
?總結
- 上一篇: VCPKG使用入门
- 下一篇: 彻底弄懂TIME_WAIT 及 tcp_