web 小程序 ch3 小程序框架
生活随笔
收集整理的這篇文章主要介紹了
web 小程序 ch3 小程序框架
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 框架
- mina框架
- 視圖層如何將數據變化實時展示出來（setData）
- 運行與啟動機制
- 邏輯層
- 注冊程序
- app函數，之能一個，app.js里
- 后臺與前臺
- 函數
- 全局變量
- onPageNotFound（監聽器）
- getApp（獲得實例）
- 注冊頁面，每個頁面的js文件中（Page來進行注冊），每個頁面一個
- 自定義頁面變量
- 初始數據 data屬性，并必須可轉為json文件格式，渲染層可進行數據綁定
- 使用{{}}進行綁定
- 聲明周期回調函數
- 頁面事件處理函數
- 注意這里的參數
- onTabItemTap，點擊監聽
- 綁定事件（組件上添加事件綁定）
- route查看路徑地址
- setData
- 初始數據定義
- 使用數據
- 生命周期
- 應用生命周期
- 頁面生命周期
- 生命周期流程
- 頁面路由
- 頁面棧
- 獲取頁面棧
- 模塊化
- 文件作用域（該文件中），
- 全局調用時：app.js getApp()調用
- 模塊化，引用js文件（定義好函數，page中引用）
- API
- 視圖層
- wxml
- 數據綁定
- 簡單綁定{{}}
- 屬性綁定
- 控制屬性綁定
- 關鍵字綁定，不可以去掉雙花括號，會被認為為字符串
- 運算綁定
- 組合綁定，（對象或數組）
- ...符號將對象內容展開顯示
- 列表渲染
- 簡單列表 wx：for（綁定一個數組，依次渲染）
- item或index自定義（元素與下標的）變量名
- 嵌套列表（wx：for嵌套出現）
- 多節點列表（block標簽上）
- wx：key屬性（建議提高性能）（避免亂序）
- 條件渲染
- 簡單條件 wx：if=“{{condition}}”
- 多節點條件
- 多節點條件 與 hidden
- 模板 template，定義代碼片段，不同頁面調用
- 定義模板
- 使用模板，引用的必須有is屬性，并用data屬性將所需數據值傳入
- 事件
- 事件使用方式：綁定處理函數
- 添加同名函數
- 觸發事件
- 事件：分類：冒泡，非冒泡（向不向父節點傳遞）
- 冒泡事件一覽
- 事件的綁定與冒泡，bind/catch...... value是字符串，函數名（catch阻止冒泡）
- bindtap與catchtap
- 事件的捕獲
- 事件對象詳解：基礎，自定義，觸摸
- dataset只接受data-*的傳遞形式
- 強制小寫字母
- touches是一個數組
- 引用
- import（也能import 模板template）
- 不會引用第三方模板（引用引用）
- include：直接復制代碼
- wxss
- 尺寸單位：rpx
- 樣式導入 @import
- 常用屬性
- 內聯樣式
- style
- 支持動態綁定 {{color}}（盡量避免靜態）
- class：小程序使用class指定，可以同時接受兩個
- 選擇器：表
- 全局樣式與局部樣式（app.wxss）
- 基本布局方法 flex彈性盒
- 基本概念
- flex布局
- 容器container 項目item，允許嵌套
- 坐標軸：左上角為原點
- Flex屬性：容器屬性（布局方式-》排列與對齊），項目屬性（尺寸位置對齊方式）
- 居中
- 容器屬性
- flex-direction：主軸方向
- flex-warp：是否允許換行
- justify-content：對齊方式
- align-items：行對齊方式
- align-content 交叉軸上
- 項目屬性
- order：主軸排列順序
- flex-shrink：收縮因子
- flex-grow 擴張因子
- flex-basis 項目寬或高：替代width或height（看主軸方向）
- flex：簡寫
- align-self 行中交叉軸對齊，覆蓋align-items
框架
（倒數第二行第二個邏輯層換成視圖層）
mina框架
視圖層如何將數據變化實時展示出來（setData）
運行與啟動機制
邏輯層
注冊程序
app函數，之能一個，app.js里
后臺與前臺
函數
全局變量
onPageNotFound（監聽器）
getApp（獲得實例）
注冊頁面，每個頁面的js文件中（Page來進行注冊），每個頁面一個
自定義頁面變量
初始數據 data屬性，并必須可轉為json文件格式，渲染層可進行數據綁定
使用{{}}進行綁定
聲明周期回調函數
頁面事件處理函數
注意這里的參數
onTabItemTap，點擊監聽
綁定事件（組件上添加事件綁定）
route查看路徑地址
setData
初始數據定義
使用數據
生命周期
應用生命周期
頁面生命周期
生命周期流程
頁面路由
頁面棧
獲取頁面棧
模塊化
文件作用域（該文件中），
全局調用時：app.js getApp()調用
模塊化，引用js文件（定義好函數，page中引用）
API
視圖層
wxml
數據綁定
簡單綁定{{}}
屬性綁定
控制屬性綁定
關鍵字綁定，不可以去掉雙花括號，會被認為為字符串
運算綁定
組合綁定，（對象或數組）
…符號將對象內容展開顯示
列表渲染
簡單列表 wx：for（綁定一個數組，依次渲染）
item或index自定義（元素與下標的）變量名
嵌套列表（wx：for嵌套出現）
多節點列表（block標簽上）
wx：key屬性（建議提高性能）（避免亂序）
條件渲染
簡單條件 wx：if=“{{condition}}”
多節點條件
多節點條件 與 hidden
模板 template，定義代碼片段，不同頁面調用
定義模板
使用模板，引用的必須有is屬性，并用data屬性將所需數據值傳入
事件
事件使用方式：綁定處理函數
添加同名函數
觸發事件
事件：分類：冒泡，非冒泡（向不向父節點傳遞）
冒泡事件一覽
事件的綁定與冒泡，bind/catch… value是字符串，函數名（catch阻止冒泡）
bindtap與catchtap
事件的捕獲
事件對象詳解：基礎，自定義，觸摸
dataset只接受data-*的傳遞形式
強制小寫字母
touches是一個數組
引用
import（也能import 模板template）
不會引用第三方模板（引用引用）
include：直接復制代碼
wxss
尺寸單位：rpx
樣式導入 @import
常用屬性
內聯樣式
style
支持動態綁定 {{color}}（盡量避免靜態）
class：小程序使用class指定，可以同時接受兩個
選擇器：表
全局樣式與局部樣式（app.wxss）
基本布局方法 flex彈性盒
基本概念
flex布局
容器container 項目item，允許嵌套
坐標軸：左上角為原點
Flex屬性：容器屬性（布局方式-》排列與對齊），項目屬性（尺寸位置對齊方式）
居中
容器屬性
flex-direction：主軸方向
flex-warp：是否允許換行
justify-content：對齊方式
align-items：行對齊方式
align-content 交叉軸上
項目屬性
order：主軸排列順序
flex-shrink：收縮因子
flex-grow 擴張因子
flex-basis 項目寬或高：替代width或height（看主軸方向）
flex：簡寫
align-self 行中交叉軸對齊，覆蓋align-items
總結
以上是生活随笔為你收集整理的web 小程序 ch3 小程序框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： web 小程序 ch2 第一个小程序
- 下一篇： js-07-事件