uni-app入门教程(6)接口的扩展应用

CuterCorley 等级 416 0 0

前言

本文主要介绍了接口的扩展应用:设备相关的接口包括获取系统信息、网络状态、拨打电话、扫码等;导航栏的动态设置;下拉刷新、上拉加载更多的实现,通过动作链获取节点信息;用条件编译实现小程序、APP等多端兼容;提示框、Loading、模态弹窗等的交互反馈。

一、设备相关

1.系统信息

uni.getSystemInfo(OBJECT)接口用来异步获取系统信息。 OBJECT常见参数和含义如下: 参数名 |类型| 是否必填| 说明 -----|-----|-----|----- success| Function| 是| 接口调用成功的回调 fail |Function| 否| 接口调用失败的回调函数 complete| Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

success返回的常见参数和含义如下: 参数| 说明 -----|----- brand| 手机品牌 model| 手机型号
pixelRatio| 设备像素比
screenWidth| 屏幕宽度
screenHeight| 屏幕高度
windowWidth |可使用窗口宽度
windowHeight| 可使用窗口高度
windowTop |可使用窗口的顶部位置 windowBottom| 可使用窗口的底部位置 version |引擎版本号

hello uniapp项目中,index.vue如下:

<template>
    <view>
        <button type="primary" @click="getinfo">获取系统信息</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {
            getinfo: function(){
                uni.getSystemInfo({
                    success:function(res){
                        console.log(res)
                    }
                })
            }
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(6)接口的扩展应用

可以获取到当前设备比较全面的信息; 其中,pixelRatio是设备像素比,可以根据该值和实际设备计算选择合适的像素值。

除了使用uni.getSystemInfo(OBJECT)异步获取设备信息,还可以使用uni.getSystemInfoSync()同步获取系统信息; uni.canIUse(String)可用于判断应用的 API、回调、参数、组件等是否在当前版本可用。

2.网络状态

uni.getNetworkType(OBJECT)用来获取网络类型。 OBJECT常见参数如下: 参数名| 类型| 必填| 说明 -----|-----|-----|----- success| Function| 是| 接口调用成功,返回网络类型 networkType fail| Function| 否| 接口调用失败的回调函数 complete| Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

uni.onNetworkStatusChange(CALLBACK)用于监听网络状态变化。 CALLBACK返回参数及含义如下: 参数| 类型| 说明 -----|-----|----- isConnected| Boolean| 当前是否有网络连接 networkType |String| 网络类型

如下:

<template>
    <view>
        <button type="primary" @click="getNetworkType">获取网络类型</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onLoad() {
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {
            getNetworkType: function(){
                uni.getNetworkType({
                    success:function(res){
                        console.log(res.networkType);
                    }
                });
                uni.onNetworkStatusChange(function(res){
                    console.log(res)
                })
            },
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(6)接口的扩展应用

可以看到,获取到了当前的网络类型。

3.加速度计

uni.onAccelerometerChange(CALLBACK)用于监听加速度数据,频率为5次/秒,接口调用后会自动开始监听,可使用uni.offAccelerometer取消监听。 CALLBACK 返回参数和含义如下: 参数| 类型| 说明 -----|-----|----- x| Number| X 轴 y| Number| Y 轴 z| Number| Z 轴

uni.startAccelerometer(OBJECT)用于开始监听加速度数据。 OBJECT参数和含义如下: 参数名| 类型| 默认| 必填| 说明 -----|-----|-----|-----|----- interval| String| normal| 否| 接口调用成功的回调 success |Function|无| 否| 接口调用成功的回调
fail |Function| 无| 否| 接口调用失败的回调函数
complete| Function|无| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

uni.stopAccelerometer(OBJECT)用于停止监听加速度数据。 OBJECT 参数和含义如下: 参数名| 类型| 必填| 说明 -----|-----|-----|----- success| Function| 否| 接口调用成功的回调 fail |Function| 否| 接口调用失败的回调函数 complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

4.拨打电话

uni.makePhoneCall(OBJECT)用于拨打电话。

OBJECT 参数如下: 参数名| 类型| 必填| 说明 -----|-----|-----|----- phoneNumber| String| 是| 需要拨打的电话号码 success |Function| 否| 接口调用成功的回调 fail| Function| 否| 接口调用失败的回调函数 complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

如下:

<template>
    <view>
        <button type="primary" @click="tel">拨打电话</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onLoad() {
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {
            tel: function(){
                uni.makePhoneCall({
                    phoneNumber: '10086'
                })
            },
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(6)接口的扩展应用

可以看到,模拟了拨打电话。

除了拨打电话,还可以实现发送短信等。

5.扫码

uni.scanCode(OBJECT)用于调起客户端扫码界面,并在扫码成功后返回对应的结果。

OBJECT 参数及其含义如下: 参数名| 类型| 必填| 说明 -----|-----|-----|----- onlyFromCamera| Boolean| 否| 是否只能从相机扫码,不允许从相册选择图片 scanType |Array| 否| 扫码类型,参数类型是数组,二维码是'qrCode',一维码是'barCode',DataMatrix是‘datamatrix’,pdf417是‘pdf417’ success| Function| 否| 接口调用成功的回调
fail| Function| 否| 接口调用失败的回调函数(识别失败、用户取消等情况下触发)
complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

其中,success 返回参数如下: 参数| 说明 -----|----- result| 所扫码的内容
scanType| 所扫码的类型 charSet |所扫码的字符集 path |当所扫的码为当前应用的合法二维码时,会返回此字段,内容为二维码携带的 path

简单使用如下:

<template>
    <view>
        <button type="primary" @click="sca">扫描二维码</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onLoad() {
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {
            sca: function(){
                uni.scanCode({
                    success:function(res){
                        console.log(res)
                    }
                })
            },
        }
    }
</script>

<style>

</style>

6.剪贴板

uni.setClipboardData(OBJECT)用于设置系统剪贴板的内容。 OBJECT参数和含义如下: 参数名| 类型| 必填| 说明 -----|-----|-----|----- data| String| 是| 需要设置的内容 success| Function| 否| 接口调用成功的回调 fail |Function| 否| 接口调用失败的回调函数 complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

uni.getClipboardData(OBJECT)用于获取系统剪贴板内容。 OBJECT 参数和含义如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- success| Function| 否| 接口调用成功的回调 fail |Function| 否| 接口调用失败的回调函数 complete| Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

如下:

<template>
    <view>
        <button type="primary" @click="sca">复制文字</button>
        <text>{{txt}}</text>
    </view>
</template>

<script>
    var _self;
    export default {
        data() {
            return {
                txt: "hello"
            }
        },
        onLoad() {
            _self = this
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

            sca: function(){
                uni.setClipboardData({
                    data: 'https://blog.csdn.net/CUFEECR',
                    success:function(res){
                        console.log(res);
                        uni.getClipboardData({
                            success:function(gres){
                                console.log(gres.data)
                                _self.txt = gres.data
                            }
                        })
                    }
                })
            },
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(6)接口的扩展应用

7.屏幕

uni.setScreenBrightness(OBJECT)用于设置屏幕亮度。 OBJECT 参数如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- value| Number| 是| 屏幕亮度值,范围 0~1,0 最暗,1 最亮 success| Function| 否| 接口调用成功的回调 fail |Function| 否| 接口调用失败的回调函数 complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

uni.getScreenBrightness(OBJECT)用于获取屏幕亮度。 OBJECT 参数如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- success| Function| 否| 接口调用成功的回调 fail |Function| 否| 接口调用失败的回调函数 complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

uni.setKeepScreenOn(OBJECT)用于设置是否保持常亮状态。仅在当前应用生效,离开应用后设置失效。 OBJECT 参数如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- keepScreenOn| Boolean| 是| 是否保持屏幕常亮 success| Function| 否| 接口调用成功的回调 fail |Function| 否| 接口调用失败的回调函数 complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

例如:

<template>
    <view>
        <button type="primary" @click="srn">设置屏幕亮度</button>
    </view>
</template>

<script>
    var _self;
    export default {
        data() {
            return {
                txt: "hello"
            }
        },
        onLoad() {
            _self = this
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {            
            srn: function(){
                uni.setScreenBrightness({
                    value: 0.1,
                    success:function(){
                        console.log('set success')
                    }
                })
            },
        }
    }
</script>

<style>

</style>

7.振动

uni.vibrate(OBJECT)用于使手机发生振动。

OBJECT 参数如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- success| Function| 否| 接口调用成功的回调 fail |Function| 否| 接口调用失败的回调函数 complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

uni.vibrateLong(OBJECT)用于使手机发生较长时间的振动(400ms),uni.vibrateShort(OBJECT)用于使手机发生较短时间的振动(15ms),OBJECT参数与uni.vibrate(OBJECT)相同。

8.手机联系人

uni.addPhoneContact(OBJECT)调用后,用户可以选择将该表单以“新增联系人”或“添加到已有联系人”的方式,写入手机系统通讯录,完成手机通讯录联系人和联系方式的增加。 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- photoFilePath| String| 否| 头像本地文件路径 lastName| String| 否| 姓氏 firstName| String| 是| 名字 mobilePhoneNumber| String| 否| 手机号 workPhoneNumber| String| 否| 工作电话 email| String| 否| 电子邮件 url| String| 否| 网站 success| Function| 否| 接口调用成功的回调 fail |Function| 否| 接口调用失败的回调函数 complete| Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

二、导航设置

之前导航栏是通过配置实现的,但是不够灵活,这时可以使用接口实现导航栏。

uni.setNavigationBarTitle(OBJECT)用于动态设置当前页面的标题。 OBJECT参数如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- title| String| 是| 页面标题 success| Function| 否| 接口调用成功的回调 fail |Function| 否| 接口调用失败的回调函数 complete| Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

uni.setNavigationBarColor(OBJECT)用于设置页面导航条颜色。如果需要进入页面就设置颜色,请延迟执行,防止被框架内设置颜色逻辑覆盖。 OBJECT参数如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- frontColor| String| 是| 前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000 backgroundColor |String| 是| 背景颜色值,有效值为十六进制颜色
animation| Object| 否| 动画效果,{duration,timingFunc} success| Function| 否| 接口调用成功的回调函数
fail |Function| 否| 接口调用失败的回调函数
complete| Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

uni.showNavigationBarLoading(OBJECT)用于在当前页面显示导航条加载动画,uni.hideNavigationBarLoading(OBJECT)在当前页面隐藏导航条加载动画。 它们的OBJECT参数如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- success| Function| 否| 接口调用成功的回调函数
fail |Function| 否| 接口调用失败的回调函数
complete| Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

示例如下:

<template>
    <view>
        <button type="primary" @click="setTitle">设置标题</button>
    </view>
</template>

<script>
    var _self;
    export default {
        data() {
            return {
                txt: "hello"
            }
        },
        onLoad() {
            uni.showNavigationBarLoading();
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {            
            setTitle: function(){
                uni.setNavigationBarTitle({
                    title: 'hello...'
                });
                uni.hideNavigationBarLoading();
            },
        }
    }
</script>

<style>

</style>

显示: uni-app入门教程(6)接口的扩展应用

可以看到,实现了设置标题和控制加载。

三、界面下拉、上拉和节点信息

1.下拉刷新

onPullDownRefresh是一个处理函数,和onLoad等生命周期函数同级,用于监听该页面用户下拉刷新事件。 使用前,需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh; 当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

uni.startPullDownRefresh(OBJECT)用于开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- success| Function| 否| 接口调用成功的回调函数
fail |Function| 否| 接口调用失败的回调函数
complete| Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

uni.stopPullDownRefresh()用于停止当前页面下拉刷新。

如下:

<template>
    <view>
        <view v-for="(item, index) in newslist" class="newslist">{{item}}</view>
    </view>
</template>

<script>
    var _self;
    export default {
        data() {
            return {
                newslist: []
            }
        },
        onLoad() {
            _self = this
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        onPullDownRefresh() {
            this.getNews()
        },
        methods: {            
            getNews: function() {
                uni.showNavigationBarLoading();
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=1',
                    success:function(res){
                        console.log(res);
                        var newslist = res.data.split('--hcSplitor--');
                        _self.newslist = newslist;
                        uni.stopPullDownRefresh();
                        uni.hideNavigationBarLoading();
                    }
                })
            }
        }
    }
</script>

<style>
    .newslist {
        line-height: 2em;
        padding: 20px;
    }
</style>

显示: uni-app入门教程(6)接口的扩展应用

可以看到,实现了下拉刷新加载数据。

2.案例--上拉加载更多

上拉加载更多有两种实现方式:

  • 通过scroll-view组件,识别滚动区域,滚动到底部出发加载事件;
  • 识别页面滚动到底部来触发加载事件。

这里使用第二种方式,即生命周期函数onReachBottom来实现,即滚动条滚动到底部时触发事件。

初步实现如下:

<template>
    <view>
        <view v-for="(item, index) in newslist" class="newslist">{{item}}</view>
    </view>
</template>

<script>
    // 添加page全局变量
    var _self, page;
    export default {
        data() {
            return {
                newslist: []
            }
        },
        onLoad() {
            _self = this
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        onPullDownRefresh() {
            this.getNews()
        },
        onReachBottom() {
            this.getMoreNews()
        },
        methods: {            
            getNews: function() {
                page = 1;
                uni.showNavigationBarLoading();
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
                    success:function(res){
                        console.log(res);
                        var newslist = res.data.split('--hcSplitor--');
                        _self.newslist = _self.newslist.concat(newslist);
                        uni.stopPullDownRefresh();
                        uni.hideNavigationBarLoading();                        
                        page++;
                    }
                })
            },
            getMoreNews: function() {
                uni.showNavigationBarLoading();
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
                    success:function(res){
                        console.log(res);
                        uni.hideNavigationBarLoading();
                        if(res.data == null){
                            return false
                        };
                        var newslist = res.data.split('--hcSplitor--');
                        _self.newslist = newslist;
                        uni.stopPullDownRefresh();
                        page++;
                    }
                })
            }
        }
    }
</script>

<style>
    .newslist {
        line-height: 2em;
        padding: 20px;
    }
</style>

其中,添加全局变量page用于指定需要请求的数据的页数; 定义函数分别实现第一次获取数据和加载更多数据。

显示: uni-app入门教程(6)接口的扩展应用

可以看到,加载了2页数据后,就不能再加载数据了。

此时还可以进行完善,如添加“加载更多”文本提示。 如下:

<template>
    <view>
        <view v-for="(item, index) in newslist" class="newslist">{{item}}</view>
        <view class="loading">{{loadingText}}</view>
    </view>
</template>

<script>
    // 添加page、timer全局变量
    var _self, page, timer = null;
    export default {
        data() {
            return {
                newslist: [],
                loadingText: "下拉加载"
            }
        },
        onLoad() {
            _self = this
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        onPullDownRefresh() {
            this.getNews()
        },
        onReachBottom() {            
            if(timer != null){
                clearTimeout(timer)
            };
            timer = setTimeout(function(){
                _self.getMoreNews()
            }, 500);
        },
        methods: {            
            getNews: function() {
                page = 1;
                uni.showNavigationBarLoading();
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
                    success:function(res){
                        console.log(res);
                        var newslist = res.data.split('--hcSplitor--');
                        _self.newslist = _self.newslist.concat(newslist);
                        uni.stopPullDownRefresh();
                        uni.hideNavigationBarLoading();                        
                        page++;
                    }
                })
            },
            getMoreNews: function() {
                if(_self.loadingText == "已加载完毕"){
                    return false
                };
                _self.loadingText = "加载中";
                uni.showNavigationBarLoading();
                uni.request({
                    url: 'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
                    success:function(res){
                        console.log(res);
                        uni.hideNavigationBarLoading();
                        if(res.data == null){
                            _self.loadingText = "已加载完毕";
                            return false
                        };
                        var newslist = res.data.split('--hcSplitor--');
                        _self.newslist = newslist;
                        uni.stopPullDownRefresh();
                        _self.loadingText = "加载更多";
                        page++;
                    }
                })
            }
        }
    }
</script>

<style>
    .newslist {
        line-height: 2em;
        padding: 20px;
    }
    .loading {
        line-height: 2em;
        text-align: center;
        color: #DD524D;
        margin-top: 30px;
    }
</style>

使用延时器让页面先渲染完,再加载数据; 同时在getMoreNews函数中,先判断是否加载完毕,如果已加载完毕则可以不再执行该函数。

显示: uni-app入门教程(6)接口的扩展应用

显然,此时表现更好。

3.获取节点信息

uni.createSelectorQuery()创建一个 SelectorQuery 对象,这个对象可以调用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息; selectorQuery.select(selector)在当前页面下选择第一个匹配选择器 selector 的节点,返回一个 NodesRef 对象实例,可以用于获取节点信息; nodesRef.fields(object,callback)获取节点的相关信息,第一个参数是节点相关信息配置(必选),第二参数是方法的回调函数,参数是指定的相关节点信息; selectorQuery.exec(callback)执行所有的请求,请求结果按请求次序构成数组,在callback的第一个参数中返回。

其中,nodesRef.fields(object,callback)的object参数的常见属性和含义如下: 字段名| 类型| 默认值| 必填|含义 -----|-----|-----|-----|----- id| Boolean| false| 否| 是否返回节点 id
dataset| Boolean| false| 否| 是否返回节点 dataset App、微信小程序、H5 rect| Boolean| false| 否| 是否返回节点布局位置(left right top bottom)
size |Boolean| false| 否| 是否返回节点尺寸(width height)
scrollOffset |Boolean| false| 否| 是否返回节点的 scrollLeft scrollTop,节点必须是 scroll-view 或者 viewport

简单使用如下:

<template>
    <view class="">
        <view class="" style="width: 500upx; height: 300upx; background: #F0AD4E;" id="demo">
            Container
        </view>
    </view>
</template>

<script>
    var _self;
    export default {
        data() {
            return {

            }
        },
        onLoad() {
            _self = this;
        },
        onReady: function() {
            console.log('Ready...');
            uni.createSelectorQuery().select('#demo').fields({
                size: true,
                id: true,
                rect: true,
                scrollOffset: true
            }, function(res) {
                console.log(res)
            }).exec()
        },
        onShow() {},
        onHide() {},
        methods: {},
    }
</script>

<style>

</style>

显示: uni-app入门教程(6)接口的扩展应用

可以看到,获取到了指定元素的相关信息; 返回的节点信息中包含了元素的大小,包括尺寸和布局位置等,可以根据这些数据结合uni.getSystemInfo(OBJECT)获取到的设备像素比给元素计算、设置合理的位置和大小。

四、跨端兼容

很多时候,每个平台有自己的一些特性,小程序和APP上实现是有一定区别的,可能不一定能兼容所有平台。 此时需要使用条件编译,即用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台,即使用#ifdef#ifndef#endif来判断平台类型,其中: 符号|含义 -----|----- #ifdef|if defined 仅在某平台存在 #ifndef|if not defined 除了某平台均存在 %PLATFORM%|平台名称

对于API、组件、样式等,有不同的注释方式,具体如下: 方式|适用平台 -----|----- API和pages.json|// #ifdef PLATFORM// #endif 组件|<!-- #ifdef PLATFORM --><!-- #endif --> 样式|/* #ifdef PLATFORM *//* #endif */

测试如下:

<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <view class="wx">微信小程序</view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="h5">H5+APP</view>
        <!-- #endif -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
            //#ifdef MP-WEIXIN
            console.log('wx...')
            //#endif
            //#ifdef APP-PLUS
            console.log('app...')
            //#endif
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {            
        }
    }
</script>

<style>
</style>

显示: uni-app入门教程(6)接口的扩展应用

显然,判断出了当前为微信小程序平台。

五、交互反馈

交互反馈包括提示框、加载等的设置。

1.showToast(OBJECT)和hideToast()

分别用于显示和隐藏消息提示框。 OBJECT参数和含义如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- title| String| 是| 提示的内容,长度与 icon 取值有关
icon| String| 否| 图标,有效值详见下方说明。 image| String| 否| 自定义图标的本地路径 mask| Boolean| 否| 是否显示透明蒙层,防止触摸穿透,默认:false duration| Number| 否| 提示的延迟时间,单位毫秒,默认:1500
position |String| 否| 纯文本轻提示显示位置,填写有效值后只有 title 属性生效, 有效值详见下方说明。 success |Function| 否| 接口调用成功的回调函数
fail |Function| 否| 接口调用失败的回调函数
complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

2.showLoading(OBJECT)和hideLoading()

前者用于显示 loading 提示框,需主动调用后者才能关闭提示框。 OBJECT参数和含义如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- title| String| 是| 提示的内容
mask| Boolean| 否| 是否显示透明蒙层,防止触摸穿透,默认:false success |Function| 否| 接口调用成功的回调函数
fail |Function| 否| 接口调用失败的回调函数
complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

测试如下:

<template>
    <view>
        <button type="default" @click="showToast">显示提示框</button>
        <button type="default" @click="showLoading">显示并关闭Loading提示框</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {
            showToast: function(){
                uni.showToast({
                    title: 'hello...',
                    icon: 'success'
                })
            },
            showLoading: function(){
                uni.showLoading({
                    title: 'loading...',
                    mask: true,
                    success:function(){
                        setTimeout(function(){
                            uni.hideLoading()
                        }, 3000)
                    }
                })
            }
        }
    }
</script>

<style>
</style>

显示: uni-app入门教程(6)接口的扩展应用

可以看到,可正常显示、关闭提示框和loading。

3.showModal(OBJECT)

用于显示模态弹窗,类似于标准 html 的消息框alert、confirm。 OBJECT参数和含义如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- title| String| 否| 提示的标题
content |String| 否| 提示的内容
showCancel |Boolean| 否| 是否显示取消按钮,默认为 true
cancelText |String| 否| 取消按钮的文字,默认为"取消",最多 4 个字符
cancelColor |HexColor| 否| 取消按钮的文字颜色,默认为"#000000" confirmText |String| 否| 确定按钮的文字,默认为"确定",最多 4 个字符
confirmColor| HexColor| 否| 确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#3CC51F",百度小程序平台默认为"#3c76ff" fail| Function| 否| 接口调用失败的回调函数
complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

4.showActionSheet(OBJECT)

​用于显示操作菜单。 OBJECT参数和含义如下: 参数名| 类型| 必填与否| 说明 -----|-----|-----|----- itemList| Array| 是| 按钮的文字数组 itemColor| HexColor| 否| 按钮的文字颜色,字符串格式,默认为"#000000" success |Function| 否| 接口调用成功的回调函数,详见返回参数说明
fail |Function| 否| 接口调用失败的回调函数
complete |Function| 否| 接口调用结束的回调函数(调用成功、失败都会执行)

测试如下:

<template>
    <view>
        <button type="default" @click="showModal">显示模态弹窗</button>
        <button type="default" @click="showActionSheet">​显示操作菜单</button>
    </view>
</template>

<script>
    var actions = ['Music', 'Reading'];
    export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {
            showModal: function(){
                uni.showModal({
                    title: 'hello...',
                    content: 'Modal Window',
                    success:function(res){
                        if(res.confirm){
                            console.log('Confirm')
                        }else if(res.cancel){
                            console.log('Cancel')
                        }
                    }
                })
            },
            showActionSheet: function(){
                uni.showActionSheet({
                    itemList: actions,
                    success:function(res){
                        console.log(actions[res.tapIndex])
                    },
                    fail:function(res){
                        console.log(res.errMsg)
                    }
                })
            }
        }
    }
</script>

<style>
</style>

显示: uni-app入门教程(6)接口的扩展应用

可以看到,可以对模态弹窗和操作菜单进行操作。

总结

uni-app的家口为开发者提供了丰富的功能,包括设备、界面等,我们只需要直接调用即可实现所需功能,减少了自己开发的麻烦,有利于快速开发。

本文原文首发来自博客专栏移动应用开发,由本人转发至https://www.helloworld.net/p/KP9ru5af3lHmw,其他平台均属侵权,可点击https://blog.csdn.net/CUFEECR/article/details/112067894查看原文,也可点击https://blog.csdn.net/CUFEECR浏览更多优质原创内容。

收藏
评论区

相关推荐

Gradle技术之四 - Gradle的Task详解
1 Gradle的Task详解 1 Task定义和配置 2 Task的执行 3 Task的依赖和执行顺序 4 Task类型 5 Task结合gradle的生命周期 6 Task实战 1.1 Task定义和配置 1.1.1 查看所有的task java ./gradlew tasks 输出 Task :tasks
6 手写Java LinkedHashMap 核心源码
概述 LinkedHashMap是Java中常用的数据结构之一,安卓中的LruCache缓存,底层使用的就是LinkedHashMap,LRU(Least Recently Used)算法,即最近最少使用算法,核心思想就是当缓存满时,会优先淘汰那些近期最少使用的缓存对象 LruCache的缓存算法 LruCache采用的缓存算法为LRU(Least Re
带你掌握不一样的监控进程技术
文章目录 1.技术应用背景(about:blank1_6) 2.效果展示(about:blank2_11) 3.功能代码实现(about:blank3_18) 4.知识背景清单(about:blank4_43) 5.WMI相关概念(about:blank5WMI_70) 6.WMI相关函数(abo
面试官在“逗”你系列:连续子数组的最大和或最小和
前言 本文题目是“连续子数组的最大和或最小和”。 话不多说,开始“打怪”修炼... 一、理解题目 以“连续子数组的最大和”为例,相当于我们在数组中,计算连续的子数组的和,找寻最大值。如在数组3, 2, 1, 2, 4, 6, 5中连续子数组的最大和为:3 (2) 1 2 4 8 输入:3, 2, 1, 2, 4, 6,
android view 常用的6种 View 的滑动方法
View 的滑动是Android 实现自定义控件的基础,实现View 滑动有很多种方法,在这里主要讲解6 种滑动方法,分别是layout()、offsetLeftAndRight()与offsetTopAndBottom()、LayoutParams、动画、scollTo 与scollBy,以及Scroller。   View 的滑动是Android
6. Python 元组,不可变的列表,滚雪球学 Python
希望看到文章的 Python 学习爱好者可以坚持打卡,在评论区坚持跟橡皮擦卡学习的朋友,在 100 天之后,橡皮擦将送出神秘大奖。 六、Python 元组,不可变的列表 今天新学习的概念叫做元组,其实学元组还是离不开列表,第一个知识点是元组的英文 tuple 要牢牢记住,第一个知识点是元组与列表的区别,列表的元素可以修改,元组的元素不可以修改,所以
Centos7.2 安装Elasticsearch 6
下载 elasticsearch.6.0.0.tar.gz(http://pan.baidu.com/s/1kUTZVrp) 迁移文件到usr/local中 mv elasticsearch6.0.0.tar.gz /usr/local/
C语言入门系列之6.一维和二维数组
一、数组的概念有如下几组数据: 学生的学习成绩 银行的账单 一行文字这些数据的特点是: 具有相同的数据类型; 使用过程中需要保留原始数据 。 C语言为这类数据,提供了一种构造数据类型——数组。在程序设计中,为了处理方便,把具有相同类型的若干变量按有序的形式组织起来,这些按序排列的同类数据元素的集合称为数组
C语言基础习题50例(二)6-10
给大家推荐一门大数据Spark入门课程,希望大家喜欢。 习题6 用 号输出字母C的图案。实现思路:单行打印即可。代码如下:cinclude <stdio.h int main (void){ printf("\n"); printf("\n"); printf("\n"); printf("
python刷题-数列排序
资源限制时间限制:1.0s 内存限制:512.0MB问题描述  给定一个长度为n的数列,将这个数列按从小到大的顺序排列。1<n<200输入格式  第一行为一个整数n。  第二行包含n个整数,为待排序的数,每个整数的绝对值小于10000。输出格式  输出一行,按从小到大的顺序输出排序后的数列。样例输入58 3 6 4 9样例输出3 4 6 8 9···
uni-app入门教程(6)接口的扩展应用
前言本文主要介绍了接口的扩展应用:设备相关的接口包括获取系统信息、网络状态、拨打电话、扫码等;导航栏的动态设置;下拉刷新、上拉加载更多的实现,通过动作链获取节点信息;用条件编译实现小程序、APP等多端兼容;提示框、Loading、模态弹窗等的交互反馈。 一、设备相关 1.系统信息uni.getSystemInfo(OBJECT)接口用来异步
python常用150个英文单词
需要学习资料和视频 加我微信:156758039571.python 蟒蛇2. downlaods 下载3. install 安装4. customize 自定义5. path 环境变量:路径6. optional 可选的7. feature 特性特点8. documentation 文档9. associate 关联10. shortcuts 快捷方式11
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
Python基础6——面向对象
14 面向对象 14.1 面向对象基础​ 面向对象是一种编程思想,处理面向对象编程以外,还有面向过程编程​ 三大特征: 1. 封装 2. 继承 3. 多态​ 面向过程与面向对象的区别1. 面向过程: 自己动手洗衣服,拧衣服、晾衣服2. 面向对象:构造一个洗衣机对象,让洗衣机对象完成 14.2 类和对象​ 类:相同属性和功能的一类事物。​ 人是一个类,张三(
【设计思想解读开源框架】Activity的6大难点,你会几个
背景面是是上海的Android leader岗位,周日一轮面试,自我感觉答的都还不错。结果收到邮件面试结束了,说什么"你优秀的学识和能力给我们留下了深刻的印象!经过对你综合情况的仔细评估,并经过与岗位需求进行谨慎匹配和权衡之后, 非常遗憾,我们这次没有和你达成合作。但你的信息已经被录入到公司人才库"。意思就是挂了呗。后来打电话问hr,没跟我说原因。然后面试过