04_微信小程序-BLE低功耗蓝牙开发-搜索界面UI布局

其实到目前为止，我还没有做过微信小程序的开发，只是有一点界面开发的知识和概念，下面我将尝试开发蓝牙搜索界面的UI。

蓝牙搜索界面：

根据蓝牙搜索界面的布局，设备显示列表会用到：文本控件、列表显示控件。控制部分会用到：按键控件，进度条控件，其实我也不知道微信小程序里面现在的这些控件是怎么用的，只能现学现卖。

1. 大致看来一下微信的Demo，布局都是通过View来控制的，感觉有点基础了，直接开干。删除index.wxml文件里面的内容，只留下一个主view，样式引用的是app.wxss里面的container

        

        然后把app.json里面导航栏名称修改为BLETools，就得到如下界面了：

        

        感觉离成功又近了一步。

2. 添加一个列表控件，当然我现在也不会，直接百度。参考： 微信小程序——卡片列表显示listview（带阴影）_wy313622821的博客-优快云博客_小程序卡片列表

         修改index.wxml文件

        

        现在我也不知道对不对，应该不行，没有添加样式，显示肯定是有问题的，先不管

3. 添加数据，修改index.js文件  

        

        添加了两个数据，哈哈，大致的效果出来了，不过没有排版，格式显示很乱，不过没关系，只要我们把样式文件加进入就好了。

4. 添加样式，修改index.wxss文件

        添加list每个元素的样式后，效果还不错

        

        但是MAC地址和信号强度显示挤到一起了，感觉是文字太大了，需要把文字调小。

        设备名称样式，这里考虑到设备名称太长，显示不下，所以设置为超过一行就自动隐藏

        

        Mac地址和信号强度

        

        广播数据，由于广播数据一般都很长，所以需要用较小的文字，并且要多行显示，这里设置为不超过三行

        

        最终的效果：

        

5. 添加搜索按键和搜索状态指示

        为了达到指定的效果，就需要设置设备列表框占据整个页面的达部分（90%），剩下的留给按键和搜索状态指示，百度了一下，环形进度条只能自定义组件实现，暂时只添加按键。

        bleDevListView我设置的高度是占整个页面的90%。如果只是设置这里，发现设置不会生效，还需要在app.wxss里面新增page样式

            

        做完后，发现listView会超出区域的显示，百度了一下，发现是需要用到可滚动视图的scroll-view控件，修改布局文件

        scroll-view用法可参考：微信小程序把玩（九）scroll-view组件_FUCK-优快云博客_小程序scroll-view

         

        该控件一定要指定高度，否则不生效

        

        完成按键后的效果 

        

        到此UI界面的布局工作完成了，下面就应该来处理List元素点击事件、按键点击事件了