最近在做小程序的登錄，需要同時獲取用戶手機號和頭像昵稱等信息，但是小程序又不支持單個接口同時獲取兩種數據，因此想到自定義一個彈窗，通過彈窗按鈕觸發獲取手機號事件。記錄一下。

具體代碼如下：

業務代碼中：

　　在業務代碼中引入dialog組件即可

<dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="測試一下">　　　　<view class='dialog-body' slot="dialog-body">　　　　　　<view class='dialog-content'>申請獲取你微信綁定的手機號</view>　　　　　　<view class='dialog-footer' slot="dialog-footer">　　　　　　　　<button class='cancel-btn' bindtap="close">取消</button>　　　　　　　　<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class='confirm-btn'>授權</button>　　　　　　</view>　　　　</view>　　</dialog>

dialog組件：

component下面新建dialog。注意是 component 不是 page ，因為要作為組件引入到頁面中

　　dialog.wxml:

　　需要傳入四個屬性

　　　　visible：是否顯示彈窗

　　　　title ：標題

　　　　showClose：是否顯示右上角關閉按鈕

　　　　showFooter：是否顯示底部按鈕

<!--components/dialog/dialog.wxml--><view class='dialog-custom' wx:if="{{visible}}">　　<view class='dialog-mask' bindtap="clickMask"></view>　　　　<view class="dialog-main">　　　　　　<view class="dialog-container">　　　　　　　　<view class='dialog-container__title' wx:if="{{title.length>0}}">　　　　　　　　　　<view class='title-label'>{{ title }}</view>　　　　　　　　　　<view class='title-icon'>　　　　　　　　　　　　<image wx:if="{{showClose}}" bindtap='close' src='/images/close-btn.png'></image>　　　　　　　　　　</view>　　　　　　　　</view>　　　　　　<view class='dialog-container__body'>　　　　　　　　<slot name="dialog-body"></slot>　　　　　　</view>　　　　　　<view class='dialog-container__footer' wx:if="{{showFooter}}">　　　　　　　　<view class='dialog-container__footer__cancel' bindtap="close">取消</view>　　　　　　　　<view class='dialog-container__footer__confirm' bindtap='confirm'>確定</view>　　　　　　</view>　　　　</view>　　</view></view>