小程序开发--改写HalfScreenDialog和getPhoneNumber按钮

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

利用HalfScreenDialog可以做出下方弹窗的效果，我这里做了一个用户授权手机号码的提示。

HalfScreenDialog文档

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/half-screen-dialog.html

引入HalfScreenDialog

下载组件

改写HalfScreenDialog

因为微信的设定，获取用户手机的button必须得用户手动点击去触发。

但是HalfScreenDialog中按钮的引入是通过Array来引入的。

官方示例代码

<!--WXML示例代码-->
<mp-halfScreenDialog 
  bindbuttontap="buttontap"
  show="{{show}}"
  maskClosable="{{false}}" 
  title="测试标题B" 
  subTitle="测试标题B的副标题"
  desc="辅助描述内容，可根据实际需要安排"
  tips="辅助提示内容，可根据实际需要安排"
  buttons="{{buttons}}"
></mp-halfScreenDialog>
<button class="weui-btn" type="primary" bindtap="open">Open</button>

// page.js示例代码
Page({
    data: {
        show: false,
        buttons: [
            {
                type: 'default',
                className: '',
                text: '辅助操作',
                value: 0
            },
            {
                type: 'primary',
                className: '',
                text: '主操作',
                value: 1
            }
        ]
    },
    open: function () {
        this.setData({
            show: true
        })
    },
    buttontap(e) {
        console.log(e.detail)
    }
});

但是getPhoneNumber的button必须设置open—type属性

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

刚开始想过直接在array里面加入open-type属性，但是编译直接报错。
所以还是得改原来的组件。

步骤

首先就是不使用array来引入按钮组，把array整个删掉。
改写half-screen-dialog.wxml

<view class="{{show ? 'weui-show' :'weui-hidden'}}">
  <view class="weui-mask init" wx:if="{{mask}}" bindtap="close" data-type="tap"></view>
  <view class="weui-half-screen-dialog {{extClass}}">
    <view class="weui-half-screen-dialog__hd">
      <view wx:if="{{closabled}}" class="weui-half-screen-dialog__hd__side" bindtap="close" data-type="close">
        <view class="weui-icon-btn weui-icon-btn_close">关闭</view>
      </view>
      <view class="weui-half-screen-dialog__hd__main">
        <block wx:if="{{title}}">
          <text class="weui-half-screen-dialog__title">{{title}}</text>
          <text class="weui-half-screen-dialog__subtitle">{{subTitle}}</text>
        </block>
        <block wx:else>
          <view class="weui-half-screen-dialog__title">
            <slot name="title"></slot>
          </view>
        </block>
      </view>
      <view class="weui-half-screen-dialog__hd__side">
        <view class="weui-icon-btn weui-icon-btn_more">更多</view>
      </view>
    </view>
    <view class="weui-half-screen-dialog__bd">
      <block wx:if="{{title}}">
        <view class="weui-half-screen-dialog__desc">{{desc}}</view>
        <view class="weui-half-screen-dialog__tips">{{tips}}</view>
      </block>
      <slot name="desc" wx:else></slot>
    </view>
    <view class="weui-half-screen-dialog__ft">
    <!-- 注釋掉原來的部分，原來的部分是遍歷出array進行渲染-->
      <!-- <block wx:if="{{buttons && buttons.length}}"> -->
      <!-- <button 
          wx:for="{{buttons}}" 
          wx:key="{{item.text + item.index}}"
          type="{{item.type}}" 
          class="weui-btn {{item.className}}" 
          data-index="{{index}}" 
          bindtap="buttonTap"
          open-type="{{item.open_type}}"
          bindgetphonenumber="{{item.bindgetphonenumber}}"
        >{{item.text}}</button> -->
      <!-- <view wx:for="{{buttons}}" class="weui-dialog__btn {{}} {{item.extClass}}" ></view> -->
      <!-- </block> -->
 
      <!--自己寫兩個array 其他一個是getPhoneNumber按鈕 -->
      <button type="default" style="float:left;margin-top:-15px;" class="weui-btn" data-index="0" bindtap="buttonTap">取消</button>
      <button type="primary" style="float:right;margin-top:-15px;" class="weui-btn" data-index="1" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权</button>
    </view>
  </view>
</view>

在half-screen-dialog.js中重写method部分

methods: {
          close: function close(e) {
            var type = e.currentTarget.dataset.type;

            if (this.data.maskClosable || type === 'close') {
              this.setData({
                show: false
              });
              this.triggerEvent('close');
            }
          },
          buttonTap: function buttonTap(e) {
            console.log(e);
            var index = e.currentTarget.dataset.index;
            if (index == 0) {
              this.triggerEvent('buttontap', {
                index: index,
                item: this.data.buttons[index]
              }, {});
            }
            if (index == 1) {
              this.triggerEvent('buttontap', {
                index: index,
                detail: e.detail,
                item: this.data.buttons[index]
              }, {});
            }


          },
          getPhoneNumber: function getPhoneNumber(e) {
            var new_e = e;
            console.log(JSON.stringify(new_e));
            var index = e.currentTarget.dataset.index;
            new_e.index = index;
            this.buttonTap(new_e);
          }
        },

getPhoneNumber 接收传回来的密文等数据，然后再调用 buttonTap传数据回原来页面。

来源：oschina

链接：https://my.oschina.net/u/3466165/blog/3146702

标签

小程序开发文档

按钮

WeUI

dialog