小程序全局結構是什麼?

阿裏雲問答 2022-01-08 03:35:17 阅读数:484

程序 全局

小程序全局結構是什麼?




采納答案1:

概述 App() 代錶頂層應用,管理所有頁面和全局數據,以及提供生命周期回調等。它 也是一個構造方法,生成 App 實例。 一個小程序就是一個 App 實例。 每個小程序頂層一般包含三個文件。  app.json:應用配置  app.js:應用邏輯  app.acss:應用樣式(可選) 簡單示例 一個簡單的 app.json 代碼如下:

 "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "defaultTitle": "Demo" } }

這段代碼配置指定小程序包含兩個頁面(index 和 logs),以及應用窗口的默認 標題設置為 “Demo”。 一個簡單的 app.js 代碼如下:

 onLaunch(options) { // 第一次打開 }, onShow(options) { // 小程序啟動,或從後臺被重新打開 }, onHide() { // 小程序從前臺進入後臺 },

onError(msg) { // 小程序發生脚本錯誤或 API 調用出現報錯 console.log(msg); }, globalData: { // 全局數據 name: 'alipay', }, }); 26 app.json 全局配置 app.json 用於對小程序進行全局配置,設置頁面文件的路徑、窗口錶現、多 tab 等。 以下是一個基本配置示例:

 "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "defaultTitle": "Demo" } }

完整配置項如下: 屬性 類型 是否必填 描述 pages Array 是 設置頁面路徑 window Object 否 設置默認頁面的窗 口錶現 tabBar Object 否 設置底部 tabbar 的錶現 pages app.json 中的 pages 為數組屬性,數組中每一項都是字符串,用於指定小程序 的頁面。在小程序中新增或删除頁面,都需要對 pages 數組進行修改。 pages 數組的每一項代錶對應頁面的路徑信息,其中,第一項代錶小程序的首 頁。 頁面路徑不需要寫任何後綴,框架會自動去加載同名的 .json、.js、.axml、.acss 文件。舉例來說,如果開發目錄為:

│ ├──index│ │ ├── index.json│ │ ├── index.js│ │ ├── index.axml│ │ └── index.acss│ ├──logs│ │ ├── logs.json│ │ ├── logs.js│ │ └── logs.axml├── app.json├── app.js└── app.acss

app.json 中應當如下配置: { "pages":[ "pages/index/index", "pages/logs/logs" ] } window window 用於設置小程序的狀態欄、導航條、標題、窗口背景色等。 示例代碼: { "window":{ "defaultTitle": "支付寶接口功能演示" } } 屬性 類型 是否必 填 描述 最低版本 defaultTitle String 否 頁面默認標題 - pullRefresh String 否 是否允許下拉刷新。默認 NO, 備注:下拉刷新生效的 前提是 allowsBounceVertical 值 為 YES

allowsBounceV ertical String 否 是否允許向下拉拽。默認 YES, 支持 YES / NO

28 transparentTitl e String 否 導航欄透明設置。默認 none,支持 always 一直透 明 / auto 滑動自適應 / none 不透明

titlePenetrate String 否 是否允許導航欄點擊穿透。 默認 NO,支持 YES / NO

showTitleLoadi ng String 否 是否進入時顯示導航欄的 loading。默認 NO,支持 YES / NO

titleImage String 否 導航欄圖片地址 - titleBarColor HexCol or 否 導航欄背景色,十六進制顏 色值(0-255) - backgroundCol or HexCol or 否 頁面的背景色,十六進制顏 色值(0-255) - backgroundIm ageColor HexCol or 否 下拉露出顯示的背景圖底 色,十六進制顏色值(0- 255) - backgroundIm ageUrl String 否 下拉露出顯示的背景圖鏈接 - gestureBack String 否 iOS 用,是否支持手勢返 回。默認 NO,支持 YES / NO

enableScrollBa r Boolea n 否 Android 用,是否顯示 WebView 滾動條。默認 YES,支持 YES / NO

onReachBotto mDistance Number 否 頁面上拉觸底時觸發時距離 頁面底部的距離,單比特為 px。相關文檔頁面事件處理 函數 1.19.0 ,目前 iOS 在 page.json 下設 置無效,只能全 局設置。 29 tabBar 如果你的小程序是一個多 tab 應用(客戶端窗口的底部欄可以切換頁面),那麼 可以通過 tabBar 配置項指定 tab 欄的錶現,以及 tab 切換時顯示的對應頁 面。 注意:  通過頁面跳轉(my.navigateTo)或者頁面重定向(my.redirectTo)所到達的頁面,即使 它是定義在 tabBar 配置中的頁面,也不會顯示底部的 tab 欄。  tabBar 的第一個頁面必須是首頁。 tabBar 配置項有以下: 屬性 類型 是否必填 描述 textColor HexColor 否 文字顏色 selectedColor HexColor 否 選中文字顏色 backgroundColor HexColor 否 背景色 items Array 是 每個 tab 配置 每個 item 配置: 屬性 類型 是否必填 描述 pagePath String 是 設置頁面路徑 name String 是 名稱 icon String 否 平常圖標路徑 activeIcon String 否 高亮圖標路徑 icon 圖標推薦大小為 60×60 px 大小,系統會對傳入的非推薦尺寸的圖片進行非 等比拉伸或縮放。 示例代碼:

 "tabBar": {30 "textColor": "#dddddd", "selectedColor": "#49a9ee", "backgroundColor": "#ffffff", "items": [ { "pagePath": "pages/index/index", "name": "首頁" }, { "pagePath": "pages/logs/logs", "name": "日志" } ] } }

app.acss 全局樣式 app.acss 作為全局樣式,作用於當前小程序的所有頁面。 ACSS 是一套樣式語言,用於描述 AXML 的組件樣式,决定 AXML 的組件的顯 示效果。 為適應廣大前端開發者,ACSS 和 CSS 規則完全一致,100% 可以用。同時為更 適合開發小程序,對 CSS 進行了擴充。 ACSS 支持 px,rpx,vh,vw 等單比特。 rpx rpx(responsive pixel)可以根據屏幕寬度進行自適應,規定屏幕寬為 750rpx。以 Apple 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 樣式導入 使用 @import 語句可以導入外聯樣式錶,@import 後需要加上外聯樣式錶相對 路徑,用;錶示結束。 示例代碼:

.sm-button { padding: 5px; }/** app.acss **/@import "./button.acss";.md-button { padding: 15px; }

導入路徑支持從 node_modules 目錄載入第三方模塊,例如 page.acss: @import "./button.acss"; /相對路徑/ 32 @import "/button.acss"; /項目絕對路徑/ @import "third-party/page.acss"; /第三方 npm 包路徑/ 內聯樣式 組件上支持使用 style、class 屬性來控制樣式。 style 屬性 用於接收動態樣式,樣式在運行時會進行解析。行內樣式不支持!important 優先 級規則。 class 屬性 用於接收靜態樣式,屬性值是樣式規則中類選擇器名(樣式類名)的集合,樣式類 名不需要帶上.,多個類名間以空格分隔。請靜態樣式寫進 class 中,避免將靜態 樣式寫進 style 中,以免影響渲染速度。 選擇器 同 CSS3 保持一致。 注意:  .a-, .am- 開頭的類選擇器為系統組件占用,不可使用。  不支持屬性選擇器。 全局樣式與局部樣式  app.acss 中的樣式為全局樣式,作用於每一個頁面。  頁面文件夾內的 .acss 文件中定義的樣式為局部樣式,只作用在對應的頁面,並會覆蓋 app.acss 中相同的選擇器。 本地資源引用 ACSS 文件裏的本地資源引用請使用絕對路徑的方式,不支持相對路徑引用。例 如: /* 支持 / background-image: url('/images/ant.png'); / 不支持 */ background-image: url('./images/ant.png'); 33 app.js 注册小程序 App(object: Object) App() 用於注册小程序,接受一個 Object 作為屬性,用來配置小程序的生命周 期等。 App() 必須在 app.js 中調用,必須調用且只能調用一次。 object 屬性說明 屬性 類型 描述 觸發時機 onLaunch Function 生命周期回調:監 聽小程序初始化 當小程序初始化完 成時觸發,全局只 觸發一次 onShow Function 生命周期回調:監 聽小程序顯示 當小程序啟動,或 從後臺進入前臺顯 示時觸發 onHide Function 生命周期回調:監 聽小程序隱藏 當當前頁面被隱藏 時觸發,例如跳 轉、按下設備 Home 鍵離開 onError Function 監聽小程序錯誤 當小程序發生 js 錯誤時觸發 onShareAppMessage Function 全局分享配置 - 前臺/後臺定義:  小程序用戶點擊右上角關閉,或者按下設備 Home 鍵離開支付寶時,小程序並不會直接銷 毀,而是進入後臺。  當用戶再次進入支付寶或再次打開小程序時,小程序會從後臺進入前臺。  只有當小程序進入後臺 5 分鐘後,或占用系統資源過高,才會被真正銷毀。 onLaunch(object: Object) 及 onShow(object: Object) object 屬性說明: 屬性 類型 描述 34 query Object 當前小程序的 query,從啟動參數的 query 字段解析而來 scene number 啟動小程序的 場景值 path string 當前小程序的頁面地址,從啟動參數 page 字段解析而來,page 忽略時默認為首頁 referrerInfo Object 來源信息 比如,啟動小程序的 schema url 如下: alipays://platformapi/startapp?appId=1999&query=number%3D1&page=x%2Fy%2 Fz  小程序首次啟動時,onLaunch 方法可獲取 query、path 屬性值。  小程序在後臺被用 schema 打開,也可從 onShow 方法中獲取 query、path 屬性值。 App({ onLaunch(options) { // 第一次打開 console.log(options.query); // {number:1} console.log(options.path); // x/y/z }, onShow(options) { // 從後臺被 schema 重新打開 console.log(options.query); // {number:1} console.log(options.path); // x/y/z }, }); referrerInfo 子屬性說明: 屬性 類型 描述 最低版本 appId string 來源小程序 - sourceServiceId string 來源插件,當處於插件運行模式時可見 1.11.0 35 extraData Object 來源小程序傳過來的數據。 - 注意:  不要在 onShow 中進行 redirectTo 或 navigateTo 等操作頁面棧的行為。  不要在 onLaunch 裏調用 getCurrentPages(),因為此時 page 還未生成。 onHide() 小程序從前臺進入後臺時觸發 onHide() 。 示例代碼: App({ onHide() { // 進入後臺時 console.log('app hide'); }, }); onError(error: String) 小程序發生脚本錯誤時觸發。 示例代碼: App({ onError(error) { // 小程序執行出錯時 console.log(error); }, }); onShareAppMessage(object: Object) 全局分享配置。當頁面未設置 page.onShareAppMessage 時,調用分享會執行 全局的分享設置,具體見 分享 。 globalData 全局數據 App() 中可以設置全局數據 globalData。 示例代碼: // app.js App({ globalData: 1 }); getApp 方法 小程序提供了全局的 getApp() 方法,可獲取當前小程序實例,一般用於在子頁 面中獲取頂層應用。 var app = getApp(); console.log(app.globalData); // 獲取 globalData 使用過程中,請注意以下幾點:  App() 函數中不可以調用 getApp(),可使用 this 可以獲取當前小程序實例。  通過 getApp() 獲取實例後,請勿私自調用生命周期回調函數。  請區分全局變量及頁面局部變量,比如: // app.js App({ //定義全局變量 globalData,在整個 App 中有效 globalData: 1 }); // a.js // 定義頁面局部變量 localValue,只在 a.js 有效 var localValue = 'a'; // 獲取 app 實例 var app = getApp(); // 拿到全局數據,並改變它 app.globalData++; // b.js // 定義頁面局部變量 localValue,只在 b.js 有效 var localValue = 'b'; // 如果 a.js 先運行,globalData 會返回 2 console.log(getApp().globalData); a.js 和 b.js 兩個文件中都聲明了變量 localValue,但並不會互相影響,因為各 個文件聲明的局部變量和函數只在當前文件下有效。

內容來源:https://developer.aliyun.com/article/756818?spm=a2c6h.12873581.0.dArticle756818.26162b70Su1GZy&groupCode=tech_library


版权声明:本文为[阿裏雲問答]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201080335174337.html