微信小程序之自定義組件的實(shí)現(xiàn)代碼（附源碼）

更新時(shí)間：2018年08月02日 11:02:39 作者：yanyw

最近在項(xiàng)目開發(fā)中，遇到好多雷同的頁面樣式，就想著可以將常用的功能模塊封裝成組件，方便在項(xiàng)目中使用和修改。這篇文章主要介紹了微信小程序之自定義組件的實(shí)現(xiàn)代碼（附源碼）,需要的朋友可以參考下

最近在項(xiàng)目開發(fā)中，遇到好多雷同的頁面樣式，就想著可以將常用的功能模塊封裝成組件，方便在項(xiàng)目中使用和修改，下面就參照微信小程序的文檔分步驟寫一個(gè)微信小程序的組件。

附上效果圖：

step1：創(chuàng)建文件并申明

與創(chuàng)建微信小程序的頁面一樣，一個(gè)自定義組件也需要json,wxml,wxss,js四個(gè)文件。

在項(xiàng)目根目錄中創(chuàng)建文件夾，取名為：component，在該目錄下繼續(xù)創(chuàng)建文件夾successModal。

可以在開發(fā)工具中右鍵創(chuàng)建，選擇component，默認(rèn)自動(dòng)會(huì)創(chuàng)建四個(gè)文件。如圖：

在successModal.json文件中進(jìn)行自定義組件聲明，如：

在開發(fā)工具中右鍵新建選擇component，默認(rèn)自動(dòng)會(huì)創(chuàng)建。

{
 "component": true,
 "usingComponents": {}
}

step2:編寫組件模板代碼

<!-- 這是自定義組件的內(nèi)部WXML結(jié)構(gòu) success.wxml-->
<view class='modal-section' wx:if="{{modalHidden}}">
 <view class='modal-opaci' bindtap='modal_click_Hidden'></view>
 <view class='modal-cont'>
 <icon type='{{modalIcon}}' size='70'></icon>
 <text class='modal-titleTxt {{modalIcon}}'>{{modalTitle}}</text>
 <text class='success-msg'>{{modalDesc}}</text>
 </view>
</view>

step3:編寫樣式文件

/* 這里的樣式只應(yīng)用于這個(gè)自定義組件 */
/*successModal.wxss*/
.modal-opaci {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 100;
 height: 100%;
 width: 100%;
 background: black;
 opacity: 0.4;
 filter: alpha(opacity=40);
}
.modal-cont {
 position: fixed;
 top: 30%;
 left: 8.5%;
 z-index: 999;
 border-radius: 20rpx;
 padding: 40rpx 150rpx;
 background-color: #fff;
 text-align: center;
}
.modal-cont text {
 line-height: 90rpx;
 display: block;
}
.success {
 color: #09bb07;
}
.modal-titleTxt {
 font-size: 50rpx;
 font-weight: 700;
}
.warn {
 color: #f76260;
}

step4:編寫業(yè)務(wù)邏輯

在自定義組件的 js 文件中，需要使用 Component() 來注冊組件，組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件 wxml 的渲染，其中，屬性值是可由組件外部傳入的。

//successModal.js
Component({
 /**
 * 組件的屬性列表
 */
 properties: {
 //這里定義了modalHidden屬性，屬性值可以在組件使用時(shí)指定.寫法為modal-hidden 
 modalHidden: {
  type: Boolean,
  value: true
 },
 modalIcon: {
  type: String,
  value: ' ',
 },
 modalTitle: {
  type: String,
  value: ' ',
 },
 modalDesc: {
  type: String,
  value: ' ',
 }
 },

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

 },

 /**
 * 組件的方法列表
 */
 methods: {
 // 這里是自定義方法
 modal_click_Hidden: function () {
  this.setData({
  modalHidden: false,
  })
 },
 }
})

step5:使用自定義組件

首先在需要使用的json文件中進(jìn)行引用申明，然后需要提供每個(gè)自定義組件的標(biāo)簽名和對(duì)應(yīng)的自定義組件文件路徑。

//index.json
{
 "usingComponents": {
 "modal-success": "../../component/successModal/successModal" //在這里寫上頁面中自定義的標(biāo)簽名和自定義組件的文件路徑
 },
 "navigationBarTitleText": "首頁"
}

其次，在頁面的wxml中使用自定義組件：在頁面的 wxml 中就可以像使用基礎(chǔ)組件一樣使用自定義組件。節(jié)點(diǎn)名即自定義組件的標(biāo)簽名，節(jié)點(diǎn)屬性即傳遞給組件的屬性值。

<!--index.wxml-->
<view class="container">
 <view class="demoBtn" bindtap="bindViewTap">
 <text>點(diǎn)擊</text>
 </view>
 <!-- 調(diào)用modal組件 -->
 <modal-success modal-hidden="{{is_modal_Hidden}}" modal-icon="{{is_modal_icon}}" modal-title="{{is_modal_title}}" modal-desc="{{is_modal_desc}}" />
</view>

以上就是小程序自定義組件的demo，歡迎start。

github地址：https://github.com/ywyan/wx-component

注意點(diǎn)：

對(duì)于基礎(chǔ)庫的1.5.x版本， 1.5.7 也有部分自定義組件支持。
因?yàn)閃XML節(jié)點(diǎn)標(biāo)簽名只能是小寫字母、中劃線和下劃線的組合，所以自定義組件的標(biāo)簽名也只能包含這些字符。
自定義組件也是可以引用自定義組件的，引用方法類似于頁面引用自定義組件的方式（使用 usingComponents 字段）。
自定義組件和使用自定義組件的頁面所在項(xiàng)目根目錄名不能以“wx-”為前綴，否則會(huì)報(bào)錯(cuò)。
舊版本的基礎(chǔ)庫不支持自定義組件，此時(shí)，引用自定義組件的節(jié)點(diǎn)會(huì)變?yōu)槟J(rèn)的空節(jié)點(diǎn)。

總結(jié)

以上所述是小編給大家介紹的微信小程序之自定義組件的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: