#微信小程序# 基礎(chǔ)組件

-Start：關(guān)注本公眾號后，可直接聯(lián)系后臺獲取排版美化的詳細(xì)文檔！

-Hints：本篇文章所編纂的資料均來自網(wǎng)絡(luò)，特此感謝參與奉獻(xiàn)的有關(guān)人員。

微信小程序-開發(fā)步驟

-開發(fā)賬號申請

https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

-賬號APPID獲取

微信管理平臺：設(shè)置》賬號信息》AppID

https://mp.weixin.qq.com/wxamp/basicprofile/index?token=784407765&lang=zh_CN

-開發(fā)工具部署

下載地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

使用說明：

https://www.w3cschool.cn/weixinapp/weixinapp-devtools.html

-項(xiàng)目初始文件：

1 pages, 小程序的頁面組成，有index頁面和 logs 頁面，即歡迎頁和日志頁

Js文件，頁面邏輯

Wxml文件，頁面結(jié)構(gòu)

Json文件，頁面配置

Wxss文件，頁面樣式

2 utils 存放js文件，支持公共函數(shù)

3 app.js是小程序的腳本代碼。監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量，調(diào)用微信原生 API、網(wǎng)絡(luò)超時時間、底部tab

4 app.json 是小程序的全局配置。配置小程序的頁面組成，窗口背景色，導(dǎo)航條樣式，默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。

5 app.wxss 是小程序的公共樣式表。頁面組件的 class 屬性可以直接使用 app.wxss 中聲明的樣式規(guī)則。

6 project.config.json 在工具上做的任何配置都會寫入到這個文件，當(dāng)你重新安裝工具或者換電腦工作時，你只要載入同一個項(xiàng)目的代碼包，開發(fā)者工具就自動會幫你恢復(fù)到當(dāng)時你開發(fā)項(xiàng)目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項(xiàng)。

7 sitemap.json 開發(fā)者可以通過 sitemap.json 配置，或者管理后臺頁面收錄開關(guān)來配置其小程序頁面是否允許微信索引。當(dāng)開發(fā)者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內(nèi)容建立索引。當(dāng)用戶的搜索詞條觸發(fā)該索引時，小程序的頁面將可能展示在搜索結(jié)果中。

8 readme.md 自行添加的關(guān)于項(xiàng)目的說明文件

微信小程序-基礎(chǔ)組件

-組件定義

組件是視圖層的基本組成單元。

組件自帶一些功能與微信風(fēng)格的樣式。

一個組件通常包括開始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來修飾這個組件，內(nèi)容在兩個標(biāo)簽之內(nèi)。

?Content goes here ...

-組件共同屬性

?

微信小程序-容器組件

-視圖容器 view

-可滾動視圖容器 scroll-view

-滑塊視圖容器 swipe

-可移動區(qū)域 movable-area

-可覆蓋文本視圖容器 cover-view

-可覆蓋圖片視圖容器 cover-image

微信小程序-內(nèi)容組件

-圖標(biāo)icon

-文本text

-富文本rich-text

-進(jìn)度條progress

微信小程序-表單組件

-按鈕 button

-多選框 checkbox

多項(xiàng)選擇器 checkbox-group

-表單form

將組件內(nèi)的用戶輸入的switch?input?checkbox?slider?radio?picker?提交。當(dāng)點(diǎn)擊?form?表單中 form-type 為 submit 的?button?組件時，會將表單組件中的 value 值進(jìn)行提交，需要在表單組件中加上 name 來作為 key。

-輸入框input

-標(biāo)簽label

用來改進(jìn)表單組件的可用性，使用for屬性找到對應(yīng)的id，或者將控件放在該標(biāo)簽下，當(dāng)點(diǎn)擊時，就會觸發(fā)對應(yīng)的控件。for優(yōu)先級高于內(nèi)部控件，內(nèi)部有多個控件的時候默認(rèn)觸發(fā)第一個控件。目前可以綁定的控件有：, , ,

-下拉選框picker

從底部彈起的滾動選擇器

-嵌入頁面的滾動選擇器picker-viewer

-單選框 radio

-滑動選擇器 slider

-開關(guān)選擇器switch

-多行輸入框textarea

-富文本編輯器

富文本編輯器，可以對圖片、文字進(jìn)行編輯。

編輯器導(dǎo)出內(nèi)容支持帶標(biāo)簽的?html和純文本的?text，編輯器內(nèi)部采用?delta?格式進(jìn)行存儲。

通過setContents接口設(shè)置內(nèi)容時，解析插入的?html?可能會由于一些非法標(biāo)簽導(dǎo)致解析錯誤，建議開發(fā)者在小程序內(nèi)使用時通過 delta 進(jìn)行插入。

富文本組件內(nèi)部引入了一些基本的樣式使得內(nèi)容可以正確的展示，開發(fā)時可以進(jìn)行覆蓋。需要注意的是，在其它組件或環(huán)境中使用富文本組件導(dǎo)出的html時，需要額外引入?這段樣式，并維護(hù)的結(jié)構(gòu)。

圖片控件僅初始化時設(shè)置有效。

詳細(xì)資料：https://blog.csdn.net/qq_39708228/article/details/120360932

微信小程序-導(dǎo)航組件

-頁面連接 navigator

-頁面導(dǎo)航條 navigation-bar

頁面導(dǎo)航條配置節(jié)點(diǎn)，用于指定導(dǎo)航欄的一些屬性。只能是?page-meta?組件內(nèi)的第一個節(jié)點(diǎn)，需要配合它一同使用。

通過這個節(jié)點(diǎn)可以獲得類似于調(diào)用?wx.setNavigationBarTitle?wx.setNavigationBarColor?等接口調(diào)用的效果。

微信小程序-媒體組件

-音頻 audio

-圖片image

-視頻video

-相機(jī)camera

需要用戶授權(quán)?scope.camera

-實(shí)時音視頻錄制live-pusher

-實(shí)時音視頻播放 live-player

-多人音視頻對話voip-room

多人音視頻對話。需用戶授權(quán)?scope.camera、scope.record

微信小程序-地圖組件

-地圖map

個性化地圖能力可在小程序后臺“開發(fā)-開發(fā)者工具-騰訊位置服務(wù)”申請開通。 小程序內(nèi)地圖組件應(yīng)使用同一?subkey，可通過?layer-style（地圖官網(wǎng)設(shè)置的樣式 style 編號）屬性選擇不同的底圖風(fēng)格。

微信小程序 畫布組件

-畫布 canvas

參考資料

https://www.w3cschool.cn/weixinapp/itz51q8o.html

公眾號二維碼

End：如果有興趣了解量化交易、數(shù)據(jù)分析和互聯(lián)網(wǎng)+的實(shí)用技術(shù)，歡迎關(guān)注本公眾號