柚子快報(bào)邀請(qǐng)碼778899分享：微信小程序（四~六）

http://yzkb.51969.com/

第四章?頁(yè)面組件

一、組件定義及屬性

組件是頁(yè)面視圖層（WXML）的基本組成單元，組件組合可以構(gòu)建功能強(qiáng)大的頁(yè)面結(jié)構(gòu)。

id：組件的唯一表示

class：組件的樣式類，對(duì)應(yīng)WXSS中定義的樣式、

style：組件的內(nèi)聯(lián)樣式，可以動(dòng)態(tài)的設(shè)置內(nèi)聯(lián)樣式

hidden：組件是否顯示，所有組件默認(rèn)顯示。

data-*? ：自定義屬性，組件觸發(fā)事件，會(huì)發(fā)送給事件處理函數(shù)。

bind*/catch*? ：組件的事件，綁定邏輯層相關(guān)的處理函數(shù)。

二、容器視圖組件

容器視圖組件是能夠容納其他的組件，是構(gòu)建小程序頁(yè)面布局的基礎(chǔ)組件。主要包括：

view 、scroll -view 和swiper組件

view組件是塊級(jí)組件 相當(dāng)于HTML中的div

scroll-view組件

設(shè)置scroll-view 組件的相關(guān)屬性可以實(shí)現(xiàn)滾動(dòng)視圖的功能。

Swoper組件

swiper組件可以實(shí)現(xiàn)輪播圖，圖片瀏覽，滑動(dòng)頁(yè)面等效果。

一個(gè)完整的swiper組件 由和兩個(gè)標(biāo)簽組成，不能單獨(dú)使用?

三、基礎(chǔ)組件

基礎(chǔ)內(nèi)容組件包括 icon、text 、和progress ，主要用于視圖頁(yè)面中展示圖標(biāo)、文本和進(jìn)度條等信息。?

icon組件是圖標(biāo)組件，通常用于表示一種狀態(tài)。

text組件用于展示內(nèi)容、支持長(zhǎng)按選中、支持轉(zhuǎn)義字符 “ \ ”?，屬于行內(nèi)元素

progress組件用于顯示進(jìn)度狀態(tài)、屬于塊級(jí)元素。

四、表單組件

表單組件主要功能是收集用戶信息，并將這些信息傳遞給后臺(tái)服務(wù)器，實(shí)現(xiàn)小程序與用戶之間的溝通。?

button組件用來(lái)實(shí)現(xiàn)用戶與應(yīng)用之間的交互，同時(shí)按鈕的顏色起引導(dǎo)作用。

當(dāng)被包含時(shí)可以通過(guò)設(shè)置 form-type 屬性觸發(fā)表單對(duì)應(yīng)的事件

radio?：?jiǎn)芜x框組件? 單選框用來(lái)從一組選項(xiàng)中選取一個(gè)按鈕。?

在小程序中有（單項(xiàng)選擇器）和（單選項(xiàng)目）兩個(gè)組件組合而成，redio是互斥的。

checkbox：復(fù)選框組件? 用于從一組選項(xiàng)中選取多個(gè)選項(xiàng)

由（多項(xiàng)選擇器）（多選項(xiàng)目）兩個(gè)組件組成

Switch：Switch組件類似于開關(guān)選擇器

Slider：slider組件為滑塊選擇器?

picker?

picker滾動(dòng)選擇器 用戶點(diǎn)擊picker組件時(shí)，彈出選擇器選擇

picker組件目前支持5種選擇器分別是

1、selector（普通選擇器）

2、multiSelector（多列選擇器）

3、time（時(shí)間選擇器）

4、dete（日期選擇器）

5、region（省市選擇器）

textarer：textarer 組件為多行輸入框組件。

label：標(biāo)簽組件，用于提升表單的可用性

可以綁定的控件有：?

form ：form為表單組件，用來(lái)實(shí)現(xiàn)將組件內(nèi)的用戶信息進(jìn)行提交。

image?

image 組件為圖像組件, 與HTML中的< img/ > 類似,

image組件中的mode 屬性有１３ 種模式, 其中縮放模式有４ 種, 裁剪模式有９ 種

1.縮放模式 （1）scaleToFill 不保持縱橫比縮放圖片, 使圖片的寬高完全拉伸至填滿ｉｍａｇｅ 元素。

（2）aspectFit 保持縱橫比縮放圖片, 使圖片的長(zhǎng)邊能完全顯示出來(lái)。 也就是說(shuō), 可以將圖片完整地顯示出來(lái)。

（3）aspectFill ? 保持縱橫比縮放圖片, 只保證圖片的短邊能完全顯示出來(lái)。 也就是說(shuō),圖片通常只在水平或垂直方向是完整的, 在另一個(gè)方向?qū)?huì)發(fā)生截取。

（4）widthFix 寬度不變, 高度自動(dòng)變化, 保持原圖寬高比不變

audio：audio組件用來(lái)實(shí)現(xiàn)音樂播放，暫停等。屬性表如下：

video

video組件用來(lái)實(shí)現(xiàn)組件的播放，暫停等

?map： map組件用于在頁(yè)面中顯示地圖或者路徑，常用于LBS（基于位置服務(wù)）目前具備繪制圖標(biāo)，路線，半徑等能力。

canvas

cavas組件用來(lái)繪制圖形，相當(dāng)于一塊無(wú)色透明的普通畫布。

canvas組件本身沒有繪制圖的能力，僅僅是圖形容器，通過(guò)API實(shí)現(xiàn)繪圖功能。

實(shí)現(xiàn)繪圖需要三步：

（1）創(chuàng)建一個(gè)canvas繪圖上下文。

var context=wx.createCanvasContext('myCanvas')

（2）使用canvas繪圖上下文進(jìn)行繪圖描述。

context.setFillStyle('green') //設(shè)置繪圖上下文的填充色為綠色

context.fillRect(10,10,200,100) //方法畫出一個(gè)矩形，填充色為設(shè)置的綠色

（3）畫圖

context.draw

?第五章 即速應(yīng)用

一、特點(diǎn)

1、即速應(yīng)用的功能特點(diǎn)主要體現(xiàn)在以下幾個(gè)方面:

開發(fā)流程簡(jiǎn)單, 零門檻制作 使用即速應(yīng)用來(lái)開發(fā)微信小程序的過(guò)程非常簡(jiǎn)單, 無(wú)須儲(chǔ)備相關(guān)代碼知識(shí), 沒有開發(fā)經(jīng)驗(yàn)的人也可以輕松上手。

(１) 登錄即速應(yīng)用的官方網(wǎng)站(www.jisuapp.cn), 進(jìn)入制作界面, 從眾多行業(yè)模板中選擇一個(gè)合適的模板。 ? ? ??

(２) 在模板的基礎(chǔ)上進(jìn)行簡(jiǎn)單編輯和個(gè)性化制作。

(３) 制作完成后, 將代碼一鍵打包并下載。

(４) 將代碼上傳至微信開發(fā)者工具。

(５) 上傳成功后, 等待審核通過(guò)即可。

２.行業(yè)模板多樣, 種類齊全

3、豐富的功能組件和強(qiáng)大的管理后臺(tái)

即速應(yīng)用的功能組件和管理后臺(tái)非常實(shí)用, 可以根據(jù)實(shí)際情況解決商家的不同需求。

二、界面介紹

即速應(yīng)用的主界面主要分為4個(gè)區(qū)域，分別為

菜單欄：?菜單欄中的“風(fēng)格” 選項(xiàng)用于設(shè)置小程序頁(yè)面的風(fēng)格顏色, “管理” 選項(xiàng)用于進(jìn)入后臺(tái)管理頁(yè)面, “幫助” 選項(xiàng)用于提示幫助功能, “客服” 選項(xiàng)用于進(jìn)入客服界面, “歷史”選項(xiàng)用來(lái)恢復(fù)前項(xiàng)操作, “預(yù)覽” 選項(xiàng)用在ＰＣ端預(yù)覽制作效果, “保存” 選項(xiàng)用于保存已制作的內(nèi)容, “生成” 選項(xiàng)用于實(shí)現(xiàn)小程序打包上線設(shè)置。

工具欄：工具欄包括“頁(yè)面管理” “組件庫(kù)”?２ 個(gè)選項(xiàng)卡,

“頁(yè)面管理”?實(shí)現(xiàn)添加頁(yè)面和添加分組以及對(duì)某一頁(yè)面進(jìn)行改名、收藏、復(fù)制、刪除操作。 “組件庫(kù)” 有９ 個(gè)基礎(chǔ)組件、７ 個(gè)布局組件、１８ 個(gè)高級(jí)組件和２ 個(gè)其他組件。

編輯區(qū)：編輯區(qū)是用來(lái)制作小程序頁(yè)面的主要區(qū)域,

通過(guò)拖拽組件實(shí)現(xiàn)頁(yè)面制作, 右邊的“前進(jìn)” “后退” 選項(xiàng)可以進(jìn)行恢復(fù)操作, “模板” 選項(xiàng)可以用來(lái)選擇模板, “元素” 選項(xiàng)可以用來(lái)顯示頁(yè)面中的組件及其層次關(guān)系, “數(shù)據(jù)” 選項(xiàng)可以用來(lái)進(jìn)行頁(yè)面數(shù)據(jù)管理, “模塊” 選項(xiàng)可以用來(lái)選擇模塊

屬性面板：屬性面板用來(lái)設(shè)置選定組件的屬性及樣式, 包括“組件” 和“組件樣式” 兩個(gè)選項(xiàng)卡。?“

組件” 選項(xiàng)卡用來(lái)設(shè)置組件內(nèi)容及點(diǎn)擊事件; “組件樣式” 選項(xiàng)卡用來(lái)設(shè)置組件的樣式,不同組件有不同的樣式需要設(shè)置。

三、即速應(yīng)用組件

即速應(yīng)用提供了大量的組件供用戶快速布局頁(yè)面, 包括７ 個(gè)布局組件、９ 個(gè)基本組件、１８ 個(gè)高級(jí)組件和２ 個(gè)其他組件。

布局組件

布局組件用于設(shè)計(jì)頁(yè)面布局, 主要包括雙欄、面板、自由面板、頂部導(dǎo)航、底部導(dǎo)航、分割線和動(dòng)態(tài)分類。

基本組件?

基本組件是小程序頁(yè)面常用的組件，包括文本、圖片、按鈕、標(biāo)題、輪播、分類、圖片、列表、圖文集和視頻。

高級(jí)組件

高級(jí)組件通常需要后臺(tái)數(shù)據(jù)，通過(guò)設(shè)置后臺(tái)數(shù)據(jù)來(lái)實(shí)現(xiàn)數(shù)據(jù)后臺(tái)化，讓小程序的數(shù)據(jù)隨時(shí)更新，及時(shí)修改 。分為8個(gè)組件

1.動(dòng)態(tài)列表組件：動(dòng)態(tài)列表組件是容納基礎(chǔ)組件來(lái)展示后臺(tái)數(shù)據(jù)的容器，通過(guò)添加基礎(chǔ)組件來(lái)展示對(duì)應(yīng)的后臺(tái)數(shù)據(jù)。

2.個(gè)人中心組件：個(gè)人中心組件顯示個(gè)人相關(guān)信息，包括圖像，昵稱，我的訂單，收貨地址，購(gòu)物車等

3.動(dòng)態(tài)表單組件：動(dòng)態(tài)表單組件相當(dāng)于HTML中的

標(biāo)簽，是一個(gè)容器組件，可以添加子表單組件和基本組件，用來(lái)收集用戶提交的相關(guān)信息給后臺(tái)數(shù)據(jù)對(duì)象

4.評(píng)論組件：評(píng)論組件提供信息發(fā)布或回復(fù)信息的組件，

5.計(jì)數(shù)組件：計(jì)數(shù)組件可以用于點(diǎn)贊，統(tǒng)計(jì)瀏覽量等類似的計(jì)數(shù)功能。

6.地圖組件：地圖組件用于顯示指定地址的地圖，常用于實(shí)現(xiàn)定位及導(dǎo)航功能，

7.城市定位組件：城市定位組件通常與列表類組件搭配使用，常見搭配有動(dòng)態(tài)列表和商品列表

8.懸浮窗組件：懸浮窗組件的固定搭配有：客服，我的訂單，購(gòu)物車，回到頂部

?四、后臺(tái)管理

即速應(yīng)用后臺(tái)管理提供了非常強(qiáng)大的后臺(tái)管理，開發(fā)者在后臺(tái)進(jìn)行修改操作就可以讓數(shù)據(jù)即時(shí)更新，開發(fā)者還可以通過(guò)后臺(tái)來(lái)查看小程序數(shù)據(jù)管理，用戶管理，商品管理，營(yíng)銷工具，多商家管理等功能。

第六章 網(wǎng)絡(luò)API

微信原生API接口或第三方API提供了各類接口實(shí)現(xiàn)前后端交互。

網(wǎng)絡(luò)API可以幫助開發(fā)者實(shí)現(xiàn)網(wǎng)絡(luò)URL訪問(wèn)調(diào)用、文件的上傳和下載、網(wǎng)絡(luò)套接字的使用等功能處理。微信開發(fā)團(tuán)隊(duì)提供了10個(gè)網(wǎng)絡(luò)API接口。

wx. request(Object)接口用于發(fā)起 HTTPS請(qǐng)求。

wx.uploadFile(Object)接口用于將本地資源上傳到后臺(tái)服務(wù)器。

wx. downloadFile( Object)接口用于下載文件資源到本地。

wx. connectSocket( Object)接口用于創(chuàng)建一個(gè)WebSocket連接。

wx. sendSocketMessage(Object)接口用于實(shí)現(xiàn)通過(guò)WebSocket連接發(fā)送數(shù)據(jù)。

wx. closeSocket( Object)接口用于關(guān)閉WebSocket連接。

wx.onSocketOpen(CallBack)接口用于監(jiān)聽WebSocket連接打開事件。

wx.onSocketError(CallBack)接口用于監(jiān)聽WebSocket錯(cuò)誤。

wx. onSocketMessage(CallBack)接口用于實(shí)現(xiàn)監(jiān)聽WebSocket接收到服務(wù)器的消息事件。

wx.onSocketClose(CallBack)接口 ?用于實(shí)現(xiàn)監(jiān)聽WedSocket關(guān)閉。

常用3個(gè)網(wǎng)絡(luò)API

wx. request(Object)接口用于發(fā)起 HTTPS請(qǐng)求。 發(fā)起網(wǎng)絡(luò)請(qǐng)求

wx.uploadFile(Object)接口用于將本地資源上傳到后臺(tái)服務(wù)器。? 上傳文件

wx. downloadFile( Object)接口用于下載文件資源到本地。??

多媒體API

圖片API實(shí)現(xiàn)對(duì)相機(jī)拍照?qǐng)D片或本地相冊(cè)圖片進(jìn)行處理，主要包括以下4個(gè)API接口:

wx.chooseImage(Object)接口用于從本地相冊(cè)選擇圖片或使用相機(jī)拍照。

wx. previewImage(Object)接口用于預(yù)覽圖片。

wx. getImageInfo( Object)接口用于獲取圖片信息。

wx. saveImageToPhotosAlbum(Object)接口用于保存圖片到系統(tǒng)相冊(cè)。

錄音API：錄音API提供了語(yǔ)音錄制的功能，主要包括以下兩個(gè)API接口:

wx.startRecord?(Object) 接口 用于實(shí)現(xiàn)開始錄音。

wx.stopRecord?(Object) 接口 用于實(shí)現(xiàn)主動(dòng)調(diào)用停止錄音。

6.3.文件API

從網(wǎng)絡(luò)上下載或錄音的文件都是臨時(shí)保存的,若要持久保存,需要用到文件API。文件API提供了打開、保存、刪除等操作本地文件的能力,主要包括以下５個(gè)API接口:

wx.saveFile(Object) 接口用于保存文件到本地。wx.getSaveFileList(Object) 接口用于獲取本地已保存的文件列表。wx.getSaveFileInfo(Object) 接口用于獲取本地文件的文件信息。wx.removeSaveFile(Object) 接口用于刪除本地存儲(chǔ)的文件。wx.openDocument(Object) 接口用于新開頁(yè)面打開文檔,支持格式:doc、xls、ppt、pdf、docx、xlsx、ppts。

本地?cái)?shù)據(jù)及緩存 API ? ?

小程序提供了以鍵值對(duì)的形式進(jìn)行本地?cái)?shù)據(jù)緩存功能，并且是永久存儲(chǔ)的，但最大不超過(guò)10MB，其目的是提高加載速度。數(shù)據(jù)緩存的接口主要有4個(gè):

wx.setStorage( Object)或wx.setStorageSync(key,data)接口用于設(shè)置緩存數(shù)據(jù)。

wx.getStorage(Object)或wx.getStorageSyne(key)接口用于獲取緩存數(shù)據(jù)。

wx.removeStorage( Object)或wx.removeStorageSyne(key)接口用于刪除指定緩存數(shù)據(jù)。

wx.clearStorage( )或wx.clearStorageSync()接口用于清除緩存數(shù)據(jù)。其中，帶Syne后綴的為同步接口，不帶Sync后綴的為異步接口

位置信息API

小程序可以通過(guò)位置信息API來(lái)獲取或顯示本地位置信息，小程序支持WCS84 和CCj02標(biāo)準(zhǔn)，WGS84標(biāo)準(zhǔn)為地球坐標(biāo)系，是國(guó)際上通用的坐標(biāo)系;CCj02標(biāo)準(zhǔn)是中國(guó)國(guó)家測(cè)繪局制定的地理信息系統(tǒng)的坐標(biāo)系統(tǒng)，是由WGS84坐標(biāo)系經(jīng)加密后的坐標(biāo)系，又稱為火星坐標(biāo)系。默認(rèn)為WGS84標(biāo)準(zhǔn)，若要查看位置需要使用GCj02標(biāo)準(zhǔn)。主要包括以下3個(gè)API接口:

wx. getLocation (Object)接口用于獲取位置信息。

wx.chooseLocation(Object)接口用于選擇位置信息。

wx.openLocation(Object)接口用于通過(guò)地圖顯示位置。

設(shè)備相關(guān) API

設(shè)備相關(guān)的接口用于獲取設(shè)備相關(guān)信息，主要包括系統(tǒng)信息、網(wǎng)絡(luò)狀態(tài)、撥打電話及掃碼等。主要包括以下5個(gè)接口API:

wx.getSystemInfo( Object)接口、wx. getSystemInfoSync()接口用于獲取系統(tǒng)信息。

wx.getNetworkType( Object) 接口用于獲取網(wǎng)絡(luò)類型。

wx.onNetworkStatusChange(CallBack)接口用于監(jiān)測(cè)網(wǎng)絡(luò)狀態(tài)改變。

wx. makePhoneCall(Object)接口用于撥打電話。

wx.scanCode(Object)接口用于掃描二維碼

獲取系統(tǒng)信息

wx. getSystemInfo( Object)接口、wx.getSystemInfoSync()接口分別用于異步和同步獲取系統(tǒng)信息

回調(diào)成功后返回的相關(guān)信息?

獲取網(wǎng)絡(luò)狀態(tài)

wx. getNetworkType（Object）用于獲取網(wǎng)絡(luò)類型。?

撥打電話

wx. makePhoneCall（Object）接口用于實(shí)現(xiàn)調(diào)用手機(jī)撥打電話。相關(guān)參數(shù)如下

掃描二維碼

wx. scanCode（Object）接口用于調(diào)起客戶端掃碼界面，掃碼成功后返回相應(yīng)的內(nèi)容。

成功返回的數(shù)據(jù)如表：??

柚子快報(bào)邀請(qǐng)碼778899分享：微信小程序（四~六）

http://yzkb.51969.com/

好文閱讀

評(píng)論可見，查看隱藏內(nèi)容