當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序的配置

發布時間：2023/12/31 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序的配置小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第二單元微信小程序配置

一、昨日知識點回顧

二、本單元知識點概述

（Ⅰ）指定教材

無

（Ⅱ）知識點概述

三、本單元教學目標

（Ⅰ）重點知識目標

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 圖標

使用：

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：指的是一個空格的大小為當前元素的大小

使用：

2.3.4 Input文本輸入框組件

屬性名類型默認值說明

value	String		輸入框的初始內容
type	String	"text"	input 的類型
password	Boolean	false	是否是密碼類型
placeholder	String		輸入框為空時占位符
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大輸入長度，設置為 -1 時不限制最大長度

使用：

2.3.5 Image圖片組件

常見的屬性：
- src ：支持本地和網絡上的圖片
- mode ：指定圖片裁剪、縮放的模式
注意：image組件默認寬度300px、高度225px
更多屬性用法請翻閱 image 官方文檔：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 中相同的選擇器
注意：當局部樣式的權重大于或等于全局樣式的權重時，才會覆蓋全局的樣式效果！

代碼：

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

六、作業安排

（Ⅰ）課后作業

（ Ⅱ ）預習作業

預習附錄：

總結

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

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

编程问答

微信小程序的配置

第二單元 微信小程序配置

一、昨日知識點回顧

二、本單元知識點概述

（Ⅰ）指定教材

（Ⅱ）知識點概述

三、本單元教學目標

（Ⅰ）重點知識目標

（Ⅱ）能力目標

四、本單元知識詳講

2.1. 小程序項目結構

2.2 小程序頁面

2.3. 小程序組件

2.4. Wxss中常用的樣式問題

2.5. 配置文件

2.6. 小程序窗口

2.7. 下拉

2.8. 頁面配置

2.8.1 頁面配置與局部配置的關系

2.9. 生命周期

五、本單元知識總結

六、作業安排

（Ⅰ）課后作業

（ Ⅱ ）預習作業

總結

第二單元微信小程序配置