了解小程序文件結構?

阿裏雲問答 2022-01-08 03:35:18 阅读数:575

了解 程序 序文 文件

了解小程序文件結構?




采納答案1:

本節以 IDE 內的 Todo App 模板小程序為例,介紹支付寶小程序的文件結構, 以及每種文件類型在小程序中的作用。 Todo App 是一個簡單的待辦事項管理小程序,實現了用戶登錄、新增自定義待 辦事項、劃除或恢複待辦事項的功能。 app.json app.json 是小程序的全局配置,用於配置小程序的頁面列錶、默認窗口標題、導 航欄背景色等。更多配置請參見 文檔配置。 app.acss 定義了全局樣式,作用於當前小程序的所有頁面。 上例中的 page 為框架支持的特殊選擇器,會匹配框架提供的頁面根節點容器。 app.js app.js 用於注册小程序應用,可配置小程序的生命周期,聲明全局數據,調用豐 富的 API,如以下獲取用戶授權及獲取用戶信息 API 等,更多 API 信息請參見 API 文檔。 可以看到,全局的邏輯代碼放在 App({})中,聲明了全局數據 todos 、 userInfo ,以及全局方法 getUserInfo()。 todos 全局數據中已經存儲了一些數據,即 Todo App 小程序中已有的一些待辦 事項。 全局方法 getUserInfo() 調用了授權 API my.getAuthCode,以及獲取用戶信息 API my.getAuthUserInfo ,並將獲取到的用戶信息存儲在 userInfo 中。 小程序頁面 此示例中有兩個頁面,Todo List 頁面和 Add Todo 頁面,都比特於 pages 目錄 下。小程序的所有頁面路徑必須在 app.json 中申明,路徑從項目根目錄開始且 不能包括後綴名,pages 的第一個頁面就是小程序的首頁。 每一個頁面 由同路徑下的四種類型文件組成,即 .json 後綴的配置文件,.axml 後綴的模板文件,.acss 後綴的樣式文件,.js 後綴的邏輯脚本文件。 todo List 頁面

todos.json 用於配置當前頁面的窗口錶現。此處定義了使用一個自定義組件 add-button ,指定它的組件名稱及對應的路徑。自定義組件的具體使用後面會講 述。 頁面配置文件不是必須的。當存在頁面配置文件時,各個頁面配置項會優先於 app.json 中 window 的同名配置項。當不存在頁面配置文件,則直接使用 app.json 中的默認配置。因此,Todo List 頁面的標題為 app.json 中指定的 defaultTitle ,即 Todo App。 todos.axml 為頁面結構模板文件。使用 ,, ,,, , 來搭建頁面結構以及通過 Mustache 語法兩對大括號({ {}})綁定 todos 數據。  綁定數據請參見此文檔  綁定事件請參見此文檔 todos.js 是頁面的邏輯脚本文件,小程序頁面的邏輯代碼必需包含在 Page({}) 中。在這個文件中可實現:  監聽並處理頁面的生命周期函數 onShow onLoad  獲取小程序實例以及其他頁面實例 getApp getCurrentPages  聲明並處理數據 data  響應頁面交互事件,調用 API 等  這裏需要注意的是 app.todos 是來自 app.js 中全局的變量定義 todos.acss 定義頁面局部樣式。指定 todos.axml 中不同元素的樣式,包括比特 置、背景顏色、字體、字體顏色等。 ACSS 語法參見 樣式 文檔。頁面的 .acss 文件不是必須的,但對於相同選擇器,頁面局部樣式會覆蓋 app.acss 全局樣 式。 Add Todo 頁面 add-todo.json 聲明自定義組件名稱和路徑。 add-todo.axml 為頁面結構模板文件。 此頁面的兩個核心功能為: 1. 使用 組件接收用戶輸入。 2. 是一個自定義組件,可將一些功能完整的代碼封裝為自定義組件,便於 在其他地方複用。 add-todo.js 為頁面邏輯代碼。add-todo.acss 同 todos.acss 用法一致,不再 贅述 內容來源:https://developer.aliyun.com/article/756818?spm=a2c6h.12873581.0.dArticle756818.26162b70Su1GZy&groupCode=tech_library


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