工業(yè)App開(kāi)發(fā)與應(yīng)用 課件 2-5-移動(dòng)端頁(yè)面設(shè)計(jì)

移動(dòng)端頁(yè)面設(shè)計(jì)目錄一、移動(dòng)端布局二、移動(dòng)端卡片模板三、移動(dòng)端頁(yè)面設(shè)計(jì)器一、移動(dòng)端布局1.靜態(tài)布局網(wǎng)頁(yè)最外層容器有固定的大小，所有的內(nèi)容以該容器為標(biāo)準(zhǔn)，超出寬高的部分用滾動(dòng)條來(lái)實(shí)現(xiàn)滾動(dòng)查閱一般用于PC端，用于移動(dòng)端不適合2.流式布局也叫百分比布局或自適應(yīng)布局240*400360*640元素的寬度按照屏幕分辨率自動(dòng)進(jìn)行適配調(diào)整%（百分比）px（像素）流式布局優(yōu)點(diǎn)解決類(lèi)似設(shè)備不同分辨率之間的兼容01流式布局在相對(duì)其原始設(shè)計(jì)而言過(guò)小或過(guò)大的屏幕上顯示可能不協(xié)調(diào)可通過(guò)響應(yīng)式布局和彈性布局來(lái)解決一、移動(dòng)端布局01-02-YonBuilder平臺(tái)的移動(dòng)端頁(yè)面設(shè)計(jì)器，對(duì)常用布局做了易用性封裝其組件可以設(shè)計(jì)絕大部分CSS樣式移動(dòng)端

組件樣式三個(gè)單位px（像素）是固定尺寸01根元素的字體大小%（百分比）是指屏幕比例02rem（自適應(yīng)）全稱(chēng)是fontsizeoftherootelement03二、移動(dòng)端卡片模板1.移動(dòng)端頁(yè)面模板目前支持單卡（表）和一主多子和空頁(yè)面3種頁(yè)面模板2.移動(dòng)端卡片模板有純文字卡片、圖文卡片、小圖卡片三種排版可選由純文字組成純文字卡片圖文混排，用于有圖片內(nèi)容的單據(jù)圖文卡片比圖文卡片更簡(jiǎn)潔，常用于信息較少的單據(jù)或子表卡片小圖片卡默認(rèn)按元數(shù)據(jù)實(shí)體的字段順序依次匹配卡片字段綁定只匹配圖片類(lèi)型的字段圖片位置可匹配除圖片和附件之外所有的字段非圖片位置三、移動(dòng)端頁(yè)面設(shè)計(jì)器三、移動(dòng)端頁(yè)面設(shè)計(jì)器添加設(shè)置1.移動(dòng)端組件庫(kù)設(shè)計(jì)頁(yè)面布局的容器類(lèi)組件布局容器綁定實(shí)體數(shù)據(jù)的容器類(lèi)組件數(shù)據(jù)容器渲染頁(yè)面內(nèi)容顯示的組件基礎(chǔ)控件提供給用戶(hù)交互操作并提交數(shù)據(jù)的組件表單控件常用頁(yè)面交互及調(diào)用移動(dòng)設(shè)備能力的組件功能組件單據(jù)流程相關(guān)操作組件業(yè)務(wù)組件從外部獲取并顯示數(shù)據(jù)的組件接口組件2.移動(dòng)端樣式設(shè)計(jì)設(shè)置組件的整體寬度和高度寬高設(shè)置先在畫(huà)布中選擇組件，在右側(cè)屬性樣式頁(yè)進(jìn)行調(diào)整支持rem(自適應(yīng))px(固定尺寸)%(屏幕比例)三種單位設(shè)置組件及子組件文本的大小、顏色、字符形狀等字符設(shè)置設(shè)置組件的邊框和圓角邊框設(shè)置設(shè)置組件的內(nèi)外邊距邊距設(shè)置流式布局、標(biāo)簽和圖片三個(gè)組件支持陰影設(shè)置陰影設(shè)置設(shè)置組件的背景，支持顏色或URL圖片鏈接背景設(shè)置3.事件觸發(fā)按鈕有單擊事件動(dòng)作頁(yè)設(shè)置組件的事件觸發(fā)腳本或命令常用組件事件文本框有獲取焦點(diǎn)、失去焦點(diǎn)、值改變事件頁(yè)面有頁(yè)面初始化事件等前端函數(shù)：執(zhí)行前端腳本待選操作后端函數(shù)：執(zhí)行后端腳本執(zhí)行命令：執(zhí)行系統(tǒng)預(yù)置的命令前端動(dòng)作：執(zhí)行常用的前端動(dòng)作3.預(yù)覽調(diào)試總結(jié)移動(dòng)端頁(yè)面設(shè)計(jì)移動(dòng)端布局移動(dòng)端卡片模板移動(dòng)端頁(yè)面設(shè)計(jì)器組件