(一) 常用標(biāo)簽

組件你可以理解為傳統(tǒng)頁面開發(fā)時候的各種標(biāo)簽，例如 div span 等等，我這里只說一些常用的，這樣就能能搭建出一個基本的頁面了，但是如果想要更加美觀以及擁有更好的體驗(yàn)，就需要 XSS 和 別的一些強(qiáng)大的組件了，如果有額外的需求，可以去官方文檔查閱一下 (同時不常用的屬性，也就不提了)

(1) view

view 可以理解為傳統(tǒng)頁面開發(fā)中的 div 塊級元素，使用 view 會換行

關(guān)于 view 標(biāo)簽，還有一些額外的屬性，說的也很清楚，但是前期的話，其實(shí)不考慮這個也是可以的，就單純的當(dāng)做一個布局的 div 來用

屬性	類型	默認(rèn)值	必填	說明	最低版本
hover-class	string	none	否	指定按下去的樣式類。當(dāng) hover-class="none" 時，沒有點(diǎn)擊態(tài)效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài)	1.5.0
hover-start-time	number	50	否	按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位毫秒	1.0.0
hover-stay-time	number	400	否	手指松開后點(diǎn)擊態(tài)保留時間，單位毫秒	1.0.0

(2) text

text 可以理解為傳統(tǒng)頁面中的 span 行內(nèi)元素，text 不會換行

text 涉及的一些標(biāo)簽

屬性	類型	默認(rèn)值	必填	說明	最低版本
selectable	boolean	false	否	文本是否可選	1.1.0
space	string		否	顯示連續(xù)空格	1.4.0
decode	boolean	false	否	是否解碼	1.4.0

space 的合法值

值	說明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根據(jù)字體設(shè)置的空格大小

decode可以解析的有

  < > & ' ? ?

簡單測試一下其中兩個，可以看到，后者長按可以選擇文字，同時編碼被解析成空格，前者反之

<text selectable="{{false}}" decode="{{false}}">測 試text>
<text selectable="{{true}}" decode="{{true}}">測 試text>

(3) image

image 就是圖片相關(guān)的一個組件，這個組件默認(rèn)寬度320px、?度240px，同時支持懶加載

我摘了三個比較常用的屬性出來

屬性	類型	默認(rèn)值	必填	說明	最低版本
src	string		否	圖片資源地址	1.0.0
mode	string	scaleToFill	否	圖片裁剪、縮放的模式	1.0.0
lazy-load	boolean	false	否	圖片懶加載，在即將進(jìn)入一定范圍（上下三屏）時才開始加載	1.5.0

他作為圖片的一個承載物，我們重點(diǎn)多說一下關(guān)于 mode 的問題，也就是圖片的顯示形式

所以先來看一下， mode 的取值范圍 （節(jié)選了相對常用的，其余的取值都屬于裁剪類型）

值	說明	最低版本
scaleToFill	縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
aspectFit	縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
aspectFill	縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
widthFix	縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變
heightFix	縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變	2.10.3

比較常用是 widthFix，在這幾個其中，aspectFill 相對還是用的比較少的

(4) swiper

這個組件，是小程序頁面中的一個輪播圖的效果

swiper 是輪播圖的一個總的容器， swiper-item 代表其中的每一個內(nèi)容，配合其屬性，能很方便的達(dá)到需要的樣式

同樣摘了幾個常見的屬性

屬性	類型	默認(rèn)值	必填	說明	最低版本
indicator-dots	boolean	false	否	是否顯示面板指示點(diǎn)	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示點(diǎn)顏色	1.1.0
indicator-active-color	color	#000000	否	當(dāng)前選中的指示點(diǎn)顏色	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存在一些默認(rèn)的樣式

• width: 100%
• height 150px

image 默認(rèn)寬高

• width: 320px
• height: 240px

如果，swiper 的高度出現(xiàn)了問題，給出一個解決方式

先根據(jù)素材圖片的寬高比例，等比計算 swiper 的寬高，這樣高度就換算出來了

swiper 高度 = swiper 寬度 * 素材高度 / 素材寬度

即：height: 750rpx * 素材高度 / 素材寬度

來看個綜合一些的例子

WXML

圖片隨便自己做了兩張

<swiper autoplay="{{true}}" interval="5000" circular="{{true}}" indicator-dots="{{true}}"
    indicator-color="#D3D3D3" indicator-active-color="#FFFF00">
    <swiper-item><image mode="widthFix" src="../../image/swiperC.jpg">image>swiper-item>
    <swiper-item><image mode="widthFix" src="../../image/swiperB.jpg">image>swiper-item>
    <swiper-item><image mode="widthFix" src="../../image/swiperA.jpg">image>swiper-item>
swiper>

WXSS

swiper{
    width: 100%;
    height: calc(750rpx * 275 / 1000);
}

image{
    width: 100%;
}

看一下效果，現(xiàn)在就實(shí)現(xiàn)了輪播圖的效果，同時會5秒自動循環(huán)輪播，自己可以對照屬文檔進(jìn)行定制修改

(5) navigator

導(dǎo)航組件，這塊可以理解為傳統(tǒng)頁面開發(fā)的超鏈接標(biāo)簽

屬性	類型	默認(rèn)值	必填	說明	最低版本
target	string	self	否	在哪個目標(biāo)上發(fā)生跳轉(zhuǎn)，默認(rèn)當(dāng)前小程序	2.0.7
url	string		否	當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接	1.0.0
open-type	string	navigate	否	跳轉(zhuǎn)方式	1.0.0

open-type 的合法值

值	說明	最低版本
navigate	保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，但是不能跳到tabbar 頁面
redirect	關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，但是不允許跳轉(zhuǎn)到tabbar 頁面
switchTab	跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面
reLaunch	關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面	1.1.0
navigateBack	關(guān)閉當(dāng)前頁面，返回上?頁面或多級頁面?？赏ㄟ^ getCurrentPages() 獲取當(dāng)	1.1.0
exit	退出小程序，target= miniProgram 時?效	2.1.0

下面給出一個測試的代碼，默認(rèn)不添加 open-type 的寫法會有一個返回上一層的

"/pages/test06/test06">默認(rèn)跳轉(zhuǎn)到test06

open-type="redirect" url="/pages/test06/test06">redirect跳轉(zhuǎn)到test06

open-type="switchTab" url="/pages/index/index">switchTab跳轉(zhuǎn)到主頁

open-type="reLaunch" url="/pages/index/index">reLaunch跳轉(zhuǎn)到主頁

(6) rich-text

這是一個富文本標(biāo)簽，作用就是把字符串中的對應(yīng)標(biāo)簽解析出來，其主要的一個屬性就是 nodes ，我們先簡單看一下 nodes的屬性有哪些

現(xiàn)支持兩種節(jié)點(diǎn)，通過type來區(qū)分，分別是元素節(jié)點(diǎn)和文本節(jié)點(diǎn)，默認(rèn)是元素節(jié)點(diǎn)，在富文本區(qū)域里顯示的HTML節(jié)點(diǎn) 元素節(jié)點(diǎn)：type = node

屬性	說明	類型	必填	備注
name	標(biāo)簽名	string	是	支持部分受信任的 HTML 節(jié)點(diǎn)
attrs	屬性	object	否	支持部分受信任的屬性，遵循 Pascal 命名法
children	子節(jié)點(diǎn)列表	array	否	結(jié)構(gòu)和 nodes 一致

來看一個例子，這個nodes 的值，我們?nèi)?js 中定義一個

<rich-text nodes="{{receive}}">rich-text>

有兩種方式賦值，一種就是我注釋掉的那一行，直接使用一個含有標(biāo)簽的字符串，直接賦值就會解析，另一種就是通過后面這樣 JSON 的一種格式賦值，效果是一樣的

Page({
  data: {
    // receive:'
理想二旬不止
'
    receive:[{
      name:'div',
      attrs:{
        class:'div_class'
      },
      children:[{
        name:'h3',
        attrs:{},
        children:[{
          type:'text',
          text:'理想二旬不止'
        }]
      }]
    }] 
  },
})

(7) button

按鈕標(biāo)簽，也算是非常常用的內(nèi)容了，同時相比較傳統(tǒng)頁面開發(fā)中的按鈕，微信小程序中又有很多開放式的功能，首先看一些涉及的一些屬性（更多內(nèi)容可以看官網(wǎng)文檔）：

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

屬性	類型	默認(rèn)值	必填	說明	最低版本
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 圖標(biāo)	1.0.0
form-type	string		否	用于 form 組件，點(diǎn)擊分別會觸發(fā) form 組件的 submit/reset 事件	1.0.0
open-type	string		否	微信開放能力	1.10

size 的合法值

值	說明
default	默認(rèn)大小
mini	小尺寸

type 的合法值

值	說明
primary	綠色
default	白色
warn	紅色

form-type 的合法值

值	說明	最低版本
submit	提交表單
reset	重置表單

open-type 的合法值

值	說明	最低版本
contact	打開客服會話，如果用戶在會話中點(diǎn)擊消息卡片后返回小程序，可以從 bindcontact 回調(diào)中獲得具體信息	1.1.0
share	觸發(fā)用戶轉(zhuǎn)發(fā)，使用前建議先閱讀	1.2.0
getPhoneNumber	獲取用戶手機(jī)號，可以從bindgetphonenumber回調(diào)中獲取到用戶信息	1.2.0
getUserInfo	獲取用戶信息，可以從bindgetuserinfo回調(diào)中獲取到用戶信息	1.3.0
launchApp	打開APP，可以通過app-parameter屬性設(shè)定向APP傳的參數(shù)	1.9.5
openSetting	打開授權(quán)設(shè)置頁	2.0.7
feedback	打開“意見反饋”頁面，用戶可提交反饋內(nèi)容并上傳日志，開發(fā)者可以登錄小程序管理后臺后進(jìn)入左側(cè)菜單“客服反饋”頁面獲取到反饋內(nèi)容	2.1.0

這幾個代碼就是通過 size 、 type 進(jìn)行基本的大小或者說類型實(shí)現(xiàn)一個樣式

<button style="width:100%">默認(rèn)按鈕button>
<button style="width:100%" size="mini">mini 默認(rèn)按鈕button>
<button style="width:100%" type="primary">primary 按鈕button>
<button style="width:100%" type="warn">warn 按鈕button>
<button style="width:100%" type="warn" plain>plain 按鈕button>

下面就是一些開放的功能

"width:100%" open-type="contact">聯(lián)系客服
"width:100%" open-type="share">分享小程序
"width:100%" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
    獲取電話號碼

"width:100%" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
    獲取用戶信息

"width:100%" open-type="launchApp">打開App
"width:100%" open-type="openSetting">打開授權(quán)設(shè)置頁
"width:100%" open-type="feedback">意見反饋

需要說明的幾個點(diǎn)：

• 聯(lián)系客服這個功能只能在真機(jī)調(diào)試，需要先在后臺綁定一個客服的微信號碼，接著在開發(fā)工具中選擇真機(jī)調(diào)試，然后掃描二維碼就可以了

• 獲取電話號碼，以及用戶信息，需要結(jié)合事件來做，例如：

Page({
  // 獲取用戶的手機(jī)號碼信息
  getPhoneNumber(e){
    console.log(e);
  },
  // 獲取用戶個人信息
  getUserInfo(e){
    console.log(e);
  }
})

例如獲取用戶信息

但是電話號碼，不是企業(yè)的小程序賬號 沒有權(quán)限來獲取用戶的手機(jī)號碼

• 打開App，是在 app 中 通過 app 的某個鏈接打開小程序，然后在小程序 再通過這個功 重新打開 app

• 當(dāng)前版本的微信小程序，在.wxss文件里設(shè)置Button寬度無效，網(wǎng)絡(luò)上的一種解決方案就是把 app.json里的 style: v2語句刪掉，還有一種就是像我代碼中一樣，直接加 style，暫時推薦后者吧，此處未深究

(8) icon

微信小程序默認(rèn)封裝了一些圖標(biāo)，也很簡單，只有三個屬性

屬性	類型	默認(rèn)值	必填	說明	最低版本
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

簡單用一下

type="success" size="50"> 
type="success" size="50" color="#3390ff"> 

如果不指定顏色，其默認(rèn)都是有一定顏色樣式的，如果指定了 color 就會覆蓋掉原來的顏色

(9) radio

單選框組件，需要配合 radio-group 使用，下面看代碼就明白了

屬性	類型	默認(rèn)值	必填	說明	最低版本
value	string		否	radio標(biāo)識。當(dāng)該radio選中時，radio-group 的 change 事件會攜帶 radio 的 value	1.0.0
checked	boolean	false	否	當(dāng)前是否選中	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
color	string	#09BB07	否	radio的顏色，同css的color	1.0.0

簡單用一下，

<radio-group bindchange="handleChange">
  <radio color="blue" value="male">男radio>
  <radio color="blue" value="female" >女radio>
radio-group>

<view>你選擇的性別是:{{gender}}view>

js 內(nèi)容，至于 e.detail.value 如何來的，可以通過 console.log(e) 打印看到

Page({
  data: {
    gender: ""
  },
  handleChange(e){
    // 獲取單選框中的值
    let gender=e.detail.value;
    // 把值 賦值給 data中的數(shù)據(jù)
    this.setData({
      gender
    })
  }
})

(10) checkbox

屬性	類型	默認(rèn)值	必填	說明	最低版本
value	string		否	checkbox 標(biāo)識，選中時觸發(fā) checkbox-group 的 change 事件，并攜帶 checkbox 的 value	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
checked	boolean	false	否	當(dāng)前是否選中，可用來設(shè)置默認(rèn)選中	1.0.0
color	string	#09BB07	否	checkbox的顏色，同css的color	1.0.0

直接用一下

<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    checkbox>
  checkbox-group>
  <view>
    選中的內(nèi)容:{{checkedList}}
  view>
view>

Page({
  data: {
    list:[
      {
        id:0,
        name:":sun_with_face:?",
        value:"太陽"
      },
      {
        id:1,
        name:":crescent_moon:",
        value:"月亮"
      },
      {
        id:2,
        name:":star:?",
        value:"星星"
      }
    ],
    checkedList:[]
  },
  // 復(fù)選框的選中事件
  handleItemChange(e){
    // 獲取被選中的復(fù)選框的值
    const checkedList=e.detail.value;
    // 進(jìn)行賦值
    this.setData({
      checkedList
    })
  }
})

運(yùn)行結(jié)果：

(二) 自定義組件（標(biāo)簽）

(1) 快速體驗(yàn)

如果我們想要自定義一些組件，也就是說將一些代碼抽離出來，可以達(dá)到復(fù)用等的效果

我們一步一步舉個例子：

首先創(chuàng)建文件夾目錄 components/header

接著右鍵創(chuàng)建組件 header，點(diǎn)擊新建 Component

結(jié)構(gòu)就是這樣的

一般點(diǎn)擊創(chuàng)建組件的方式會自動將組件的 json 文件中聲明組件，如果沒有需要自己手動修改component 為 true

{
  "component": true,
}

接著在組件WXML中隨便寫點(diǎn)東西，然后打開想要引用組件的頁面，首先在 json 中說明引用組件

{
  "usingComponents": {
    "header":"/../../components/header/header"
  }
}

然后直接引用就可以了，效果就出來了

<header>header>

(2) 組件傳參

組件傳參有兩個方向，一個是父組件 --> 子組件 ，還有就是反過來。注：父組件是頁面，子組件是自定義組件

• ?組件通過屬性的?式給?組件傳遞參數(shù)

• 組件通過事件的?式向?組件傳遞參數(shù)

通過一個例子來演示

在上面結(jié)構(gòu)上自己寫一個自定義的組件，一個導(dǎo)航條的效果

自定義組件的頁面代碼

<view class="header">
    <view class="header_tabs_title">
        <view wx:for="{{headerTabs}}" 
        wx:key="id" 
        class="header_tabs_title_item {{item.isActive?'active':''}}"
        bindtap="hanldeItemTap"
        data-index="{{index}}"
        >
            {{item.name}}
        view>
    view>
view>

自定義組件的樣式文件如下

/* components/header/header.wxss */
.header_tabs_title{
    display: flex;
    padding: 10px;
}
.header_tabs_title_item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.active{
    color:blue;
    border-bottom: 5rpx solid currentColor;
}

自定義組件的 js文件，在 properties 中的內(nèi)容，就是接收到父（頁面）的數(shù)據(jù)，也就是一個關(guān)于導(dǎo)航的數(shù)組，其中包括首頁測試關(guān)于等等導(dǎo)航文字內(nèi)容

• headerTabs的位置：要接受的名稱，自己定

• type：要接收的數(shù)據(jù)的類型

• value：默認(rèn)值

而下面的方法就是關(guān)于父傳數(shù)據(jù)到子組件的內(nèi)容，其代表觸發(fā)父組件中的自定義事件，同時傳遞數(shù)據(jù)給 父組件

// components/header/header.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    headerTabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    hanldeItemTap(e){
      const {index}=e.currentTarget.dataset;
      // 觸發(fā)父組件中的自定義事件 同時傳遞數(shù)據(jù)給  
      this.triggerEvent("itemChange",{index});
    }
  }
})

補(bǔ)充：e.currentTarget.dataset; 是怎么來的，還是老辦法，console 打印一下

父頁面

綁定一個事件，同時把等會再 js 中的定義數(shù)據(jù)，傳遞到自定義組件中去，名稱就是剛才接收的 headerTabs

<header headerTabs="{{headerTabs}}" binditemChange="handleItemChange" >header>

父頁面的 js

說明： let { headerTabs } = this.data; 這是 ES6 的寫法，也可以寫成

let headerTabs = this.data.headerTabs;

遍歷數(shù)組的時候 修改了 v ，就把源數(shù)組也修改了

目的就是通過點(diǎn)擊修改定義導(dǎo)航中的 isActive 為 true 或 false

// pages/test08/test08.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    headerTabs:[
      {
        id:0,
        name:"首頁",
        isActive:true
      },
      {
        id:1,
        name:"測試",
        isActive:false
      },
      {
        id:2,
        name:"測試",
        isActive:false
      },
      {
        id:3,
        name:"關(guān)于",
        isActive:false
      },
    ]
  },
  // 自定義事件 用來接收子組件傳遞的數(shù)據(jù)的
  handleItemChange(e) {
    // 接收傳遞過來的參數(shù)
    const { index } = e.detail;
    let { headerTabs } = this.data;
    headerTabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
      headerTabs
    })
  }
})

結(jié)尾

如果文章中有什么不足，歡迎大家留言交流，感謝朋友們的支持！