柚子快報(bào)邀請碼778899分享:微信小程序(四~六)
柚子快報(bào)邀請碼778899分享:微信小程序(四~六)
第四章?頁面組件
一、組件定義及屬性
組件是頁面視圖層(WXML)的基本組成單元,組件組合可以構(gòu)建功能強(qiáng)大的頁面結(jié)構(gòu)。
id:組件的唯一表示
class:組件的樣式類,對應(yīng)WXSS中定義的樣式、
style:組件的內(nèi)聯(lián)樣式,可以動態(tài)的設(shè)置內(nèi)聯(lián)樣式
hidden:組件是否顯示,所有組件默認(rèn)顯示。
data-*? :自定義屬性,組件觸發(fā)事件,會發(fā)送給事件處理函數(shù)。
bind*/catch*? :組件的事件,綁定邏輯層相關(guān)的處理函數(shù)。
二、容器視圖組件
容器視圖組件是能夠容納其他的組件,是構(gòu)建小程序頁面布局的基礎(chǔ)組件。主要包括:
view 、scroll -view 和swiper組件
view組件是塊級組件 相當(dāng)于HTML中的div
scroll-view組件
設(shè)置scroll-view 組件的相關(guān)屬性可以實(shí)現(xiàn)滾動視圖的功能。
Swoper組件
swiper組件可以實(shí)現(xiàn)輪播圖,圖片瀏覽,滑動頁面等效果。
一個完整的swiper組件 由
三、基礎(chǔ)組件
基礎(chǔ)內(nèi)容組件包括 icon、text 、和progress ,主要用于視圖頁面中展示圖標(biāo)、文本和進(jìn)度條等信息。?
icon組件是圖標(biāo)組件,通常用于表示一種狀態(tài)。
text組件用于展示內(nèi)容、支持長按選中、支持轉(zhuǎn)義字符 “ \ ”?,屬于行內(nèi)元素
progress組件用于顯示進(jìn)度狀態(tài)、屬于塊級元素。
四、表單組件
表單組件主要功能是收集用戶信息,并將這些信息傳遞給后臺服務(wù)器,實(shí)現(xiàn)小程序與用戶之間的溝通。?
button組件用來實(shí)現(xiàn)用戶與應(yīng)用之間的交互,同時按鈕的顏色起引導(dǎo)作用。
當(dāng)被
radio?:單選框組件? 單選框用來從一組選項(xiàng)中選取一個按鈕。?
在小程序中有
checkbox:復(fù)選框組件? 用于從一組選項(xiàng)中選取多個選項(xiàng)
由
Switch:Switch組件類似于開關(guān)選擇器
Slider:slider組件為滑塊選擇器?
picker?
picker滾動選擇器 用戶點(diǎn)擊picker組件時,彈出選擇器選擇
picker組件目前支持5種選擇器分別是
1、selector(普通選擇器)
2、multiSelector(多列選擇器)
3、time(時間選擇器)
4、dete(日期選擇器)
5、region(省市選擇器)
textarer:textarer 組件為多行輸入框組件。
label:標(biāo)簽組件,用于提升表單的可用性
可以綁定的控件有:?
form :form為表單組件,用來實(shí)現(xiàn)將組件內(nèi)的用戶信息進(jìn)行提交。
image?
image 組件為圖像組件, 與HTML中的< img/ > 類似,
image組件中的mode 屬性有13 種模式, 其中縮放模式有4 種, 裁剪模式有9 種
1.縮放模式 (1)scaleToFill 不保持縱橫比縮放圖片, 使圖片的寬高完全拉伸至填滿image 元素。
(2)aspectFit 保持縱橫比縮放圖片, 使圖片的長邊能完全顯示出來。 也就是說, 可以將圖片完整地顯示出來。
(3)aspectFill ? 保持縱橫比縮放圖片, 只保證圖片的短邊能完全顯示出來。 也就是說,圖片通常只在水平或垂直方向是完整的, 在另一個方向?qū)l(fā)生截取。
(4)widthFix 寬度不變, 高度自動變化, 保持原圖寬高比不變
audio:audio組件用來實(shí)現(xiàn)音樂播放,暫停等。屬性表如下:
video
video組件用來實(shí)現(xiàn)組件的播放,暫停等
?map: map組件用于在頁面中顯示地圖或者路徑,常用于LBS(基于位置服務(wù))目前具備繪制圖標(biāo),路線,半徑等能力。
canvas
cavas組件用來繪制圖形,相當(dāng)于一塊無色透明的普通畫布。
canvas組件本身沒有繪制圖的能力,僅僅是圖形容器,通過API實(shí)現(xiàn)繪圖功能。
實(shí)現(xiàn)繪圖需要三步:
(1)創(chuàng)建一個canvas繪圖上下文。
var context=wx.createCanvasContext('myCanvas')
(2)使用canvas繪圖上下文進(jìn)行繪圖描述。
context.setFillStyle('green') //設(shè)置繪圖上下文的填充色為綠色
context.fillRect(10,10,200,100) //方法畫出一個矩形,填充色為設(shè)置的綠色
(3)畫圖
context.draw
?第五章 即速應(yīng)用
一、特點(diǎn)
1、即速應(yīng)用的功能特點(diǎn)主要體現(xiàn)在以下幾個方面:
開發(fā)流程簡單, 零門檻制作 使用即速應(yīng)用來開發(fā)微信小程序的過程非常簡單, 無須儲備相關(guān)代碼知識, 沒有開發(fā)經(jīng)驗(yàn)的人也可以輕松上手。
(1) 登錄即速應(yīng)用的官方網(wǎng)站(www.jisuapp.cn), 進(jìn)入制作界面, 從眾多行業(yè)模板中選擇一個合適的模板。 ? ? ??
(2) 在模板的基礎(chǔ)上進(jìn)行簡單編輯和個性化制作。
(3) 制作完成后, 將代碼一鍵打包并下載。
(4) 將代碼上傳至微信開發(fā)者工具。
(5) 上傳成功后, 等待審核通過即可。
2.行業(yè)模板多樣, 種類齊全
3、豐富的功能組件和強(qiáng)大的管理后臺
即速應(yīng)用的功能組件和管理后臺非常實(shí)用, 可以根據(jù)實(shí)際情況解決商家的不同需求。
二、界面介紹
即速應(yīng)用的主界面主要分為4個區(qū)域,分別為
菜單欄:?菜單欄中的“風(fēng)格” 選項(xiàng)用于設(shè)置小程序頁面的風(fēng)格顏色, “管理” 選項(xiàng)用于進(jìn)入后臺管理頁面, “幫助” 選項(xiàng)用于提示幫助功能, “客服” 選項(xiàng)用于進(jìn)入客服界面, “歷史”選項(xiàng)用來恢復(fù)前項(xiàng)操作, “預(yù)覽” 選項(xiàng)用在PC端預(yù)覽制作效果, “保存” 選項(xiàng)用于保存已制作的內(nèi)容, “生成” 選項(xiàng)用于實(shí)現(xiàn)小程序打包上線設(shè)置。
工具欄:工具欄包括“頁面管理” “組件庫”?2 個選項(xiàng)卡,
“頁面管理”?實(shí)現(xiàn)添加頁面和添加分組以及對某一頁面進(jìn)行改名、收藏、復(fù)制、刪除操作。 “組件庫” 有9 個基礎(chǔ)組件、7 個布局組件、18 個高級組件和2 個其他組件。
編輯區(qū):編輯區(qū)是用來制作小程序頁面的主要區(qū)域,
通過拖拽組件實(shí)現(xiàn)頁面制作, 右邊的“前進(jìn)” “后退” 選項(xiàng)可以進(jìn)行恢復(fù)操作, “模板” 選項(xiàng)可以用來選擇模板, “元素” 選項(xiàng)可以用來顯示頁面中的組件及其層次關(guān)系, “數(shù)據(jù)” 選項(xiàng)可以用來進(jìn)行頁面數(shù)據(jù)管理, “模塊” 選項(xiàng)可以用來選擇模塊
屬性面板:屬性面板用來設(shè)置選定組件的屬性及樣式, 包括“組件” 和“組件樣式” 兩個選項(xiàng)卡。?“
組件” 選項(xiàng)卡用來設(shè)置組件內(nèi)容及點(diǎn)擊事件; “組件樣式” 選項(xiàng)卡用來設(shè)置組件的樣式,不同組件有不同的樣式需要設(shè)置。
三、即速應(yīng)用組件
即速應(yīng)用提供了大量的組件供用戶快速布局頁面, 包括7 個布局組件、9 個基本組件、18 個高級組件和2 個其他組件。
布局組件
布局組件用于設(shè)計(jì)頁面布局, 主要包括雙欄、面板、自由面板、頂部導(dǎo)航、底部導(dǎo)航、分割線和動態(tài)分類。
基本組件?
基本組件是小程序頁面常用的組件,包括文本、圖片、按鈕、標(biāo)題、輪播、分類、圖片、列表、圖文集和視頻。
高級組件
高級組件通常需要后臺數(shù)據(jù),通過設(shè)置后臺數(shù)據(jù)來實(shí)現(xiàn)數(shù)據(jù)后臺化,讓小程序的數(shù)據(jù)隨時更新,及時修改 。分為8個組件
1.動態(tài)列表組件:動態(tài)列表組件是容納基礎(chǔ)組件來展示后臺數(shù)據(jù)的容器,通過添加基礎(chǔ)組件來展示對應(yīng)的后臺數(shù)據(jù)。
2.個人中心組件:個人中心組件顯示個人相關(guān)信息,包括圖像,昵稱,我的訂單,收貨地址,購物車等
3.動態(tài)表單組件:動態(tài)表單組件相當(dāng)于HTML中的
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明,如有侵權(quán),聯(lián)系刪除。