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

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

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

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

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

目录

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

图片上传授权

app版本获取 

 图片下载

电话授权

授权同意处理统一方法

拒绝授权处理统一方法

图片上传授权

 window.AndroidFunction.requestCameraPermission();检查授权

handleSend(){if (this.$utils.isAndroid_ios() == "andriod") {window.AndroidFunction.requestCameraPermission();}},

授权同意和拒绝同意，授权统一调用上传文件方法，拒绝授权提示； 

    // 授权同意permissionGranted(){this.isShow=false;this.$refs.uploadFile.chooseFile();},// 不同意permissionDenied(){this.isShow=true;this.$toast.fail({message:"您拒绝权限申请,此功能将不能正常使用"});},

created() {this.$utils.isAndroid_ios() == "ios"?this.isShow = false:this.isShow = true;},

app版本获取 

获取版本方法：

this.isVersion();

window.AndroidFunction.getVersionName();获取安卓 版本方法挂载到window;

window.webkit.messageHandlers.callNative.postMessage(),ios方法，name根据协商定义

isVersion(){if (this.$utils.isAndroid_ios() == "andriod") {let versionJson = window.AndroidFunction.getVersionName();if (this.$utils.isEmpty(versionJson)) {this.$toast("未获取到版本号");this.version = "";} else {this.version = versionJson;}}if (this.$utils.isAndroid_ios() == "ios") {new Promise((resolve, reject) => {window.webkit.messageHandlers.callNative.postMessage({name: "appInfo",data: {},});resolve();}).then((res) => {window.callWeb = this.callWeb;});}},

window.callWeb = this.callWeb

ios数据处理方法体

callWeb(versionIos) {let versionJson = versionIos;// alert(JSON.stringify(versionJson))if (this.$utils.isEmpty(versionJson)) {this.$toast.fail("未获取到版本号");this.version = "";} else {if(versionJson.name=="appInfo"){this.version = versionJson.data.version;}if(versionJson.name=="推送消息"){}  }},

 图片下载

// 点击下载图标downloadIMG() {console.log(this.showImg[0], "消息详情--点击下载图标");// 调用图片下载// 1.判断安卓还是苹果if (this.$utils.isAndroid_ios() == "ios") {// 调用苹果下载图片方法console.log("消息详情--这是苹果端");window.webkit.messageHandlers.callNative.postMessage({name: "下载图片到相册",data: {url:this.showImg[0],remark:'客服微信二维码'}});} else if (this.$utils.isAndroid_ios() == "andriod") {// 2.调用安卓下载图片方法window.AndroidFunction.saveImage2Gallery(this.showImg[0]);}},

ios方法定义：name指定值，data需要传递参数 

window.webkit.messageHandlers.callNative.postMessage({name: "下载图片到相册",data: {url:this.showImg[0],remark:'客服微信二维码'}
});

安卓方法：记得传递参数 

window.AndroidFunction.saveImage2Gallery(this.showImg[0]);

电话授权

电话沟通

window.AndroidFunction.checkPermission(）检查是否有权限

返回0表示拒绝授权

返回-1主动获取授权

否则可拨打电话 

// 电话handlePhone(){if (this.$utils.isAndroid_ios() == "andriod") {// 电话this.phoneVal = window.AndroidFunction.checkPermission("android.permission.CALL_PHONE");if(this.phoneVal == 0){// 拒绝this.isShowphone=true;window.AndroidFunction.requestPermission("android.permission.CALL_PHONE");}else if(this.phoneVal == -1){this.isShowphone=true;window.AndroidFunction.getPermission();}else{this.isShowphone=false;}}},

 支付调用

确认支付

这里分安卓和ios方法

 window.AndroidFunction.wxpay(appId,partnerId,prepayId,nonceStr,timeStamp,packageValue,sign);//安卓方法

window.webkit.messageHandlers.callNative.postMessage(）ios方法

// 点击确认支付handleSurePay(){console.log(this.goodsId,"商品id")//判断是否在微信内支付，需要在微信外支付if(this.$utils.isWeiXin()){this.$toast.fail("请选择在微信外支付");return;}else if(this.payType=="1"){// 微信支付H5 Appconsole.log(this.payType,"选择支付方式");let payParams = {goodsId:this.goodsId,}wxCreateOrder(payParams).then(res=>{if(res.code == 200){this.isShowVip= false;this.isShoosePayType = false;console.log(res,"支付微信");// let payData = JSON.stringify(res.data);let [appId,partnerId,prepayId,nonceStr,timeStamp,packageValue,sign] = [res.data.appId,res.data.partnerId,res.data.prepayId,res.data.nonceStr,res.data.timeStamp,res.data.packageValue,res.data.sign];// 调用安卓方法if(this.$utils.isAndroid_ios() == "andriod"){window.AndroidFunction.wxpay(appId,partnerId,prepayId,nonceStr,timeStamp,packageValue,sign);this.wxpayBack(payResult);}else{// iosnew Promise((resolve, reject) => {window.webkit.messageHandlers.callNative.postMessage({name: "支付-微信",data: {appId,partnerId,prepayId,nonceStr,timeStamp,packageValue,sign},});resolve();}).then((res) => {window.callWeb = this.callWeb;});}}else{this.$toast.fail("请求失败");}})}else if(this.payType=="2"){// 支付宝支付h5 app 跳转页面 // this.$router.push({path:"/memberCenter/aliPay"});let alipayParams = {// buyUserId:this.id,goodsId:this.goodsId,// terminal:this.terminal}alipayPay(alipayParams).then(res=>{this.isShowVip= false;this.isShoosePayType = false;console.log(res,"支付宝支付");if(res.code == 200){let bizContent = res.data.bizContent;// 调用安卓方法let [timeout_express,product_code,total_amount,subject,body,out_trade_no,timestamp] = [bizContent.timeout_express,bizContent.product_code,bizContent.total_amount,bizContent.subject,bizContent.body,bizContent.out_trade_no,bizContent.timeStamp];// alert(res.data.notifyUrl)if(this.$utils.isAndroid_ios() == "andriod"){window.AndroidFunction.alipay(timeout_express,product_code,total_amount,subject,body,out_trade_no,timestamp,res.data.notifyUrl);this.alipayBack(payResult,payInfo);}else{// iosnew Promise((resolve, reject) => {window.webkit.messageHandlers.callNative.postMessage({name: "支付-支付宝",data: {timeout_express,product_code,total_amount,subject,body,out_trade_no,timestamp,notifyUrl:res.data.notifyUrl},});resolve();}).then((res) => {window.callWeb = this.callWeb;});}}else{this.$toast.fail("请求失败");}})}else{this.$toast.fail("请选择支付方式");return;}},

授权同意处理统一方法

mounted中使用

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

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

拒绝授权处理统一方法

mounted中使用

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

permissionDenied(){//拒绝授权数据处理
}

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