第二單元 微信小程序配置

一、昨日知識點回顧

---

二、本單元知識點概述

（Ⅰ）指定教材

無

（Ⅱ）知識點概述

---

三、本單元教學目標

（Ⅰ）重點知識目標

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物理像素

設備rpx換算px(屏幕寬度/750)px換算rpx(750/屏幕寬度)

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.明白下單的流程

---

六、作業安排

（Ⅰ）課后作業

（ Ⅱ ）預習作業

預習附錄：

?

總結

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

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