当前位置：首页 > news >正文

记录 App webview加载h5页面有上传图片，应用商店审核必须加授权提示问题的解决方案

news 2026/2/4 23:38:30

场景：
1、项目内加载了h5页面的七鱼客服，(相当于webview 加载help.html)
2、应用上架要求必须有授权提示弹窗
解决思路
1、客服的h5 页面在跳转时候，给父层webview 发消息，注入一段拦截代码，监听到有上传操作时候，调用原生的授权提示，下次点击时候就可以根据返回的授权信息判断是否要执行input file 的click事件。

注：项目用uniapp 写的，自己写了一套webview 和 h5 通信的逻辑，文中$abAct(‘getImagePermission’, ‘’, function(err,succ) {}) ； $p os tM ess a g e (" k e f u I nj ec t "); 都是通信交互方法，其中$ abAc是有回调的。可以自行处理这块逻辑

客服的html
help.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /></head><style>#YSF-BTN-HOLDER {display: none;}</style><body></body><script src="这里是引入我通信的js代码"></script><script type="text/javascript">let kefuCode = query("kefuCode");let url = "";let plt = '"https://qiyukf.com/script/';if (location.href.startsWith("https")) {url = "https://qiyukf.com/script/";} else {url = "http://qiyukf.com/script/";}if (!kefuCode || kefuCode == 0) {url = url + "七鱼客服的key" + ".js";} else {url = url + kefuCode + ".js";}url = url + "?subdomain=1";console.log("加载客服js", url);var script = document.createElement("script");script.type = "text/javascript";script.src = url;var flage = false;script.onload = function () {// 加载完成后的操作initKefu();};document.body.appendChild(script);window.onload = function () {initKefu();};function initKefu() {if (flage) {return;}flage = true;ysf.on({onload: function () {var data = [];try {data = query("data")? JSON.parse(decodeURIComponent(query("data"))): [];if (data.length > 1 && data[1].url) {ysf("product", {show: 1, // 1为打开， 其他参数为隐藏（包括非零元素）title: data[1].title,desc: data[1].desc,picture: data[1].picture,note: data[1].note,url: data[1].url,});data.splice(1, 1);}} catch (e) {console.error(e);}var uid = query("uid") ? query("uid") : GetRandomNum(10000, 999999);console.log("uiduiduiduid", uid);var cfg = {uid: uid,name: query("name"),mobile: query("mobile"),data: JSON.stringify(data),success: function () {// 成功回调console.log(ysf.url());let ysfurl = ysf.url();if (data[0].templateId) {ysfurl = ysf.url() + "&templateId=" + data[0].templateId;}console.log(uniReady);try {if (ab_.uniApp && query("newHelp")) {uniReady(() => {//这里是调用获取授权的方法，是自己封装的 webview 和 h5 的通信方式,可自行处理$postMessage("kefuInject");location.href = ysfurl;});return;}} catch (e) {console.log(e);}location.href = ysfurl;},error: function () {// 错误回调location.href = ysf.url();},};// console.log(cfg)ysf.config(cfg);},});}function GetRandomNum(Min, Max) {var Range = Max - Min;var Rand = Math.random();return Min + Math.round(Rand * Range);}function query(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) {return decodeURIComponent(r[2]);}return null;}</script>
</html>

注入js的代码
sdk.ts

 kefuInject(v: string, tag?: any, source?: any, proj?: any) {proj = proj || vueSelf.$proj(tag, source)// #ifdef APPsetTimeout(() => {console.log('kefuInject', proj)// if(false) {//     return// }proj.evalJs(`window.permissionApply = false// window.οnlοad=function(){//  alert('0 οnlοad')loadJS( 'https://p2.dev.yiyiny.com/plt-demo/static/open.plt.0.1.js?v=2',function(){// ab_.vconsoled = true//加载,并执行回调函数injectKefuPermissions()//  alert('2injectKefuPermissions' )});// }function injectKefuPermissions() {var videoInput = document.querySelector('input[accept="video/*"]')var imageInput =  document.querySelector('input[accept="image/*"]')if (!imageInput) {setTimeout(injectKefuPermissions, 500)}else{var imageInputClick = function(e) {saveImagePermissionApply(imageInput,e);}var videoInputClick = function(e) {saveImagePermissionApply(videoInput,e);}imageInput.addEventListener('click', imageInputClick);videoInput.addEventListener('click', videoInputClick);}}function saveImagePermissionApply(el,e){// alert('0' + window.permissionApply)if(!window.permissionApply){// alert('1' +window. permissionApply)e.preventDefault();uniReady(function() {$abAct('getImagePermission', '', function(err,succ) {// alert('2' + succ)if(succ){window.permissionApply = trueimageInput.removeEventListener('click', imageInputClick)videoInput.removeEventListener('click', videoInputClick)el.click()}})  })}else{//  window.permissionApply = false}}function loadJS(url, callback) {var script = document.createElement('script'), fn = callback || function() {};script.type = 'text/javascript';// IEif (script.readyState) {script.onreadystatechange = function() {if (script.readyState == 'loaded'|| script.readyState == 'complete') {script.onreadystatechange = null;fn();}};} else {// 其他浏览器script.onload = function() {fn();};}script.src = url;document.getElementsByTagName('head')[0].appendChild(script);}`)}, 3000);// #endif},};

获取权限代码

SdkActs.ts

getImagePermission(v?: string, tag?: any, source?: any, proj?: any) {// proj = proj || vueSelf.$proj(tag, source);let data = {state: false,//是否原生授权denied: true,//是否提示permissionList: [{permissionName: "相机",tips: "允许应用打开摄像头",androidPermission: "android.permission.CAMERA",},{permissionName: "相册",tips: "允许应用读取存储卡上的照片、媒体内容和文件",androidPermission: "android.permission.READ_EXTERNAL_STORAGE",},],};SdkActs.userPermissions(JSON.stringify(data), null, null, null,function (res) {console.log("getImagePermission res", res);// console.log("getImagePermission back", back);// back(res === 1 ? true : false)vueSelf.$callback('abAct.getImagePermission', null, res == 1 ? true : false);});return true},_androidPermissions: <any>undefined,//此为48小时授权和提示的代码userPermissions(v?: string, tag?: any, source?: any, proj?: any, back?: any) {proj = proj || vueSelf.$proj(tag, source);// #ifdef APPtry {if (axCc.info.platform == "android") {let permissionDs: any[] = JSON.parse(v);let permissionState = false;let permissionDenied = "";if (!Array.isArray(permissionDs)) {// @ts-ignoreif (Array.isArray(permissionDs.permissionList)) {// @ts-ignorepermissionState = permissionDs.state;// @ts-ignorepermissionDenied = permissionDs.denied;// @ts-ignorepermissionDs = permissionDs.permissionList;} else {permissionDs = [permissionDs];}}let androidPermissionsDirty = false;let androidPermissions = SdkActs._androidPermissions;if (!androidPermissions) {androidPermissions = axCc.getStorage("_androidPermissions");if (typeof androidPermissions !== "object") {androidPermissions = {};}SdkActs._androidPermissions = androidPermissions;}let mainActivity: any;let nowTime: any;let deniedTime: any;let deniedPermissions;let requestPermissions;let nonePermissions = false;let tips = "";for (let i = permissionDs.length - 1; i >= 0; i--) {let permissionD = permissionDs[i];let permission = permissionD.androidPermission;let permissionV = androidPermissions[permission];if (permissionV === 1) {permissionDs.splice(i, 1);} else {mainActivity || (mainActivity = plus.android.runtimeMainActivity());if (mainActivity.checkSelfPermission(permission) === 0) {permissionDs.splice(i, 1);androidPermissionsDirty = true;androidPermissions[permission] = 1;} else {// 暂停二次授权间隔48小时if (!deniedTime) {nowTime = new Date().getTime();deniedTime = nowTime - 48 * 24 * 3600;}if (permissionV > deniedTime) {// 暂停二次授权(deniedPermissions || (deniedPermissions = [])).push(permissionD);} else {if (permissionD.tips && !permissionState) {// 可授权提示tips = permissionD.tips + tips;(requestPermissions || (requestPermissions = [])).push(permission);} else {nonePermissions = true;}}}}}if (androidPermissionsDirty) {// 权限记录androidPermissionsDirty = false;axCc.saveStorage("_androidPermissions", androidPermissions);}if (nonePermissions) {// 没有授权back? back(-1): vueSelf.$callback("abAct.userPermissions", proj, -1);return;} else if (deniedPermissions) {// 暂停二次授权if (permissionDenied) {uni.showModal({title: "提示",content: "没有权限",showCancel: false,complete(result) {back? back(-2): vueSelf.$callback("abAct.userPermissions", proj, -2);},});return true;}back? back(-2): vueSelf.$callback("abAct.userPermissions", proj, -2);return;} else if (tips) {uni.showModal({title: "权限申请",content: tips,success(res) {if (res.confirm) {// https://www.html5plus.org/doc/zh_cn/android.html#plus.android.requestPermissionsplus.android.requestPermissions(requestPermissions, (e) => {for (let i = e.deniedAlways.length - 1; i >= 0; i--) {androidPermissions[e.deniedAlways[i]] = nowTime;}for (let i = e.deniedPresent.length - 1; i >= 0; i--) {androidPermissions[e.deniedPresent[i]] = nowTime;}for (let i = e.granted.length - 1; i >= 0; i--) {androidPermissions[e.granted[i]] = 1;}axCc.saveStorage("_androidPermissions", androidPermissions);if (e.deniedAlways.length > 0) {//权限被永久拒绝// 弹出提示框解释为何需要定位权限，引导用户打开设置页面开启back? back(-2): vueSelf.$callback("abAct.userPermissions", proj, -2);} else if (e.deniedPresent.length > 0 ||e.granted.length <= 0) {//权限被临时拒绝// 弹出提示框解释为何需要定位权限，可再次调用plus.android.requestPermissions申请权限back? back(-1): vueSelf.$callback("abAct.userPermissions", proj, -1);} else {//权限被允许//调用依赖获取定位权限的代码back? back(1): vueSelf.$callback("abAct.userPermissions", proj, 1);}});} else if (res.cancel) {// 拒接授权back? back(0): vueSelf.$callback("abAct.userPermissions", proj, 0);}},});return true;}back ? back(1) : vueSelf.$callback("abAct.userPermissions", proj, 1);return;}} catch (e) {console.error(e);}// #endifback ? back(1) : vueSelf.$callback("abAct.userPermissions", proj, 1);},

记录 App webview加载h5页面有上传图片，应用商店审核必须加授权提示问题的解决方案

相关文章：

记录 App webview加载h5页面有上传图片，应用商店审核必须加授权提示问题的解决方案

Stable Diffusion模型原理

【Android 13】使用Android Studio调试系统应用之Settings移植（二）：构建settings app项目目录

w16php系列之基础数组

【C语言】指针详解（四）

算法leetcode｜94. 二叉树的中序遍历（多语言实现）

3.[BUUCTF HCTF 2018]WarmUp1

rocky linux9 安装go 即接下去

NLP中的嵌入层

MongoDB文档操作

解决谷歌浏览器下CSS设置字体小于12px无效办法，关于如何在chrome里实现小于12px的文字。

springboot(ssm智慧校园之家长子系统智慧校园系统Java系统

RM3100 stm32驱动(硬件i2c)

视觉学习（7） —— 接收数据和发送数据以及全局变量和浮点数

leetcode 1576. 替换所有的问号（easy）（优质解法）

Advanced IP Scanner - 网络扫描器

搜索百度百科官方创建入口，怎么创建更新公司的百度百科词条呢？

大数据与人工智能|全面数字化战略与企业数字化转型（第1节）

【四】【C语言\动态规划】地下城游戏、按摩师、打家劫舍 II，三道题目深度解析

【大数据存储与处理】开卷考试总复习笔记

Docker 离线安装指南

MMaDA: Multimodal Large Diffusion Language Models

Python爬虫（二）：爬虫完整流程

微服务商城-商品微服务

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

稳定币的深度剖析与展望

深度学习习题2

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别