记一次uni

2023-12-28 09:13| 来源: 网络整理| 查看: 265

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

前言

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。虽然说是跨平台，但相对于各个平台还是有稍微些不同的适配，在开发过程也容易遇到一些适配问题，本文记录一下在开发微信H5时，有一个ios手机不能弹出扫码界面的问题。

问题起源

首先uni-app h5是不支持微信扫码功能的，所以我们如果需要，就得引入微信官方的sdk. 首先这里是uni-app针对官方sdk做的适配文档uniapp.dcloud.net.cn/api/system/…

可以看到除了H5是不支持的。所以我们得去找到微信的官方sdk文档 developers.weixin.qq.com/doc/offiacc… 官方文档开发前一定要看！！！

开发步骤

先引入官方sdk

npm install jweixin-module --save

接着在我们需要调用扫码的界面引入

import jweixin from 'jweixin-module' //获取h5参数 getH5Config(platform){ let configUrl=window.location.href.split('#')[0] console.log('---url--',configUrl) let params={ url:configUrl } h5GetConfigParams(params).then(res=>{ this.getConfig(res); }) },

这个方法是把我们当前界面的url传给后台，回调对应的参数给我们初始化，重要的方法在getConfig里面

getConfig(res) { let that=this // 配置config信息 jweixin.config({ debug: false, appId: res.appId, // 必填，公众号的唯一标识 timestamp: res.timestamp, // 必填，生成签名的时间戳 nonceStr: res.nonceStr, // 必填，生成签名的随机串 signature: res.signature, // 必填，签名 jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表 }); // 通过ready接口处理成功验证 jweixin.ready(function () { jweixin.checkJsApi({ jsApiList: ['scanQRCode'], success: function (res) { console.log('检验成功'); that.handleScan() } }); }); // 通过error接口处理失败验证 jweixin.error(function (res) { console.log('校验失败'); }); },

如果验证通过那么就可以调起我们扫码的界面了看 handleScan 方法。

jweixin.scanQRCode({ needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有 success: function (res) { var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果 } });

正常通过上面的方法就能在微信H5里调用起微信扫一扫界面了。但是在ios手机上出现调用不起来，通过排查是url路径问题。在uni-app上我们跳转一个界面都是通过route api跳转，但是ios手机上这里识别到的路径会有问题吗所以得换种方式。

if(res.platform=='android'){ uni.$u.route({ url:"pagesDetail/index/chipList", params:{ seriesName:this.seriesName, chipName:this.metaChoose.name, contract:this.metaChoose.contract, } }) }else{ let configUrl= window.location.protocol+"//"+ window.location.host+"/pagesDetail/index/chipList?seriesName="+this.seriesName +'&chipName='+this.metaChoose.name+'&contract='+this.metaChoose.contract window.open(configUrl) }

这里做了安卓手机和ios手机的判断，如果在安卓手机上，正常路由跳转就行，但是如果是ios 得通过拼凑下一个跳转页面的完整路径，在通过 window.open(configUrl) 来打开新的页面。

总结

这里是开发过程中碰到的一个扫码问题在ios手机的问题，因此记录一下，如果后续有人碰到相关问题，可以有个思路参考。

【本文地址】

记一次uni

记一次uni

今日新闻

推荐新闻