uni-app快速入门(十一)--常用JS API(上)

      在前面学习了uni-app的布局、组件、路由等知识点以后,还要掌握uni-app的JS API ,也可以理解为基于uni-app的java script。本节介绍uni-app的request请求、文件上传、数据缓存、获取位置、获取系统信息、获取手机的网络状态、拨打电话API。

一、request请求

      使用uni.request 向服务器端发送请求。下面是调用示例:

       uni.request({

                url: 'https://xxx.com/api/v1/business/info?stId=123',//get参数可以写到地址栏里

                method:"GET",

                success: (res) => {

                    console.log(res);

                    this.logo=res.data.data.logo;                   

                    }})

        对于method为POST模式的,传参可在method下面加data:{},另外使用POST提交需要在header中指定content-type:

uni.request({

                url:"https://www.abc.com/api/v1/goods/info",

                method:"POST",

                data:{

                    "store_id":"1234"

                },

                header:{

                    "Content-Type":"application/x-www-form-urlencoded"

                },

                success:(res)=>{

                    console.log(res);

                    this.classifys=res.data.data;

                }

            })

【promise方式请求数据】

        uni-app内部对request进行了promise封装,返回的第一个参数是错误对象,第二个参数是返回数据,示例如下:

uri.request({...}).then((data)=>{ //data为一个数组,第一项为错误信息,第二项为返回数据

    let  [err,res]=data;//使用解构的方式获取数组的值

    if(res.data.code==200){

        this.notice  = res.data.data.notice;//获取返回值示例

    }

}

二、uploadFile文件上传

        uploadFile可以将本地资源上传到服务器,客户端发起一个POST请求,其中content-type为multipart/form-data,详细用法参考uni-app官网:

uni.uploadFile(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.uploadFile(OBJECT),参数 HarmonyOS Next 兼容性,UploadFileSuccess 的属性值,UploadFileFail 的属性值,返回值 HarmonyOS Next 兼容性,UploadTask icon-default.png?t=O83Ahttps://uniapp.dcloud.net.cn/api/request/network-file.html示例代码:

        多文件上传:在实际开发中有很多场景需要批量上传文件,微信小程序只支持单文件上传,多文件上传需要循环调用uni.uploadFile(),就是在tempFilePaths获取到文件之后,判断:

if(tempFilePaths.length>0){

    for(let i=0;i<tempFilePaths.length;i++){

        uni.uploadFile({

        url:'http://...',

        filePath:tempFilePaths[i],

        ......

        })

    }

}

三、数据缓存

        数据缓存可以将数据存储在本地缓存中,实现长期保存数据的功能,包括异步缓存和同步缓存,异步设置缓存为uni.setStorage,获取为uni.getStorage,删除为removeStorage,清除所有为clearStorage,同步设置缓存为setStorageSync,获取为getStorageSync,删除为removeStorageSync,清除所有为clerStorgeSync。

    setStorage设置缓存:

    uni.setStorage({

        key:'name',data:'张三',success:()=>{ console.log('success');}

    })

    //获取缓存的值

    uni.getStorage({

        key:"name",success:(res)=>{console.log(res.data);     }//结果为张三

    })

    //删除缓存值

    uni.removeStorage({

        key:'name',success:function(res){console.log('success');}

    })

    //清除所有:

    uni.clearStorage();

    //同步的方式比较简单:

   uni.setSorageSync('name','张三');

   let name = uni.getStorageSync('name');

   uni.removeStorageSync('name');

四、获取位置

        获取当前位置可实现查找附近的人、店铺、地图定位、详细地址、所在城市等信息。官方介绍见:

uni.getLocation(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.getLocation(OBJECT),uni.chooseLocation(OBJECT),三方定位和地图服务收费说明,unicloud-city-select 城市选择组件,【福利】高德拉新活动icon-default.png?t=O83Ahttps://uniapp.dcloud.net.cn/api/location/location.html示例:

uni.getLocation({
    type: 'wgs84',
    success: function (res) {
        console.log('当前位置的经度:' + res.longitude);
        console.log('当前位置的纬度:' + res.latitude);
    }
});

【配合map组件将我的位置显示在地图上】:

       获取到我的位置后,然后可以把这个坐标设置到地图插件上,不过获取位置需要小程序开放隐私权限。下面是示例代码:

<template>
    <view>
        <map class="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
    </view>
</template>

<script>
    export default {
        name: "location",
        data(){
            return {
                latitude:"", //纬度
                longitude:"", //经度
                markers:[
                    {
                        latitude:"",
                        longitude:"",
                        iconPath:"../../static/images/map/my.png",
                        width:30,
                        height:30
                    }
                ]
            }
        },
        onLoad(){
            uni.getLocation({
                type: 'gcj02',
                success:  (res)=> {
                    console.log('当前位置的经度:' + res.longitude);
                    console.log('当前位置的纬度:' + res.latitude);
                    this.latitude=res.latitude;
                    this.longitude=res.longitude;
                    this.markers[0].latitude=this.latitude;
                    this.markers[0].longitude=this.longitude;
                }
            });
        }
    }
</script>

<style scoped>
    .map{width:100%;height:500rpx;}
</style>
 

五、获取系统信息

      使用uni.getSystemInfo()和uni.getSystemInfoSync()可获取手机品牌、型号、屏幕宽度、高度、操作系统版本等信息,具体可参考uni-app官方文档:

nulluni-app,uniCloud,serverless,系统信息的概念,uni.getSystemInfo(OBJECT),success 返回参数说明,参数 HarmonyOS Next 兼容性,GetSystemInfoResult 的属性值,某些小程序特殊的返回参数,不推荐使用的返回参数,仅为icon-default.png?t=O83Ahttps://uniapp.dcloud.net.cn/api/system/info.html

六、获取网络状态

        使用uni.getNetworkType可以获取网络状态。如果用户使用的非Wi-Fi网络,可提示 用户注意手机流量。网络状态划分为:wifi、2g 、3g、4g 、ethernet、unknown、none,调用方式:

uni.getNetworkType({

    success: (res)=>{

        this.networkType = res.networkType;

}

})

        另外还可以在onReady()事件中,使用uni.onNetworkStatusChange监听网络状态变化,代码如下:

    onReady(){

            uni.onNetworkStatusChange(function(res){

                console.log(res.insConnected);//是否有网络

                console.log(res.networkType);//当前的网络类型

            });

}

七、拨打电话

      拨打电话兼容所有平台,使用uni.makePhoneCall,示例:

      uni.makePhoneCall({

          phoneNumber:'12345'

      })

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/61474.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详解SpringCloud集成Camunda7.19实现工作流审批(一)

背景是公司里的一个企业管理系统项目里许多业务涉及了审批流&#xff0c;因此需要引进工作流引擎来开发一个通用的工作流服务&#xff0c;经过调研最终采用的是集成Camunda7.19版本引擎来实现文章目录 一、参考资源二、工作流简介三、工作流引擎四、Camunda安装1.流程图设计器2…

使用 .NET 创建新的 WPF 应用

本教程介绍如何使用 Visual Studio 创建新的 Windows Presentation Foundation &#xff08;WPF&#xff09; 应用。 使用 Visual Studio&#xff0c;可以向窗口添加控件以设计应用的 UI&#xff0c;并处理这些控件中的输入事件以与用户交互。 在本教程结束时&#xff0c;你有一…

【机器学习chp3】判别式分类器:线性判别函数、线性分类器、广义线性分类器、分段线性分类器

前言&#xff1a; 本文遗留问题&#xff1a;&#xff08;1&#xff09;对最小平方误差分类器的理解不清晰.&#xff08;2&#xff09;分段线性判别函数的局部训练法理解不清晰。 推荐文章1&#xff0c;其中有关于感知机的分析 【王木头从感知机到神经网络】-CSDN博客 推荐文…

Android中常见内存泄漏的场景和解决方案

本文讲解Android 开发中常见内存泄漏场景及其解决方案&#xff0c;内容包括代码示例、原因分析以及最佳实践建议。 1. 静态变量导致的内存泄漏 静态变量的生命周期与应用进程一致&#xff0c;如果静态变量持有了对 Activity 或其他大对象的引用&#xff0c;就可能导致内存泄漏…

小程序20-样式:自适应尺寸单位 rpx

手机设备的宽度逐渐多元化&#xff0c;也就需要开发者开发过程中&#xff0c;去适配不同屏幕宽度的手机&#xff0c;为了解决屏幕适配问题&#xff0c;微信小程序推出了 rpx 单位 rpx&#xff1a;小程序新增的自适应单位&#xff0c;可以根据不同设备的屏幕宽度进行自适应缩放 …

网络安全,文明上网(1)享科技,提素养

前言 在这个信息化飞速发展的时代&#xff0c;科技的快速进步极大地丰富了我们的生活&#xff0c;并为我们提供了无限的可能性。然而&#xff0c;随着网络世界的不断扩张&#xff0c;增强我们的网络素养成为了一个迫切需要解决的问题。 与科技同行&#xff0c;培育网络素养 技术…

豆瓣书摘 | 爬虫 | Python

获取豆瓣书摘&#xff0c;存入MongoDB中。 import logging import timeimport requests from bs4 import BeautifulSoup from pymongo import MongoClientheaders {accept: text/html,application/xhtmlxml,application/xml;q0.9,image/avif,image/webp,image/apng,*/*;q0.8,…

Linux设置开机自动执行脚本 rc-local

使用/etc/rc.local 1、启动rc-local服务 首先授予执行权限 chmod x /etc/rc.d/rc.local设置开启自启并启动 sudo systemctl enable rc-local sudo systemctl start rc-local查看状态 sudo systemctl status rc-local2、编写要执行的脚本 vim /home/start.sh #!/bin/bash…

关于Redis单线程模型以及IO多路复用的理解

IO多路复用 -> redis主线程 -> 事件队列 -> 事件处理器 1.IO多路复用机制的作用&#xff1a; 操作系统的多路复用机制&#xff08;如 epoll、select&#xff09;负责监听多个文件描述符&#xff08;如客户端连接&#xff09;上的事件。 当某个文件描述符上的事件就绪…

针对AI增强图像大规模鲁棒性测试的数据集

Semi-Truths 是一个大规模的AI增强图像数据集&#xff0c;旨在评估和提升AI生成图像检测器的鲁棒性。该数据集包含了27,600张真实图像和1,472,700张通过多种增强技术生成的AI增强图像&#xff0c;这些图像覆盖了不同的扰动级别和数据分布。 Semi-Truths 的特点在于其详细的元数…

2. Django中的URL调度器 (自定义路径转换器)

在 Django 中&#xff0c;URL 路由通常使用路径转换器&#xff08;path converters&#xff09;来匹配和捕获 URL 中的特定模式&#xff0c;例如整数、字符串或 slug 等。默认情况下&#xff0c;Django 提供了一些内置的路径转换器&#xff0c;如 <int>、<str>、&l…

控制反转和依赖注入

控制反转 简称IOC。对象的创建控制权由程序自身转移到外部&#xff08;容器&#xff09;&#xff0c;这种思想称为控制反转。 使用Component注解去将其他层的实现类&#xff0c;交给IOC容器进行管理 依赖注入 简称DI。IOC容器为应用程序提供运行时&#xff0c;所依赖的资源…

Tomcat和Nginx原理说明

Tomcat Tomcat 是一个开源的 Java 应用服务器&#xff0c;它由多个关键组件组成。这些组件共同协作&#xff0c;实现了 Servlet 容器的功能。以下是 Tomcat 的核心组件说明及其逻辑架构的示意图。 1. Tomcat 核心组件说明 (1) Server 描述&#xff1a;Tomcat 的顶级组件&…

Linux编辑器 - vim

目录 一、vim 的基本概念 1. 正常/普通/命令模式(Normal mode) 2. 插入模式(Insert mode) 3. 末行模式(last line mode) 二、vim 的基本操作 三、vim 正常模式命令集 1. 插入模式 2. 移动光标 3. 删除文字 4. 复制 5. 替换 6. 撤销上一次操作 7. 更改 8. 调至指定…

【Linux网络编程】简单的UDP套接字

目录 一&#xff0c;socket编程的相关说明 1-1&#xff0c;sockaddr结构体 1-2&#xff0c;Socket API 二&#xff0c;基于Udp协议的简单通信 三&#xff0c;UDP套接字的应用 3-1&#xff0c;实现英译汉字典 一&#xff0c;socket编程的相关说明 Socket编程是一种网络通信…

jenkins的安装(War包安装)

‌Jenkins是一个开源的持续集成工具&#xff0c;基于Java开发&#xff0c;主要用于监控持续的软件版本发布和测试项目。‌ 它提供了一个开放易用的平台&#xff0c;使软件项目能够实现持续集成。Jenkins的功能包括持续的软件版本发布和测试项目&#xff0c;以及监控外部调用执行…

stm32cubemx+VSCODE+GCC+makefile 开发环境搭建

title: stm32cubemxVSCODEGCCmakefile 开发环境搭建 tags: FreertosHalstm32cubeMx 文章目录 内容往期内容导航第一步准备环境vscode 插件插件配置点灯 内容 往期内容导航 第一步准备环境 STM32CubeMXVSCODEMinGWOpenOcdarm-none-eabi-gcc 然后把上面下载的软件 3 4 5 bin 文…

如何利用谷歌浏览器提高网络安全

在当今数字化时代&#xff0c;网络安全已成为我们不可忽视的重要议题。作为全球最受欢迎的网络浏览器之一&#xff0c;谷歌浏览器不仅提供了快速、便捷的浏览体验&#xff0c;还内置了多种安全功能来保护用户的在线安全。本文将详细介绍如何通过谷歌浏览器提高您的网络安全&…

Python实现随机分布式延迟PSO优化算法(RODDPSO)优化CNN回归模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 近年来&#xff0c;深度学习技术在计算机视觉、语音识别、自然语言处理等领域取得了显著的成功。卷…

【电路笔记 信号】极点的物理意义

图像总结 极点的具体位置为我们提供了关于系统行为的重要信息&#xff0c;有助于分析系统的频率响应、时间响应和稳定性&#xff1a; 极点的虚部决定了系统的振荡频率&#xff0c;即系统的自然频率。极点的实部决定了系统的稳定性和阻尼特性。负实部表示稳定的衰减响应&#x…