WKWebView与JS交互报错的问题

本文介绍如何通过H5页面调用App内置的相机扫描功能,利用WKWebView与JS交互实现扫一扫,并解决了在反馈数据过程中遇到的错误。文章强调了function延迟执行和位置的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近有个需求是通过h5唤起App相机进行扫一扫功能,由于公司前端并不是大神,需要我们App端进行辅助,于是我想到了利用与JS之间的交互,通过JS接口唤起我封装好的扫描控件,扫描到结果后再通过JS预留的接口把数据传回JS处理。

刚开始是没问题的   WKWebView 通过设置预留接口,可以完美唤起扫描控件

 [userContentController addScriptMessageHandler:self name:@"qrCodeWord"];//反馈预留

 [userContentController addScriptMessageHandler:self name:@"qrCodeClick"];//响应预留

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

{

    if ([message.name isEqualToString:@"callFunction"]) { //调取扫一扫控件

      }

}

但是在通过接口反馈到JS的时候一直报错

Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=SyntaxError: Unexpected EOF, 

接口为

     

``` // import instance from "../http/mhttp"; import cookie from "js-cookie"; import router from "../router"; // import md5 from 'js-md5' export default { //獲取cookies值 // (详情页使用沉浸式) getCookie(name) { let strcookie = document.cookie; let arrcookie = strcookie.split("; "); for (let i = 0; i < arrcookie.length; i++) { let arr = arrcookie[i].split("="); if (arr[0] == name) return unescape(arr[1]); } return null; }, //獲取客戶端 client() { return this.getCookie("odrplatform") || ""; }, translateStatusBar(status_true) { let odrplatform = cookie.get("odrplatform"); if (odrplatform == "android") { window.apps.translateStatusBar(status_true); } else if (odrplatform == "ios") { window.webkit.messageHandlers.translateStatusBar.postMessage(`${status_true}`); } }, //去原生收银台 0 gotoPay(out_trade_no, money) { // let client = this.getCookie('odrplatform');//客户端 if (this.client() == "android") { window.apps.gotoPay(out_trade_no, money); } else if (this.client() == "ios") { window.webkit.messageHandlers.gotoPay.postMessage(`${out_trade_no},${money}`); } else { // console.log('Unable come back'); router.go(-1); } }, //去原生收银台 (积分) gotoPay2(out_trade_no, money,type,point) { // let client = this.getCookie('odrplatform');//客户端 if (this.client() == "android") { window.apps.gotoPay2(out_trade_no, money,type,point); } else if (this.client() == "ios") { window.webkit.messageHandlers.gotoPay.postMessage(`${out_trade_no},${money}`); } else { // console.log('Unable come back'); router.go(-1); } }, //去原生收银台 1 gotoNodePay(out_trade_no, money, number, is_rice_wine,shipping_fee) { // let client = this.getCookie('odrplatform');//客户端 if (this.client() == "android") { window.apps.gotoNodePay(out_trade_no, money, number, is_rice_wine, shipping_fee); } else if (this.client() == "ios") { window.webkit.messageHandlers.gotoNodePay.postMessage(`${out_trade_no},${money},${number},${is_rice_wine}, ${shipping_fee}`); } else { // console.log('Unable come back'); router.go(-1); } }, //退出h5頁面 exit() { // let client = this.getCookie('odrplatform');//客户端 if (this.client() == "android") { window.apps.finish(); } else if (this.client() == "ios") { window.webkit.messageHandlers.iosAction.postMessage("exit"); } else { // console.log('Unable come back'); router.go(-1); } }, //返回或者退出h5頁面 goback() { // let client = this.getCookie('odrplatform');//客户端 if (this.client() == "android") { window.apps.goback(); } else if (this.client() == "ios") { window.webkit.messageHandlers.iosAction.postMessage("goBack"); } else { // console.log('Unable come back'); } }, //去登錄 gologin() { // let client = this.getCookie('odrplatform');//客户端 if (this.client() == "android") { window.apps.gologin(); } else if (this.client() == "ios") { window.webkit.messageHandlers.iosAction.postMessage("login"); } }, //跳原生购物车 goShoppingCart() { let odrplatform = cookie.get("odrplatform"); if (odrplatform == "android") { window.apps.goShoppingCart(); } else if (odrplatform == "ios") { window.webkit.messageHandlers.goShoppingCart.postMessage({}); } }, };```uni需要打包成h5
最新发布
03-13
<think>嗯,用户给了一段JavaScript代码,是关于uni-app打包成H5时处理原生交互的。我需要先理解这段代码的作用。看起来这是一个工具模块,用来处理原生应用(Android和iOS)的通信,比如支付、导航、状态栏调整等。用户可能想知道如何正确打包成H5,并确保这些原生功能在H5环境下正常工作,或者处理可能的问题。 首先,代码中使用了js-cookie来获取客户端平台信息,通过cookie中的odrplatform字段判断是Android还是iOS,然后调用不同的原生方法,比如window.apps(Android的WebView)和window.webkit.messageHandlers(iOS的WKWebView)。如果不在原生环境中,就使用Vue Router进行页面跳转。 用户的需求可能是想知道在打包成H5时,这些原生相关的代码如何处理,比如在H5环境下没有原生方法,会不会报错,或者需要做哪些适配。可能需要考虑以下几点: 1. **环境判断**:在H5环境下,如何避免调用原生方法导致的错误。例如,代码中已经用client()方法判断平台,当不是Android或iOS时,执行router.go(-1)。但H5可能没有这些客户端信息,因此可能需要额外的环境检测。 2. **H5路由处理**:当无法调用原生返回或退出时,使用Vue Router进行页面回退。需要确保H5的路由配置正确,避免router.go(-1)出现问题。 3. **接口兼容性**:H5中无法使用原生支付,可能需要替换为H5的支付方式,比如支付宝或微信的H5支付接口。用户需要调整支付逻辑,在H5环境下调用不同的支付方法。 4. **调试和错误处理**:在H5中,需要处理原生方法不存在的情况,比如添加错误捕获或条件判断,防止JavaScript报错导致整个应用崩溃。 另外,用户可能没有明确说明遇到的问题,比如打包后功能失效,或者控制台报错。需要建议他们在H5中如何处理这些原生交互,比如使用条件编译,或者动态检测运行环境(如uni-app的uni.getSystemInfoSync()),从而在不同平台执行不同代码。 可能还需要考虑第三方库的使用,比如js-cookie在H5中的兼容性,以及是否需要替换为uni-app自带的存储方法,如uni.setStorageSync。不过原代码中使用的是cookie,可能在H5中仍然有效,但要注意跨域问题。 最后,用户可能需要一个步骤指南,说明如何调整代码以适应H5打包,确保功能正常,同时处理平台差异。需要分点说明,结构清晰,帮助用户逐步解决问题,比如环境判断、路由处理、支付接口替换、调试建议等。</think>以下是针对你提供的代码进行UNI-APP打包成H5的分析和优化建议: ### 一、代码功能解析 这段代码实现了: 1. 原生平台交互(Android/iOS) 2. 支付功能对接 3. 导航控制 4. 客户端环境判断 5. Cookie操作 ### 二、H5打包关键处理点 #### 1. 环境判断优化(需修改) ```javascript // 建议改用UNI官方方法判断平台 function getPlatform() { return uni.getSystemInfoSync().platform; // 返回 android/ios/其他 } // 使用示例 if (getPlatform() === 'android') { // Android处理 } else if (getPlatform() === 'ios') { // iOS处理 } else { // H5处理 } ``` #### 2. 原生方法兼容处理(关键) ```javascript // 建议增加方法存在性检查 callNativeMethod(methodName, params) { if (typeof window.apps !== 'undefined') { // Android处理 } else if (window.webkit?.messageHandlers) { // iOS处理 } else { // H5备用逻辑 uni.showToast({ title: 'H5环境特殊处理', icon: 'none' }) } } ``` #### 3. 支付功能适配方案 ```javascript // H5支付需要单独实现 gotoPayH5(out_trade_no, money) { uni.requestPayment({ provider: 'alipay', // 或wxpay orderInfo: { // 支付参数 }, success: (res) => { console.log('支付成功'); }, fail: (err) => { console.log('支付失败'); } }) } ``` ### 三、路由处理优化建议 ```javascript // 统一使用uni导航方法 goback() { if (this.isNative()) { // 原生返回逻辑 } else { uni.navigateBack({ delta: 1 }) } } ``` ### 四、调试建议 1. **开启调试模式**: ```javascript // main.js Vue.config.productionTip = true uni.setEnableDebug({ enableDebug: true }) ``` 2. **跨平台处理**: ```javascript // 条件编译示例 // #ifdef H5 console.log('当前是H5环境'); // #endif ``` ### 五、安全建议 1. Cookie存储建议替换为: ```javascript uni.setStorageSync('odrplatform', 'android') uni.getStorageSync('odrplatform') ``` 2. 敏感操作增加安全验证: ```javascript // 支付前校验 verifyPayment(params) { return uni.request({ url: '/api/verify-payment', method: 'POST', data: params }) } ``` ### 六、完整适配方案 1. 创建环境检测工具类 2. 实现H5专用支付通道 3. 封装统一导航控制器 4. 增加H5异常处理机制 5. 使用UNI官方API替换浏览器API > 建议使用`uni-app`的[条件编译](https://uniapp.dcloud.io/tutorial/platform.html)处理平台差异,打包时通过`manifest.json`配置H5基础路径等参数。 是否需要进一步说明某个具体功能的H5实现细节?
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值