小程序自定義組件實(shí)現(xiàn)

在日常開發(fā)中奢讨，經(jīng)常會(huì)有代碼復(fù)用的情況，比如在很多個(gè)頁面里橄镜，發(fā)現(xiàn)用戶沒有登錄需要彈框登錄的時(shí)候偎快，比如多個(gè)頁面頂部都有一個(gè)搜索框或者列表底部的暫無數(shù)據(jù)等等。

這個(gè)時(shí)候我們可以將頁面內(nèi)的功能模塊抽象成自定義組件洽胶，以便在不同的頁面中重復(fù)使用；也可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊裆馒，有助于代碼維護(hù)姊氓。

這里舉一個(gè)彈出框登錄組件的例子：進(jìn)入小程序獲取到用戶昵稱和頭像，點(diǎn)擊登錄把當(dāng)前頁面的用戶昵稱和頭像傳給組件喷好，然后在組件里將登錄狀態(tài)返回給頁面翔横。效果如下：

1.新建小程序項(xiàng)目，然后在項(xiàng)目里新建一個(gè)components文件夾存放組件梗搅，在components目錄下創(chuàng)建login目錄禾唁，在login目錄下右鍵新建Component輸入名稱login然后回車，組件就創(chuàng)建好了无切，如下：

<!-- 登錄組件 -->
<!-- 背景遮罩層 -->
<view class="modal-mask" bindtap="hideRegistModal" wx:if="{{!registModalHidden}}"></view>
<!-- 登錄彈框 -->
<view class="modal-login" wx:if="{{!registModalHidden}}">
  <view class="~userinfo">
    <image bindtap="bindViewTap" class="~userinfo-avatar" src="{{pic}}" mode="cover"></image>
    <text class="~userinfo-nickname">{{nickname}}</text>
  </view>
  <button class="~button" bindtap="login">確認(rèn)登錄</button>
</view>

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    pic: {
      type: "String",
      value: ''
    },
    nickname: {
      type: "String",
      value: ''
    }
  },
  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    registModalHidden: false
  },
  /**
   * 組件的方法列表
   */
  methods: {
    /**
     * 確認(rèn)登錄
     */
    login: function() {
      /**修改父頁面登錄數(shù)據(jù) */
      var pages = getCurrentPages();
      pages[0].setData({
        login_status: "已登錄"
      })
      /**隱藏彈框 */
      this.setData({
        registModalHidden: true
      });
    },
  }
})

/**登錄彈框*/
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}
.modal-login {
  width: 620rpx;
  height: 526rpx;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  z-index: 9999;
  background-color: #ffffff;
    border-radius: 15rpx;
}

2.在引用組件的頁面的json文件里配置組件
index.json:

{
  "usingComponents": {
    "loginDialog": "/components/login/login"
  }
}

3.在頁面引入組件
index.wxml:

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <button class="button" bindtap="showLogin">{{login_status}}</button>
  </view>
</view>
<!-- 引入組件 -->
<loginDialog wx:if="{{showLogin}}" pic='{{userInfo.avatarUrl}}' nickname='{{userInfo.nickName}}' >
</loginDialog>

index.js:

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()

Page({
  data: {
    login_status: '點(diǎn)我彈出組件并傳值給組件',
    showLogin:false,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  showLogin:function(){
    this.setData({
      showLogin: true
    })
  },
  //事件處理函數(shù)
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求哆键，可能會(huì)在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

index.wxss:

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}
.button {
  margin-top: 60px;
  font-weight: normal;
  background-color: #1c9dff;
  color: #fff;
}

這樣我們就成功創(chuàng)建一個(gè)組件了掘托，在小程序的其他頁面需要用到這個(gè)登錄彈框時(shí)直接引用就可以，而不用在每個(gè)頁面都寫一個(gè)彈框籍嘹。關(guān)于組件的更多用法點(diǎn)擊這里

原文作者技術(shù)博客：http://www.reibang.com/u/ac4daaeecdfe