小程序宿主環(huán)境-組件

組件

一.小程序中組件的分類

\color{red}{小程序中的組件也是由宿主環(huán)境提供的},開發(fā)者可以基于組件快速搭建出漂亮的頁面解構。官方把小程序的組件分為了9大類:分別是:(標紅的為常用)
(1).\color{red}{視圖容器}
\color{blue}{1. view }

  • 普通視圖區(qū)域
  • 類似于Html中的div,是一個塊級元素
  • 常用來實現(xiàn)頁面的布局效果

二膀钠、view組件的基本使用

image.png

\color{blue}{2. scroll-view}

  • 可滾動的視圖區(qū)域
  • 常用來實現(xiàn)滾動列表效果


    image.png
image.png

\color{blue}{3. swiper 和 swiper-item, }

  • 輪播圖容器組件 和 輪播圖item組件

1.swiper 和 swiper-item 組件的基本使用

image.png

2.swiper組件的常用屬性

image.png

(2).\color{red}{基礎內容}

1.常用的基礎內容組件

\color{blue}{(1).text}

  • 文本組件
  • 類似于HTML中的span標簽裹虫,是一個行元素
文本選中效果屬性:\color{red}{selectable}
image.png

text組件的基本使用

通過text組件的selectable屬性肿嘲,實現(xiàn)長按選中文本內容的效果:
\color{blue}{(2).rich-text}

  • 富文本組件
  • 支持把HTML 字符串渲染為WXML結構
通過richg-text組件的nodes屬性節(jié)點,把html字符串渲染為對應的UI解構
image.png

(3).\color{red}{表單組件}
? button

  • 按鈕組件
  • 功能比html中的button按鈕豐富
  • 通過open-type屬性可以調用微信提供各種功能(客服筑公、轉發(fā)雳窟、獲取用戶授權、獲取用戶信息等)


    image.png

?image

  • 圖片組件
  • image組件默認寬度約300px匣屡、高度約240px


    image.png

image組件中的mode屬性

image組件的mode屬性用來孩子定圖片的裁剪和縮放封救,常用的mode屬性值如下:


image.png

(4).\color{red}{導航組件}
? navigator

  • 頁面導航組件
  • 類似于HTML中的a鏈接
    (5).媒體組件
    (6).map地圖組件
    (7).canvas 畫布組件
    (8).開放能力
    (9). 無障礙訪問

4.API

一、小程序的API概述

.\color{red}{小程序中的API是由宿主環(huán)境提供的}捣作,通過這些豐富的小程序API誉结,開發(fā)者可以方便的i奧用微信提供的能力,例如:獲取用戶信息券躁、本地儲存惩坑、支付功能等

二掉盅、API的3大類

.\color{red}{1.事件監(jiān)聽API}

  • 特點: 以 .\color{green}{on}開頭,用來.\color{green}{監(jiān)聽某些事件}
  • 舉例:調用.\color{green}{wx.onWindowResize} (function callback)監(jiān)聽窗口尺寸變化的事件
    .\color{red}{2.同步API}
  • 特點1: 以\color{green}{sync}結尾的Api都是同步Api
  • 特點2: 同步APi的執(zhí)行結果以舒,可以通過函數(shù)返回值直接獲取趾痘,如果執(zhí)行出錯會拋出異常
  • 舉例:調用\color{green}{wx.setStorageSync}('key','value')向本地儲存寫入內容
    .\color{red}{3.異步API}
  • 特點:.\color{green}{¥.ajax(options)}函數(shù),需要通過success稀轨、fail扼脐、complete 接收調用的結果
  • 舉例:wx..\color{green}{request}()發(fā)送網(wǎng)絡數(shù)據(jù)請求、通過success回調函數(shù)接收數(shù)據(jù)
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末奋刽,一起剝皮案震驚了整個濱河市瓦侮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌佣谐,老刑警劉巖肚吏,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異狭魂,居然都是意外死亡罚攀,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門雌澄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來斋泄,“玉大人,你說我怎么就攤上這事镐牺§牌” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵睬涧,是天一觀的道長募胃。 經(jīng)常有香客問我,道長畦浓,這世上最難降的妖魔是什么痹束? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮讶请,結果婚禮上祷嘶,老公的妹妹穿的比我還像新娘。我一直安慰自己秽梅,他們只是感情好抹蚀,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著企垦,像睡著了一般环壤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上钞诡,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天郑现,我揣著相機與錄音湃崩,去河邊找鬼。 笑死接箫,一個胖子當著我的面吹牛攒读,可吹牛的內容都是我干的。 我是一名探鬼主播辛友,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼薄扁,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了废累?” 一聲冷哼從身側響起邓梅,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎邑滨,沒想到半個月后日缨,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡掖看,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年匣距,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哎壳。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡毅待,死狀恐怖,靈堂內的尸體忽然破棺而出归榕,到底是詐尸還是另有隱情恩静,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布蹲坷,位于F島的核電站,受9級特大地震影響邑飒,放射性物質發(fā)生泄漏循签。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一疙咸、第九天 我趴在偏房一處隱蔽的房頂上張望县匠。 院中可真熱鬧,春花似錦撒轮、人聲如沸乞旦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽兰粉。三九已至,卻和暖如春顶瞳,著一層夾襖步出監(jiān)牢的瞬間玖姑,已是汗流浹背愕秫。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留焰络,地道東北人戴甩。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像闪彼,于是被迫代替她去往敵國和親甜孤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內容