vue app开发调用原生方法实现权限访问授权处理（一）

news2024/12/23 19:01:26

vue app开发调用原生方法实现权限访问授权处理

前提：在写代码之前应该想清楚调用原生安卓、ios的方法，就应该遵循双端的方法规则，调用方法时应该注意，在这里先主要介绍一下注意事项：

根据App发布应用市场的要求，下载、上传、定位获取、版本获取等功能必须要提供供用户选择的授权提示。当访问页面时候通过调用原生方法唤起手机授权提示，选择授权同意和拒绝授权处理，当选择同意授权就要对获取的数据进行 处理，选择拒绝授权时应做一些拒绝的提示，当再次访问页面时候，也要再次弹出这样的权限弹窗供用户选择授权，当然 用户可以拒绝或者在手机后台手动去设置是否要授权。

  • 了解提供的原生的方法的实现步骤
  • 知道原生方法的使用规范
  • 原生方法的调用授权处理
  • 同意授权处理和拒绝授权处理 

这里介绍原生方法的使用，实现步骤。 可根据自己项目需求自定义，但是用法都是类似的，参考使用。以下定义的方法需要和安卓、ios开发人沟通、协商定义。

目录

vue app开发调用原生方法实现权限访问授权处理

定位授权

模板文件下载权限功能

授权同意处理统一方法

拒绝授权处理统一方法

定位授权

授权弹窗这里不在截图；

mounted中进行授权方法调用，这里存在安卓在第一次进入获取不到定位问题，所以采用了定时器可获取到

mounted(){
   
    if (this.$utils.isAndroid_ios() == "andriod"){
        window["getDeviceLoc"] = (Longitude,Latitude,Address) => {
          this.getDeviceLoc(Longitude,Latitude,Address);
        };
    }
    // 获取安卓手机定位
    this.phoneTimer = setTimeout(()=>{
      this.getAndroidPosition();
      clearTimeout(this.phoneTimer);
    },1000);
    

    window["permissionGranted"] = () => {
      this.permissionGranted();
    };
    window["permissionDenied"] = () => {
      this.permissionDenied();
    };

  },

定义window["getDeviceLoc"] 调用方法，调用时候记得传递参数，经度、纬度、地址等参数；这里的方法和参数根据自己项目需求自定义

window["getDeviceLoc"] = (Longitude,Latitude,Address) => {
          this.getDeviceLoc(Longitude,Latitude,Address);
};
getDeviceLoc(Longitude,Latitude,Address){
      // this.$toast("当前定位城市3"+Address);
      this.positionObj.Longitude  = Longitude;
      this.positionObj.Latitude  = Latitude;
      this.positionObj.Address  = Address;

      this.getSourceCount(Longitude,Latitude);
      this.loadWeather(Address);// 高德天气

      //定位获取
      this.$store.commit("getAddressPosition",{
        lon:Longitude,//经度
        lat:Latitude//纬度
      });

},

 获取到数据进行数据存储、处理

这里的定位采用三次请求法进行定位数据获取

window.AndroidFunction.onLocSuccess()是安卓唤起授权方法

// 获取手机定位
    getAndroidPosition(){
      if(this.$utils.isAndroid_ios() == "andriod"){
        this.positionStr =  window.AndroidFunction.onLocSuccess();
        if(this.positionStr){
          let sourt = this.positionStr.split(",");
          // this.$toast("当前定位城市1"+sourt[2]);

          this.positionObj.Longitude  = sourt[0];
          this.positionObj.Latitude  = sourt[1];

          this.positionObj.Address  = sourt[2];
          

        }else{
          this.positionTimer = setInterval(()=>{
            this.positionCount+=1;
            this.positionStr =  window.AndroidFunction.onLocSuccess();
            if(this.positionStr&&this.positionCount===3){
              // 记录3次
              let sourt = this.positionStr.split(",");
              // this.$toast("当前定位城市2"+sourt[2]);
              this.positionObj.Longitude  = sourt[0];
              this.positionObj.Latitude  = sourt[1];

              this.positionObj.Address  = sourt[2];
              this.getSourceCount(sourt[0],sourt[1]);

             
              clearInterval(this.positionTimer);
            }else if(!this.positionStr&&this.positionCount>3){
              // 如果超过3次没有获取到值，显示初始定位
              this.getPosition.Address = "";
              this.positionObj.Longitude  = this.center.longitude;
              this.positionObj.Latitude  = this.center.latitude;

             
              clearInterval(this.positionTimer);
            }
          },2000)
        }
      }else{
        // ios手机定位
        new Promise((resolve, reject) => {
          window.webkit.messageHandlers.callNative.postMessage({
            name: "单次定位",
            data: {}
          });
          resolve();
        }).then(res => {
            window.callWeb = this.callWeb;
        });
      }
    },

这里的ios定位方法相对简单一点，注意window.callWeb = this.callWeb使用方法；ios是必须要这样定义才能够获取到数据。

// 版本ios
    callWeb(versionIos) {
      let versionJson = versionIos;
      if(versionIos.name == "appInfo"){

      }else if(versionIos.name == "当前定位更新"){
          // ios定位
          // this.$toast(JSON.stringify(versionJson))
          let {longitude,latitude} = versionIos.data;

          this.positionObj.Longitude = longitude;
          this.positionObj.Latitude = latitude;

          // 保存定位位置
          this.getSourceCount(longitude,latitude);

          this.positionObj.Address = versionIos.data.city ? versionIos.data.city : "武汉市";
          

          //定位获取
          this.$store.commit("getAddressPosition",{
            lon:Longitude,//经度
            lat:Latitude//纬度
          });

          
      }else if(versionIos.name == "推送消息"){
        
        
      }else{
        // 默认
        this.getSourceCount(this.center.longitude,this.center.latitude);
      }
    },

定义的callWeb方法，注意所有的数据都用的这个方法，进行数据处理记得通过返回不同的name来区分判断在进行数据获取处理。至于name定义成什么，可和ios开发协商。

模板文件下载权限功能

  

这里加了遮罩层来解决安卓点击之前进行授权处理 

    <li>
        <span class="fontSize30">授权书模板</span>
        <van-button type="info" size="small" class="down" @click="downBook(0)" v-throttle block style="width:auto">下载</van-button>
        <div @click="handleSend" class="handleSend" v-if="isShow"></div>
      </li>
      <li>
        <span class="fontSize30">合同模板</span>
        <van-button type="info" size="small" class="down" @click="downContract(1)" v-throttle block style="width:auto">下载</van-button>
        <div @click="handleMoban" class="handleSend" v-if="isShowMuban"></div>
      </li>

data(){
    return {
        isShow:true,
      centerVal:null,
      isShowMuban:true,
      MobanVal:null,
      permissionFlag:null,
    }
}

 window.AndroidFunction.requestStoragePermission();访问授权权限 ，ios可不用处理；

定义唯一标记，进行页面多个文件下载调用授权的方法。

handleSend(){
      if (this.$utils.isAndroid_ios() == "andriod") {
        
        this.permissionFlag = "book";
        window.AndroidFunction.requestStoragePermission();
      }else{
        this.downBook(0);
      }
    },
    handleMoban(){
      if (this.$utils.isAndroid_ios() == "andriod") {
        
        this.permissionFlag = "muban";
        window.AndroidFunction.requestStoragePermission();
      }else{
        this.downContract(1);
      }
    },

 授权同意

// 授权同意
    permissionGranted(){
      if(this.permissionFlag == "book"){
        this.isShow = false;
        this.downBook(0);
      }else if(this.permissionFlag == "muban"){
        this.isShowMuban = false;
        this.downContract(1);
      }
      this.permissionFlag = null;
    },

 拒绝授权

// 不同意
    permissionDenied(){
      if(this.permissionFlag == "book"){
        this.isShow = true;
      }else if( this.permissionFlag == "muban"){
        this.isShowMuban = true;
      }
      this.$toast.fail({
        message:"您拒绝权限申请,此功能将不能正常使用"
      });
      this.permissionFlag = null;
    },
downBook(status){
      this.$dialog.confirm({
        title: "授权书",
        message: "在您进行下载授权书模板时，我们会需要跳转到第三方游览器进行下载，适用于当前下载权限获取。",
      }).then(()=>{
        downLoadContract(status).then(res=>{
          if (!this.$utils.isEmpty(res)) {
            if (this.$utils.isAndroid_ios() == "andriod") {
              console.log("安卓");
              window.AndroidFunction.getPdfUrl(
                  "授权书模板" ,
                  this.$baseImgUrl + res
              );
            }
            if (this.$utils.isAndroid_ios() == "ios") {
              console.log("ios");
              window.webkit.messageHandlers.callNative.postMessage({
                name: "下载PDF",
                data: {
                  name: "授权书模板",
                  url: this.$baseImgUrl + res
                }
              });
            }
          }

        })
      }).catch(()=>{

      })
    },
    downContract(status){
      this.$dialog.confirm({
        title: "合同",
        message: "在您进行下载合同模板时，我们会需要跳转到第三方游览器进行下载，适用于当前下载权限获取。",
      }).then(()=>{
        downLoadContract(status).then(res=>{
          if (!this.$utils.isEmpty(res)) {
            if (this.$utils.isAndroid_ios() == "andriod") {
              console.log("安卓");
              window.AndroidFunction.getPdfUrl(
                  "合同模板" ,
                  this.$baseImgUrl + res
              );
            }
            if (this.$utils.isAndroid_ios() == "ios") {
              console.log("ios");
              window.webkit.messageHandlers.callNative.postMessage({
                name: "下载PDF",
                data: {
                  name: "合同模板" ,
                  url: this.$baseImgUrl + res
                }
              });
            }
          }

        })
      }).catch(()=>{

      })
    }

授权同意处理统一方法

mounted中使用

window["permissionGranted"] = () => {
      this.permissionGranted();
    };

permissionGranted(){
      //授权同意数据处理 
},

拒绝授权处理统一方法

mounted中使用

window["permissionDenied"] = () => {
      this.permissionDenied();
};
permissionDenied(){
    //拒绝授权数据处理
}

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：来访地址船长在船上的博客
🔨🔨🔨  简介：CSDN前端领域博客专家，CSDN前端领域优质创作者，资深前端开发工程师，专注web前端领域开发，在CSDN分享工作中遇到的问题以及问题解决方法和对项目开发的实际案例总结以及新技术的认识。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【sciter】安全应用列表控件总结

【sciter】安全应用列表控件总结

一、效果图 二、功能点 实现电脑文件拖拽进入到安全桌面，读取文件路径，生成应用。可以配置允许拖拽进入安全桌面的文件应用。点击添加图标，可以添加应用到安全桌面中。在安全桌面列表中每一个应用实现双击、失去焦点，获取焦点、右键事件在安全桌面列表中每一个应用可以实现…
阅读更多...
[附源码]计算机毕业设计springboot疫情防控平台

[附源码]计算机毕业设计springboot疫情防控平台

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
HTML5期末大作业：用DIV+CSS技术设计的网页与实现（剪纸传统文化网页设计主题）

HTML5期末大作业：用DIV+CSS技术设计的网页与实现（剪纸传统文化网页设计主题）

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
二本土木工程管理毕业5年，零基础转型大数据开发，收割长沙深圳多个大数据offer...

二本土木工程管理毕业5年，零基础转型大数据开发，收割长沙深圳多个大数据offer...

点击上方 "大数据肌肉猿"关注, 星标一起成长点击下方链接&#xff0c;进入高质量学习交流群今日更新| 1052个转型案例分享-大数据交流群分享一位学习群同学的转型经历&#xff0c;他是二本土木类工程管理专业&#xff0c;17年毕业&#xff0c;毕业后在长沙工地从事了…
阅读更多...
Java基于springboot+vue的汽车饰品销售购物商城系统 前后端分离

Java基于springboot+vue的汽车饰品销售购物商城系统 前后端分离

开发背景 随着我国科技和经济的发展&#xff0c;我国的汽车数量也越来越多&#xff0c;基本家家户户都拥有了自己的汽车&#xff0c;为了让汽车用起来更加的舒心&#xff0c;于是各类琳琅满目的汽车饰品也出现了。大多数时候人们在购买汽车饰品的时候都回到这些专卖店购买&…
阅读更多...
C++之面向对象

C++之面向对象

目录 对象与类 类的语法&#xff1a; C中class与struct的区别&#xff1a; 通过类实例化对象的方式 具体案例 类作用域与分文件编写 创建circle.h头文件 创建源文件circle.cpp 创建all.cpp来作为程序的入口 封装 封装的意义 访问权限符 成员属性私有化 优点 具体…
阅读更多...
Python解题 - 括号上色（递归）

Python解题 - 括号上色（递归）

题目 小艺酱又得到了一堆括号。括号是严格匹配的。现在给括号进行上色。上色有三个要求&#xff1a; 1、只有三种上色方案&#xff0c;不上色&#xff0c;上红色&#xff0c;上蓝色。 2、每对括号只有一个上色。 3、相邻的两个括号不能上相同的颜色&#xff0c;但是可以都不上色…
阅读更多...
【Java面试指北】Exception Error Throwable 你分得清么？

【Java面试指北】Exception Error Throwable 你分得清么？

读本篇文章之前&#xff0c;如果让你叙述一下 Exception Error Throwable 的区别&#xff0c;你能回答出来么&#xff1f; 你的反应是不是像下面一样呢&#xff1f; 你在写代码时会经常 try catch(Exception)在 log 中会看到 OutOfMemoryErrorThrowable 似乎不常见&#xff0c…
阅读更多...
为什么大部分人做网赚是赚不到钱的，这才是真正的原因！

为什么大部分人做网赚是赚不到钱的，这才是真正的原因！

说实话&#xff0c;互联网已经发展到现在的水平&#xff0c;目前来看&#xff0c;互联网上只存在两种平台&#xff0c;一种是社交平台&#xff0c;一种是内容平台。 所有的抖音、知乎、小红书、搜索引擎、淘宝等等这些都是内容平台&#xff0c;如果你想要解决精准流量问题&…
阅读更多...
JSP+MySQL基于SSM的高校毕业生就业管理系统

JSP+MySQL基于SSM的高校毕业生就业管理系统

本高校毕业生就业管理系统主要包括系统用户管理模块、招聘信息管理模块、简历接收管理、投递简历管理、登录模块、和退出模块等多个模块。它帮助高校毕业生就业管理实现了信息化、网络化,通过测试,实现了系统设计目标,相比传统的管理模式,本系统合理的利用了高校毕业生就业管理…
阅读更多...
配电网重构|基于新颖的启发式算法SOE的随机(SDNR)配电网重构（Matlab代码实现）【算例33节点、84节点、119节点、136节点、417节点】

配电网重构|基于新颖的启发式算法SOE的随机(SDNR)配电网重构（Matlab代码实现）【算例33节点、84节点、119节点、136节点、417节点】

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f4dd;目前更新&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;电力系统相关知识&#xff0c;期刊论文&…
阅读更多...
【数据集NO.3】人脸识别数据集汇总

【数据集NO.3】人脸识别数据集汇总

文章目录前言一、IMDB-WIKI人脸数据集二、WiderFace人脸检测数据集三、GENKI 人脸图像数据集四、哥伦比亚大学公众人物脸部数据库五、CelebA人脸数据集六、美国国防部人脸库七、MTFL人脸识别数据集八、BioID人脸数据集九、PersonID人脸识别数据集十、CMU PIE人脸库十一、Youtub…
阅读更多...
Linux虚拟内存

Linux虚拟内存

问题 什么是虚拟内存地址 &#xff1f;Linux 内核为啥要引入虚拟内存而不直接使用物理内存 &#xff1f;虚拟内存空间到底长啥样&#xff1f;内核如何管理虚拟内存&#xff1f;什么又是物理内存地址 &#xff1f;如何访问物理内存&#xff1f; 什么是虚拟内存地址 举一个生活…
阅读更多...
Redis学习笔记（四）

Redis学习笔记（四）

事务 一个命令执行的队列&#xff0c;中间不会被打断或者干扰基本操作、 开启事务&#xff1a;multi 作用&#xff1a;设定事务的开启位置&#xff0c;执行此命令后&#xff0c;后续所有指令均加入事务中 执行事务&#xff1a;exec 作用&#xff1a;设定事务结束的位置&#xf…
阅读更多...
【MySQL】表的增删改查（一）

【MySQL】表的增删改查（一）

你可以了解世间万物&#xff0c;但追根溯源的唯一途径便是亲身尝试。——《心灵捕手》 前言&#xff1a; 大家好&#xff0c;我是拳击哥&#xff0c;今天给大家讲解的是mysql表GRUD操作中的新增数据、查询数据以及表中数据的排序、去重等。因篇幅过长&#xff0c;分为两期来讲解…
阅读更多...
Linux——匿名管道、命名管道及进程池概念和实现原理

Linux——匿名管道、命名管道及进程池概念和实现原理

目录 一.什么是匿名管道 二.如何使用匿名管道 &#xff08;一&#xff09;.pipe原理 &#xff08;二&#xff09;.pipe使用 三.命名管道概念及区别 &#xff08;一&#xff09;.什么是命名管道 &#xff08;二&#xff09;.与匿名管道的联系和区别 四.命名管道的使用 &…
阅读更多...
Python——分支语句

Python——分支语句

1.bool 数据类型&#xff1a;真和假&#xff0c;只有两个值&#xff0c;就是True和False。 2.if语句使用的语法&#xff1a; 3.else语句&#xff1a;&#xff08;同上&#xff09; 4.比较运算符&#xff1a; a b&#xff1a;a和b是否相等 a ! b&#xff1a; a和b是否不相等 a…
阅读更多...
【网络层】子网划分、无分类编址CIDR、构成超网、ARP协议

【网络层】子网划分、无分类编址CIDR、构成超网、ARP协议

注&#xff1a;最后有面试挑战&#xff0c;看看自己掌握了吗 文章目录子网划分-----减少浪费IP----两级IP不够灵活-----变三级IP地址-----对外还是表现以前的网络号---------只是拿出部分主机号来做子网号子网划分实例-------对外不展示内部的子网划分----子网掩码---与运算---…
阅读更多...
什么是【固件】？

什么是【固件】？

文章目录一、软件 硬件 固件二、BIOS&#xff08;Basic Input/output System&#xff09;三、百度百科的解释四、固件的工作原理五、应用六、参考链接一、软件 硬件 固件 通常我们会将硬件和软件分开看待&#xff0c;二者协同工作为我们提供计算机的体验。硬件是摸得着的实体&…
阅读更多...
[附源码]计算机毕业设计学生宿舍维修管理系统Springboot程序

[附源码]计算机毕业设计学生宿舍维修管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023