ionic3蓝牙搜索列表，缓冲圈和提示（typescript）

最新推荐文章于 2021-11-26 15:28:23 发布

是阿晋啊

最新推荐文章于 2021-11-26 15:28:23 发布

阅读量721

点赞数

CC 4.0 BY-SA版权

分类专栏：软件文章标签： ionic 蓝牙

本文链接：https://blog.youkuaiyun.com/qq_38255285/article/details/85797882

软件专栏收录该内容

19 篇文章

订阅专栏

本文介绍了在Ionic3项目中如何实现蓝牙设备搜索列表的显示和刷新功能。通过`list()`和`refresh()`两个函数来处理列表操作，利用loading组件呈现缓冲效果，用Toast提供刷新成功的提示。为了代码复用，创建了公共文件`baseui.ts`，在blesetting组件中继承并调用。在前端界面，通过ion-icon的刷新图标触发刷新操作，使用ngFor循环显示后台数据。同时，添加判断确保只有在蓝牙开启时才显示相关列表，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表显示和刷新我主要写在两个函数list()和refresh()中

public bluetoothList:any;

  list(){
    this.bleSerial.list().then(
      data =>{
        this.bluetoothList=data;
      }).catch(()=>{
        this.errDeal("蓝牙错误");
      })
  }

然后编写refresh()函数

  refresh(){
    if(this.settings.blestatebool == true){
          var loading = super.showLoading(this.loadCtrl,"刷新中");
    this.bleSerial.discoverUnpaired().then(
      data =>{
        this.bluetoothNewList=data;
        loading.dismiss();
        super.showToast(this.toastCtrl,"刷新成功");
      }).catch(()=>{
        this.errDeal("蓝牙错误");
      loading.dismiss();
      })  
    }else{
         this.errDeal("请打开蓝牙");
    }
  }

1.这里使用loading，就是在未响应之前都会是有一个圈的状态，2.是也是用Toast进行一个刷新成功提醒，

新建一个文件夹，新建一个文件叫common，创建一个文件叫baseui.ts，

import { Loading, LoadingController, ToastController, Toast } from 'ionic-angular';

  protected showLoading(loadingCtrl: LoadingController,
        message: string): Loading {
        let loader = loadingCtrl.create({
            content: message,
            dismissOnPageChange: true //页面变化的时候自动关闭 loading
        });
        loader.present();
        return loader;
    }

    protected showToast(toastCtrl: ToastController, message: string): Toast {
        let toast = toastCtrl.create({
            message: message,
            duration: 3000, //默认展示的时长
            position: 'bottom'
        });
        toast.present();
        return toast;
    }

使用单独文件的作用，是可以作为一个公有文件，方便继承，需要使用的函数都可以使用。

在blesettings中导入BaseUI，并且使构造函数继承BaseUI

import { BaseUI } from '../../common/baseui';

export class BlesettingsPage extends BaseUI  implements OnInit

在blesetting的前端h5界面中地面设置按钮进行刷新，调用ion-icon中刷新图标

     <ion-footer>
           <button ion-button  block (click)="refresh()">     
            <ion-label> <ion-icon name="refresh-circle" ></ion-icon>刷新</ion-label>
          </button> 
     </ion-footer>

同时也把刷新和列表文件放在之前写的blechange和oninit函数中，这里就不在赘述。

前端使用ngfor方法对后端的list进行循环显示

 <ion-list>
        <ion-label stacked>已匹配的蓝牙</ion-label>      
        <button  ion-item *ngFor="let p of this.bluetoothList;let i=index">
              {{p.name}} ({{p.address}})  
        </button>
</ion-list>

这里前端增加一定的判定，使前端布局更加的合理，在后端对bleon和bleoff进行赋值。

判定必须在蓝牙打开的时候才有显示，否则没有显示，虽然蓝牙关闭的时候列表是没有显示的可是会显示出已匹配的蓝牙几个字，比较丑陋，xxx里面写上语句