13_微信小程序-BLE低功耗蓝牙开发-树形布局

自定义弹窗OK了，但是还得给里面填充内容。BLE的设备信息是一个设备包含了多个服务，每个服务下面又有多个特征值，所以这里最好的方式是采用树形结构的方式去展示设备相关信息，类似于如下的效果：

内容大致如下大概就是：

        服务名称

        服务UUID

        --特征值名称

        --特征值UUID

        服务名称

        服务UUID

        --特征值名称

        --特征值UUID

在网上看了一下自定义的树形组件，还是需要修改才能用，所以干脆自己写一个，因为这里只有两层，一层是服务列表，第二层是特征值列表，通过两层的wx:for实现就好了。

wxml代码：

<!--弹出内容-->
    <view class="dialogContentView">
        <text style="font-size:large">请选择ID</text>
        <scroll-view scroll-y="true" class="dialogContentScroll">
            <!--服务-->
            <block wx:for="{{devInfo}}" wx:for-item="serviceItem" wx:key="index">
                <view class="dialogContentServicesListItemView">
                    <view class="dialogContenServicesView" bindtap="serviceListItemClick" id="{{index}}">
                        <view class="dialogContentServicesTextView">
                            <text class="dialogContentServiceNameText">{{serviceItem.serviceName}}</text>
                            <text class="dialogContentServiceUUIDText">{{serviceItem.serviceUUID}}</text>
                        </view>
                        <image class="dialogContentServicesUnFoldImage" src="../image/{{serviceItem.foldFlag?'fold':'unfold'}}.png"></image>
                    </view>


                    <!--特征值-->
                    <view wx:if="{{serviceItem.serviceChars && serviceItem.foldFlag}}" wx:for="{{serviceItem.serviceChars}}" wx:for-item="charsItem" wx:key="index">
                        <view class="dialogContentCharsListItemView" id="{{index}}" bindtap="charsListItemClick">
                            <text class="dialogContentCharNameText">{{charsItem.charName}}</text>
                            <text class="dialogContentCharUUIDText">{{charsItem.charUUID}}</text>
                            <text class="dialogContentCharFlagText">{{charsItem.charWriteFlag?"可写,":""}}{{charsItem.charReadFlag?"可读,":""}}{{charsItem.charNotifyFlag||charsItem.charIndicateFlag?"可通知,":""}}</text>
                        </view>
                    </view>
                </view>
            </block>
        </scroll-view>
    </view>

 在服务列表数组里面新增了一个foldFlag变量，用以标识当前的特征值列表是否展开，在展开状态下，才去显示特征值列表，否则不显示。

样式就根据自己的需要去调整就行，我这里做了分割线，名称超过一行长度就显示省略，优化了不同信息的字体大小等等。相关图标可以在iconfont网站下载。

js数据结构

        // 设备服务信息列表
        devInfo: [
            // {
            //     foldFlag: true, // 是否展开标志，true表示已经展开
            //     serviceName: "服务名称服务名称服务名称服务名称服务名称服务名称服务名称",  // 服务名称
            //     serviceUUID: "00002a54-0000-1000-8000-00805f9b34fb",  // 服务的uuid
            //     serviceChars: [    // 服务对应的特征值列表
            //         {
            //             charName: "特征值名称1", // 特征值名称
            //             charUUID: "00002a54-0000-1000-8000-00805f9b34fb", // 特征值UUID
            //             charWriteFlag: true, // 可写标志
            //             charReadFlag: true, // 可读标志
            //             charNotifyFlag: false, // 可通知标志
            //             charIndicateFlag: false // 也是可通知标志，不过是带应答的
            //         }
            //     ]
            // }
        ],

在js文件中添加服务列表点击事件，用于服务特征值列表的展开或者收起。

    serviceListItemClick: function(e) {
        debug.Debug(BLECTR_MODUAL_NAME, debug.DEBUG_DEBUG, "点击服务", e.currentTarget.id);
        this.data.devInfo[e.currentTarget.id].foldFlag = !this.data.devInfo[e.currentTarget.id].foldFlag;
        this.setData({['devInfo['+e.currentTarget.id+'].foldFlag']:this.data.devInfo[e.currentTarget.id].foldFlag});
    },

最终的效果