12_微信小程序-BLE低功耗蓝牙开发-自定义弹窗界面

在获取服务列表和特征值列表完成后，需要把相关的信息呈现出来，这里采用一个弹窗界面，把服务ID和特征值ID显示出来。微信小程序的原生弹窗不能满足需求，这里只有自定义弹窗窗界面了。

wxml代码：

<!--弹出框-->
<!--要加上catchtouchmove="dialogViewTouchMove"，否则页面可滑动-->
<view class="dialogView" catchtouchmove="dialogViewTouchMove" wx:if="{{dialogViewShowFlag}}">
    <!--遮罩，用来处理弹出框之外区域的点击事件，并且防止点击事件穿透-->
    <view class="dialogMaskView" catchtap="dialogMashViewClick">
        <!--文本输入框遮罩，防止弹出框底层有文本框，输入事件就直接穿透过去了-->
        <textarea class="dialogMaskTextarea" disabled="{{true}}"></textarea>
    </view>
    <!--弹出内容-->
    <view class="dialogContentView">
        <text>弹出内容、弹出内容</text>
        <button bindtap="dialogContentButtonClick">按钮</button>
    </view>
</view>

wxss代码:

/*弹出框样式*/
.dialogView {
    width: 100%;
    height: 100%;
    /*设置弹出框在那一层，数值约大，越前面*/
    z-index: 9998;
}
/* 遮罩层 */
.dialogMaskView{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
}
/*遮罩层里面的文本输入框*/
.dialogMaskTextarea {
    width: 100%;
    height: 100%;
}


/* 内容层 */
.dialogContentView{
    height: 80%;
    width: 80%;
    /*设置弹出框在那一层，数值约大，越前面，设置内容层在弹出层的前面*/
    /* z-index: 9999; */
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #fff;
    border-radius:5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

在js文件中增加了一个点击内容层之外区域自动隐藏弹出窗的功能

dialogMashViewClick: function(e) {
        debug.Debug(BLECTR_MODUAL_NAME, debug.DEBUG_DEBUG, "dialogMashViewClick");
        // 点击内容层之外区域（遮罩层），隐藏弹出窗口
        this.data.dialogViewShowFlag = false;
        this.setData({['dialogViewShowFlag']: this.data.dialogViewShowFlag});
    },

最终的效果：

弹出界面有三个需要注意的地方

1. 弹出层导致页面可滑动问题

        在弹出窗口的view里面加上 catchtouchmove="dialogViewTouchMove" ，dialogViewTouchMove函数实现为空，用以拦截触摸滑动事件

2. 单击事件穿透（单击事件冒泡）

        当点击弹出层的时候，如果主页面对应的位置有按键，那个按键会响应，这个就是事件穿透了，需要阻止

        在遮罩层里面加入 catchtap="dialogMashViewClick" ，用以拦截点击事件。不要用bindtap，bindtap没有办法阻止事件冒泡问题。用户点击界面后，单击事件会一层一层的向父元素传递，直到遇到catchtap。

3. 输入框（input，texterea）输入穿透事件

        这个问题和单击事件类似，就是点击弹出窗的时候，如果主页面对应的位置有输入框，就会弹出键盘，并响应输入事件，这个是不愿意看到的。我尝试过用view去阻止，发现不行，所以在遮罩层里面又包裹了一个texteara控件，该控件和屏幕一样大，并且设置该控件不可用，用以屏蔽输入事件。