# (一) 常用標籤 元件你可以理解為傳統頁面開發時候的各種標籤，例如 div span 等等，我這裡只說一些常用的，這樣就能能搭建出一個基本的頁面了，但是如果想要更加美觀以及擁有更好的體驗，就需要 WSS 和 別的一些強大的元件了，如果有額外的需求，可以去官方文件查閱一下 (同時不常用的屬性，也就不提了) `https://developers.weixin.qq.com/miniprogram/dev/component/` ## (1) view view 可以理解為傳統頁面開發中的 div 塊級元素，使用 view 會換行  關於 view 標籤，還有一些額外的屬性，說的也很清楚，但是前期的話，其實不考慮這個也是可以的，就單純的當做一個佈局的 div 來用 | 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 | | :--------------------- | :------ | :----- | :--- | :----------------------------------------------------------- | :------- | | hover-class | string | none | 否 | 指定按下去的樣式類。當 `hover-class="none"` 時，沒有點選態效果 | 1.0.0 | | hover-stop-propagation | boolean | false | 否 | 指定是否阻止本節點的祖先節點出現點選態 | 1.5.0 | | hover-start-time | number | 50 | 否 | 按住後多久出現點選態，單位毫秒 | 1.0.0 | | hover-stay-time | number | 400 | 否 | 手指鬆開後點擊態保留時間，單位毫秒 | 1.0.0 | ## (2) text text 可以理解為傳統頁面中的 span 行內元素，text 不會換行  text 涉及的一些標籤 | 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 | | :--------- | :------ | :----- | :--- | :----------- | :------- | | selectable | boolean | false | 否 | 文字是否可選 | 1.1.0 | | space | string | | 否 | 顯示連續空格 | 1.4.0 | | decode | boolean | false | 否 | 是否解碼 | 1.4.0 | **space 的合法值** | 值 | 說明 | | :--- | :--------------------- | | ensp | 中文字元空格一半大小 | | emsp | 中文字元空格大小 | | nbsp | 根據字型設定的空格大小 | **decode可以解析的有** ```   < > & '     ``` 簡單測試一下其中兩個，可以看到，後者長按可以選擇文字，同時編碼被解析成空格，前者反之 ```html ```  ## (3) image image 就是圖片相關的一個元件，這個元件預設寬度320px、⾼度240px，同時支援懶載入 我摘了三個比較常用的屬性出來 | 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 | | :-------- | :------ | :---------- | :--- | :----------------------------------------------------- | :------- | | src | string | | 否 | 圖片資源地址 | 1.0.0 | | mode | string | scaleToFill | 否 | 圖片裁剪、縮放的模式 | 1.0.0 | | lazy-load | boolean | false | 否 | 圖片懶載入，在即將進入一定範圍（上下三屏）時才開始載入 | 1.5.0 | 他作為圖片的一個承載物，我們重點多說一下關於 mode 的問題，也就是圖片的顯示形式 所以先來看一下，**mode 的取值範圍**（節選了相對常用的，其餘的取值都屬於裁剪型別） | 值 | 說明 | 最低版本 | | :---------- | :----------------------------------------------------------- | :------- | | scaleToFill | 縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 | | | aspectFit | 縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。 | | | aspectFill | 縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生擷取。 | | | widthFix | 縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變 | | | heightFix | 縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變 | 2.10.3 | 比較常用是 widthFix，在這幾個其中，aspectFill 相對還是用的比較少的 ## (4) swiper 這個元件，是小程式頁面中的一個輪播圖的效果 `swiper` 是輪播圖的一個總的容器，`swiper-item` 代表其中的每一個內容，配合其屬性，能很方便的達到需要的樣式 同樣摘了幾個常見的屬性 | 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 | | :--------------------- | :------ | :---------------- | :--- | :------------------- | :------- | | indicator-dots | boolean | false | 否 | 是否顯示面板指示點 | 1.0.0 | | indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示點顏色 | 1.1.0 | | indicator-active-color | color | #000000 | 否 | 當前選中的指示點顏色 | 1.1.0 | | autoplay | boolean | false | 否 | 是否自動切換 | 1.0.0 | | interval | number | 5000 | 否 | 自動切換時間間隔 | 1.0.0 | | duration | number | 500 | 否 | 滑動動畫時長 | 1.0.0 | | circular | boolean | false | 否 | 是否採用銜接滑動 | 1.0.0 | | vertical | boolean | false | 否 | 滑動方向是否為縱向 | 1.0.0 | **顯示比例問題** 首先說明一下，swiper存在一些預設的樣式 - width: 100% - height 150px image 預設寬高 - width: 320px - height: 240px 如果，swiper 的高度出現了問題，給出一個解決方式 先根據素材圖片的寬高比例，等比計算 swiper 的寬高，這樣高度就換算出來了 swiper 高度 = swiper 寬度 * 素材高度 / 素材寬度 即：height: 750rpx * 素材高度 / 素材寬度 來看個綜合一些的例子 **WXML** 圖片隨便自己做了兩張 ```html ``` **WXSS** ```css swiper{ width: 100%; height: calc(750rpx * 275 / 1000); } image{ width: 100%; } ``` 看一下效果，現在就實現了輪播圖的效果，同時會5秒自動迴圈輪播，自己可以對照屬文件進行定製修改  ## (5) navigator 導航元件，這塊可以理解為傳統頁面開發的超連結標籤 | 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 | | :-------- | :----- | :------- | :--- | :----------------------------------- | :------- | | target | string | self | 否 | 在哪個目標上發生跳轉，預設當前小程式 | 2.0.7 | | url | string | | 否 | 當前小程式內的跳轉連結 | 1.0.0 | | open-type | string | navigate | 否 | 跳轉方式 | 1.0.0 | **open-type 的合法值** | 值 | 說明 | 最低版本 | | :----------- | :----------------------------------------------------------- | :------- | | navigate | 保留當前頁面，跳轉到應用內的某個頁面，但是不能跳到tabbar 頁面 | | | redirect | 關閉當前頁面，跳轉到應用內的某個頁面，但是不允許跳轉到tabbar 頁面 | | | switchTab | 跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面 | | | reLaunch | 關閉所有頁面，開啟到應用內的某個頁面 | 1.1.0 | | navigateBack | 關閉當前頁面，返回上⼀頁面或多級頁面。可通過 getCurrentPages() 獲取當 | 1.1.0 | | exit | 退出小程式，target=miniProgram時⽣效 | 2.1.0 | 下面給出一個測試的程式碼，預設不新增 `open-type` 的寫法會有一個返回上一層的 ```html ``` ## (6) rich-text 這是一個富文字標籤，作用就是把字串中的對應標籤解析出來，其主要的一個屬性就是 `nodes` ，我們先簡單看一下 nodes的屬性有哪些 現支援兩種節點，通過type來區分，分別是元素節點和文字節點，預設是元素節點，在富文字區域裡顯示的HTML節點 元素節點：type = node | 屬性 | 說明 | 型別 | 必填 | 備註 | | :------- | :--------- | :----- | :--- | :--------------------------------------- | | name | 標籤名 | string | 是 | 支援部分受信任的 HTML 節點 | | attrs | 屬性 | object | 否 | 支援部分受信任的屬性，遵循 Pascal 命名法 | | children | 子節點列表 | array | 否 | 結構和 nodes 一致 | 來看一個例子，這個nodes 的值，我們去 js 中定義一個 ```html ``` 有兩種方式賦值，一種就是我註釋掉的那一行，直接使用一個含有標籤的字串，直接賦值就會解析，另一種就是通過後面這樣 JSON 的一種格式賦值，效果是一樣的 ```js Page({ data: { // receive:'

理想二旬不止

' receive:[{ name:'div', attrs:{ class:'div_class' }, children:[{ name:'h3', attrs:{}, children:[{ type:'text', text:'理想二旬不止' }] }] }] }, }) ``` ## (7) button 按鈕標籤，也算是非常常用的內容了，同時相比較傳統頁面開發中的按鈕，微信小程式中又有很多開放式的功能，首先看一些涉及的一些屬性（更多內容可以看官網文件）： `https://developers.weixin.qq.com/miniprogram/dev/component/button.html` | 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 | | :-------- | :------ | :------ | :--- | :----------------------------------------------------------- | :------- | | size | string | default | 否 | 按鈕的大小 | 1.0.0 | | type | string | default | 否 | 按鈕的樣式型別 | 1.0.0 | | plain | boolean | false | 否 | 按鈕是否鏤空，背景色透明 | 1.0.0 | | disabled | boolean | false | 否 | 是否禁用 | 1.0.0 | | loading | boolean | false | 否 | 名稱前是否帶 loading 圖示 | 1.0.0 | | form-type | string | | 否 | 用於 form 元件，點選分別會觸發 form 元件的 submit/reset 事件 | 1.0.0 | | open-type | string | | 否 | 微信開放能力 | 1.10 | **size 的合法值** | 值 | 說明 | | :------ | :------- | | default | 預設大小 | | mini | 小尺寸 | **type 的合法值** | 值 | 說明 | | :------ | :--- | | primary | 綠色 | | default | 白色 | | warn | 紅色 | **form-type 的合法值** | 值 | 說明 | 最低版本 | | :----- | :------- | :------- | | submit | 提交表單 | | | reset | 重置表單 | | **open-type 的合法值** | 值 | 說明 | 最低版本 | | :------------- | :----------------------------------------------------------- | :------- | | contact | 開啟客服會話，如果使用者在會話中點選訊息卡片後返回小程式，可以從 bindcontact 回撥中獲得具體資訊 | 1.1.0 | | share | 觸發使用者轉發，使用前建議先閱讀 | 1.2.0 | | getPhoneNumber | 獲取使用者手機號，可以從bindgetphonenumber回撥中獲取到使用者資訊 | 1.2.0 | | getUserInfo | 獲取使用者資訊，可以從bindgetuserinfo回撥中獲取到使用者資訊 | 1.3.0 | | launchApp | 開啟APP，可以通過app-parameter屬性設定向APP傳的引數 | 1.9.5 | | openSetting | 開啟授權設定頁 | 2.0.7 | | feedback | 開啟“意見反饋”頁面，使用者可提交反饋內容並上傳日誌，開發者可以登入小程式管理後臺後進入左側選單“客服反饋”頁面獲取到反饋內容 | 2.1.0 | 這幾個程式碼就是通過 `size` 、`type` 進行基本的大小或者說型別實現一個樣式 ```html 預設按鈕 mini 預設按鈕 primary 按鈕 warn 按鈕 plain 按鈕 ``` 下面就是一些開放的功能 ```html 聯絡客服 分享小程式 獲取電話號碼 獲取使用者資訊 開啟App 開啟授權設定頁 意見反饋 ``` 需要說明的幾個點： - 聯絡客服這個功能只能在真機除錯，需要先在後臺繫結一個客服的微訊號碼，接著在開發工具中選擇真機除錯，然後掃描二維碼就可以了   - 獲取電話號碼，以及使用者資訊，需要結合事件來做，例如： ```js Page({ // 獲取使用者的手機號碼資訊 getPhoneNumber(e){ console.log(e); }, // 獲取使用者個人資訊 getUserInfo(e){ console.log(e); } }) ``` 例如獲取使用者資訊  但是電話號碼，不是企業的小程式賬號 沒有許可權來獲取使用者的手機號碼 - 開啟App，是在 app 中 通過 app 的某個連結開啟小程式，然後在小程式 再通過這個功 重新開啟 app - 當前版本的微信小程式，在.wxss檔案裡設定Button寬度無效，網路上的一種解決方案就是把 app.json裡的 style: v2語句刪掉，還有一種就是像我程式碼中一樣，直接加 style，暫時推薦後者吧，此處未深究 ## (8) icon 微信小程式預設封裝了一些圖示，也很簡單，只有三個屬性 | 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 | | :---- | :------------ | :----- | :--- | :----------------------------------------------------------- | :------- | | type | string | | 是 | icon的型別，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear | 1.0.0 | | size | number/string | 23 | 否 | icon的大小 | 1.0.0 | | color | string | | 否 | icon的顏色，同css的color | 1.0.0 | 簡單用一下 ```html ``` 如果不指定顏色，其預設都是有一定顏色樣式的，如果指定了 color 就會覆蓋掉原來的顏色 ## (9) radio 單選框元件，需要配合 radio-group 使用，下面看程式碼就明白了 | 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 | | :------- | :------ | :------ | :--- | :----------------------------------------------------------- | :------- | | value | string | | 否 | radio標識。當該radio選中時，radio-group 的 change 事件會攜帶 radio 的 value | 1.0.0 | | checked | boolean | false | 否 | 當前是否選中 | 1.0.0 | | disabled | boolean | false | 否 | 是否禁用 | 1.0.0 | | color | string | #09BB07 | 否 | radio的顏色，同css的color | 1.0.0 | 簡單用一下， ```html ``` js 內容，至於 e.detail.value 如何來的，可以通過 console.log(e) 列印看到 ```js Page({ data: { gender: "" }, handleChange(e){ // 獲取單選框中的值 let gender=e.detail.value; // 把值 賦值給 data中的資料 this.setData({ gender }) } }) ``` ## (10) checkbox | 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 | | :------- | :------ | :------ | :--- | :----------------------------------------------------------- | :------- | | value | string | | 否 | checkbox 標識，選中時觸發 checkbox-group 的 change 事件，並攜帶 checkbox 的 value | 1.0.0 | | disabled | boolean | false | 否 | 是否禁用 | 1.0.0 | | checked | boolean | false | 否 | 當前是否選中，可用來設定預設選中 | 1.0.0 | | color | string | #09BB07 | 否 | checkbox的顏色，同css的color | 1.0.0 | 直接用一下 ```html ``` ```js Page({ data: { list:[ { id:0, name:"