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,一经查实,立即删除!

相关文章

Ubuntu24.04解决向日葵安装libgconf-2-4依赖问题

最近在加装的ssd上加装了个Ubuntu&#xff0c;当然要装最新的长期支持稳定版啦&#xff0c;24.04.1&#xff0c;却发现常用的向日葵不好安装成功&#xff0c;即使是官方的说明&#xff0c;应该是用这个版本系统的人还不多。 找到了一个帅哥的解决方案&#xff0c;是可行的 但是…

工厂模式-工厂方法模式实现

具体的产品有具体的工厂类生产,这样当新增商品时,不需要修改原来的工厂类 主要有4个角色 抽象工厂 具体工厂 抽象产品 具体产品 1. 定义抽象产品,本文以生产手机为例 /*** @desc 抽象产品**/ public interface Phone { } 2. 定义具体产品-Apple /*** @desc 具体产品…

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

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

【Linux内核剖析】深入分析inet_init的处理机制

inet_init 是 Linux 内核中用于初始化 TCP/IP 协议栈的函数。它在内核启动时被调用&#xff0c;完成各种协议和数据结构的注册和初始化。 主要功能&#xff1a; 注册 TCP、UDP、ICMP 等协议。初始化 ARP、IP 和其他网络协议模块。设置 socket 操作和协议处理。 前后调用关系链…

使用 .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博客 推荐文…

聚焦 NLP 和生成式 AI 的创新与未来 基础前置知识点

给学生们讲解的技术内容可以根据他们的背景、兴趣和教学目标来规划。以下是一些适合不同阶段和领域的技术主题建议&#xff0c;尤其是与大语言模型&#xff08;如 ChatGPT&#xff09;相关的内容&#xff1a; 1. 自然语言处理&#xff08;NLP&#xff09;基础 适合对 NLP 了解…

python3 Flask应用 使用 Flask-SQLAlchemy操作MySQL数据库

一、环境搭建 下载命令&#xff1a; pip install flask flask-sqlalchemy pymysql 二、创建项目结构 yourProjectFolder/ |—— app.py |—— config.py |—— models.py |__ mydb.py 三、基本使用 3.1 config.py 进行数据库连接配置 import osbasedir os.path.abspat…

深度学习:神经网络中线性层的使用

深度学习&#xff1a;神经网络中线性层的使用 在神经网络中&#xff0c;线性层&#xff08;也称为全连接层或密集层&#xff09;是基础组件之一&#xff0c;用于执行输入数据的线性变换。通过这种变换&#xff0c;线性层可以重新组合输入数据的特征&#xff0c;并将其映射到新…

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

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

docker-compose 安装 pgsql (postgres)

docker-compose-pg.yml 文件内容 version: 3 services:iepms-gateway:image: postgres:14.13container_name: postgresql-14.13restart: alwaysprivileged: trueenvironment:- POSTGRES_PASSWORD: test2024ports:- 15432:5432volumes:- /home/iepms/data/pgsql/data:/var/lib/…

Python 小高考篇(4)循环语句

目录 for 循环一个参数两个参数三个参数 while 循环break和continue语句break语句自测总结结尾 本文由Jzwalliser原创&#xff0c;发布在CSDN平台上&#xff0c;遵循CC 4.0 BY-SA协议。 因此&#xff0c;若需转载/引用本文&#xff0c;请注明作者并附原文链接&#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,…

JVM垃圾回收算法详解

在Java开发中&#xff0c;JVM&#xff08;Java虚拟机&#xff09;的垃圾回收机制是自动管理内存的关键部分。垃圾回收器&#xff08;Garbage Collector, GC&#xff09;通过一系列算法判断哪些对象可以被回收&#xff0c;从而释放内存空间供新对象使用。本文将深入探讨JVM中的垃…

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…