【Vue 调用微信扫码 IOS报错 解决办法】

已于 2022-11-28 23:37:21 修改
阅读量2k 收藏 2
点赞数 1
分类专栏： 前端 Java 文章标签： 前端 vue spring boot
于 2022-11-28 23:33:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39749620/article/details/128089505
版权

遇到一个问题，H5调用摄像头扫码，安卓环境下基本所有机型都可以调起摄像头，但是IOS 只有少部分机型才能调用，参考了网上很多例子

比如以下两位老大哥的例子

Vue 移动端实现调用相机扫描二维码或条形码_无解的菜鸟晖的博客-CSDN博客_browsermultiformatreader

vue 实现扫条形码与二维码 H5 兼容 苹果IOS_→_→BéLieve的博客-CSDN博客

实际测试下来安卓确实可以扫码，但是识别率不高(具体不知道为什么，可能是因为扫码页面是集成在其他微信公众号的应用的工作台中)。

而且IOS大部分都不行，显示 “此浏览器不支持流API”或者什么都不显示。

后来经过咨询，发现可以通过调用微信JS-SDK进行扫码，

于是在官网找到了一篇文章，链接如下

概述 | 微信开放文档

注册公众号流程在此不做描述，下面接着说调用过程。

在初始化描述中，有这么一段话，如图所示，必须要有以下几个参数才能进行sdk初始化，进而进行后续操作。

需要自己申请公众号，获取appId和appKey，申请流程在此不做描述。

import wx from 'weixin-js-sdk'

handleClickScan() {
  //url必须是不带#号的
	//这里【url参数一定是去参的本网址】，请求后端接口换取signature
  let ua = navigator.userAgent.toLowerCase();
  if (/iphone|ipad|ipod/.test(ua)) {
    this.newUrl = window.location.href.split("#")[0];
  } else if (/android/.test(ua)) {
    this.newUrl = window.location.href;
  }
  getWxScanConfig(this.newUrl).then(res => {
    wx.config({
			// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      debug: false, 
      // 必填，公众号的唯一标识
      appId: res.data.data.appId,
      // 必填，生成签名的时间戳
      timestamp: res.data.data.timestamp,
      // 必填，生成签名的随机串
      nonceStr: res.data.data.nonceStr,
      // 必填，签名
      signature: res.data.data.signature,
      // 必填，需要使用的JS接口列表
      jsApiList: ['scanQRCode','checkJsApi']
    })
  })
  wx.ready(() => {
    // config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
    // config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
    wx.checkJsApi({
      // 判断当前客户端版本是否支持指定JS接口
      jsApiList: ['scanQRCode'],
      success: res => {
        // 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
        if (res.checkResult.scanQRCode === true) {
          wx.scanQRCode({
            // 微信扫一扫接口
            desc: 'scanQRCode desc',
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						// 可以指定扫二维码还是一维码，默认二者都有
            scanType: ['qrCode', 'barCode'], 
            success: result => {
							// 当needResult 为 1 时，扫码返回的结果
              let result = res.resultStr; 
              //具体处理xxxx
            }
          })
        } else {
          this.$Toast('抱歉，当前客户端版本不支持扫一扫')
        }
      },
      fail: res => {
        // 检测getNetworkType该功能失败时处理
        this.$Toast('fail' + res)
      }
    })
  })
  /* 处理失败验证 */
  wx.error(res => {
    // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
    this.$Toast('配置验证失败: ' + res.errMsg)
  })
}

不用说，生成签名及其他参数在后台最安全，所以，下面来写一个接口，按照微信文档签名过程进行签名即可，没什么复杂的逻辑。

/**
 * 获取微信配置
 *
 * @author: liudongxin
 * @date: 2022/11/10 - 19:12
 */
@ApiOperation(value = "获取微信配置")
@RequestMapping(value = "/getWxScanConfig", method = RequestMethod.GET)
public AjaxResult<WxConfigResponse> getWxScanConfig(String url) {
    WxConfigResponse configResponse = wxUtils.getScanConfig(url);
    if(StringUtils.isNotEmpty(configResponse)){
        return AjaxResult.success("获取配置成功", configResponse);
    }
    return AjaxResult.errorStr("初始化配置失败！");
}

工具类如下

/**
 * 微信工具
 *
 * @author: liudongxin
 * @date: 2022/11/17 9:25
 */
@Slf4j
@Component
public class ByWxUtils {

    @Autowired
    private WxAppConfig wxAppConfig;

    static ReentrantLock reentrantLock = new ReentrantLock();

    /**
     * 获取access_token
     */
    private String getToken() {
        String accessToken = RedisUtils.getCacheObject(RemoteVisitConstants.WX_ACCESS_TOKEN);
        if (StringUtils.isBlank(accessToken)){
            //尝试获取锁，获取到的执行没获取到的睡眠再次请求
            if (reentrantLock.tryLock()) {
                String url = String.format(RemoteVisitConstants.GET_ACCESS_TOKEN_URL, wxAppConfig.getAppId(), wxAppConfig.getAppSecret());
                //请求工具类，代码放最后
                JSONObject jsonObject = RestTemplateUtils.getJSONObject(url,null);
                try {
                    if (StringUtils.isNotEmpty(jsonObject)) {
                        accessToken = jsonObject.getString("access_token");
                        String expires = jsonObject.getString("expires_in");
                        RedisUtils.setCacheObject(RemoteVisitConstants.WX_ACCESS_TOKEN, accessToken);
                        RedisUtils.expire(RemoteVisitConstants.WX_ACCESS_TOKEN, Long.parseLong(expires), TimeUnit.MILLISECONDS);
                    }
                } catch (Exception e) {
                    log.info("错误代码：" + jsonObject + ":" + e.getMessage());
                } finally {
                    reentrantLock.unlock();
                }
            } else {
                try {
                    Thread.sleep(100);
                    accessToken = getToken();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
        return accessToken;
    }

    /**
     * 微信accessToken接口得到的accessToken可以保存2小时，为了
     * 设置定时，将定时设置为 1小时55分钟 ~ 2小时之内
     * access_token 的有效期目前为 2 个小时，需定时刷新，重复获取将导致上次获取的 access_token 失效；
     * 建议开发者使用中控服务器统一获取和刷新 access_token，其他业务逻辑服务器所使用的 access_token 均来自于该中控服务器，不应该各自去刷新，否则容易造成冲突，导致 access_token 覆盖而影响业务；
     * access_token 的有效期通过返回的 expires_in 来传达，目前是7200秒之内的值，中控服务器需要根据这个有效时间提前去刷新。在刷新过程中，中控服务器可对外继续输出的老 access_token，此时公众平台后台会保证在5分钟内，新老 access_token 都可用，这保证了第三方业务的平滑过渡；
     * access_token 的有效时间可能会在未来有调整，所以中控服务器不仅需要内部定时主动刷新，还需要提供被动刷新 access_token 的接口，这样便于业务服务器在API调用获知 access_token 已超时的情况下，可以触发 access_token 的刷新流程。
     */
    public void refreshAccessToken() {
        WxAccessToken token = JSONObject.parseObject(getToken(),WxAccessToken.class);
        String accessToken = token.getAccess_token();
        //微信token2小时过期,每小时重新获得一次，
        RedisUtils.setCacheObject(RemoteVisitConstants.WX_ACCESS_TOKEN, accessToken);
        RedisUtils.expire(RemoteVisitConstants.WX_ACCESS_TOKEN, Long.parseLong(token.getExpires_in()), TimeUnit.MILLISECONDS);
    }


    /**
     * 获取扫描配置
     * @param localUrl 调用页面的去参数路径
     */
    public WxConfigResponse getScanConfig(String localUrl) {
        String accessToken = getToken();
        //获取ticket 地址
        String url = String.format(RemoteVisitConstants.GET_JSAPI_TICKET_URL, accessToken);
        //返回值
        WxAccessToken wxAccessToken = RedisUtils.getCacheObject(RemoteVisitConstants.WX_JSAPI_TICKET);
        ByWxConfigResponse ticket = null;
        if (StringUtils.isNotEmpty(wxAccessToken)){
            ticket = createTicket(wxAccessToken,localUrl);
        }else {
            //请求工具类，代码放最后
            ResponseEntity<WxAccessToken> wxAccessTokenResponseEntity = RestTemplateUtils.get(url, WxAccessToken.class);
            if (wxAccessTokenResponseEntity.getStatusCodeValue() == 200){
                wxAccessToken = wxAccessTokenResponseEntity.getBody();
                //判断返返回值
                if (StringUtils.isNotNull(wxAccessToken) && wxAccessToken.getErrcode() == 0){
                    ticket = createTicket(wxAccessToken,localUrl);
                }else {
                    log.error("获取ticket失败："+wxAccessToken);
                }
            }else {
                log.error("获取ticket失败："+wxAccessTokenResponseEntity.getBody());
            }
        }
        return ticket;
    }

    private WxConfigResponse createTicket(WxAccessToken wxAccessToken,String localUrl) {
        WxConfigResponse wxConfigResponse = new WxConfigResponse();
        //生成签名的随机串
        String randomSalt = Md5Utils.getRandomSalt(16);
        wxConfigResponse.setNonceStr(randomSalt);
        wxConfigResponse.setAppId(byWxAppConfig.getAppId());
        wxConfigResponse.setTimestamp(DateUtils.getNowStamp());
        RedisUtils.setCacheObject(RemoteVisitConstants.WX_JSAPI_TICKET, wxAccessToken);
        RedisUtils.expire(RemoteVisitConstants.WX_JSAPI_TICKET, Long.parseLong(wxAccessToken.getExpires_in()), TimeUnit.MILLISECONDS);
        String toBeSigned = "jsapi_ticket="+wxAccessToken.getTicket()+"&noncestr="+wxConfigResponse.getNonceStr()+"&timestamp="+wxConfigResponse.getTimestamp()+"&url="+localUrl;
        wxConfigResponse.setSignature(StringUtils.getSha1(toBeSigned));
        return wxConfigResponse;
    }

}

/**
 * @Description: 微信公众平台获取
 * @author liudongxin
 */
@Configuration
@Data
public class WxConfigResponse {

    /**
     * 必填，appId
     */
    @ApiModelProperty("必填，appId")
    private String appId;

    /**
     * 必填，时间戳
     */
    @ApiModelProperty("必填，时间戳")
    private Long timestamp;

    /***
     * 必填，生成签名的随机串
     */
    @ApiModelProperty("必填，生成签名的随机串")
    private String nonceStr;

    /***
     * 必填，签名
     */
    @ApiModelProperty("必填，签名")
    private String signature;
}

本以为，调用接口返回参数之后，就可以进行初始化了。没想到，IOS还是有问题

签名错误!!! 好吧，不知道啥问题。看到wx.config 有 debug 参数，于是打开该参数，看看有什么数据返回。

结果返回的是URL不正确，真实签名的URL是这个URL。但是为什么安卓和IOS都是一样调用的，IOS不行？

于是又在网上搜了一番。

看到大家有类似的描述:

【IOS】：ios微信端，路由变化时，微信认为SPA的url是不变的。
【Android】：android微信端，路由变化时，SPA的url是会变的（官方在安卓6.2版本，才对SPA变化作了支持）

所以，发起签名的url必须是微信锁定的url。

于是想到在App.Vue里边就判断 页面路径然后直接缓存，后边直接调用。

就把下边这段代码放到了App.vue中，vue生命周期的created方法中。

//url必须是不带#号的
//这里【url参数一定是去参的本网址】，请求后端接口换取signature
let url; 
let ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
  url = window.location.href.split("#")[0];
} else if (/android/.test(ua)) {
  url = window.location.href;
}
getWxScanConfig(url).then(res => {
  wx.config({
    // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    debug: true, 
    // 必填，公众号的唯一标识
    appId: res.data.data.appId,
    // 必填，生成签名的时间戳
    timestamp: res.data.data.timestamp,
    // 必填，生成签名的随机串
    nonceStr: res.data.data.nonceStr,
    // 必填，签名
    signature: res.data.data.signature,
    // 必填，需要使用的JS接口列表
    jsApiList: ['scanQRCode','checkJsApi']
  })
})

然后在扫码页面进行扫码时候，直接调用微信扫码方法

wx.ready(() => {
    // config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
    // config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
    wx.checkJsApi({
      // 判断当前客户端版本是否支持指定JS接口
      jsApiList: ['scanQRCode'],
      success: res => {
        // 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
        if (res.checkResult.scanQRCode === true) {
          wx.scanQRCode({
            // 微信扫一扫接口
            desc: 'scanQRCode desc',
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						// 可以指定扫二维码还是一维码，默认二者都有
            scanType: ['qrCode', 'barCode'], 
            success: result => {
							// 当needResult 为 1 时，扫码返回的结果
              let result = res.resultStr; 
              //具体处理xxxx
            }
          })
        } else {
          this.$Toast('抱歉，当前客户端版本不支持扫一扫')
        }
      },
      fail: res => {
        // 检测getNetworkType该功能失败时处理
        this.$Toast('fail' + res)
      }
    })
  })
  /* 处理失败验证 */
  wx.error(res => {
    // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
    this.$Toast('配置验证失败: ' + res.errMsg)
  })
}

事实证明，还是不行。依然是一样的错误，不过有了些许变化，就是在首页刚进去的时候就开始报错，点击跳转到扫码页面，就报了另一个错误。简直离谱(还是自己太菜了)

于是又开始了我的百度旅程

看到了如下描述：

  • 建议按如下顺序检查：
  • 确认config正确通过。
  • 如果是在页面加载好时就调用了JSAPI，则必须写在wx.ready的回调中。
  • 确认config的jsApiList参数包含了这个JSAPI。

但是我做的上述都没有，猜测可能是因为调用了两次 wx.config，一次扫码页面，一次 App.vue 初始化，而且URL路径不对。

又找到了一些描述，在 permission.js 获取URL路径并缓存，都尝试了一遍，还是不行

继续寻找，发现一个如下的描述

地址栏问题:push的跳转不能被写入ios微信浏览器的地址栏

处理: push跳转改为window.loaction.href跳转

window.loaction.href 跳转才能改变地址栏的变化，才能签名成功

好吧，再做一次尝试，因为我做的扫码是A为主页，B页有一个按钮可以点击扫码，

是通过A页面   this.$router.push 跳转的B页面，可能微信JS检测到的页面发生了变化与签名不一致。

改为 window.location.href = "/path"; 其中 path替换为B页面 具体的path。

此时再次点击扫码，发现全部成功了IOS和安卓均可打开摄像头。

最后需要注意的是 如果扫码中 存在特殊符号 如 #，IOS 返回结果之前可能会进行处理，注意打印查看。

wxJs.ready(function () {
  wxJs.checkJsApi({
    jsApiList: ['scanQRCode'],
    success: function (res) {
      if (res.checkResult.scanQRCode === true) {
        wxJs.scanQRCode({ // 微信扫一扫接口
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (result) {
            // 当needResult 为 1 时，扫码返回的结果
			// 注意如果扫码中 存在特殊符号 如 #，IOS 返回结果可能会被处理。
  			this.result = result.resultStr;	
          }
        })
      } else {
        failedTip("抱歉，当前客户端版本不支持扫一扫");
      }
    },
    fail: function (res) {
      // 检测getNetworkType该功能失败时处理
      failedTip('fail' + res)
    }
  });
});

道三两句晚安~~
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目中使用QRcode生成二维码时，二维码内容过多时报错问题处理
欢迎大家交流前端开发技术、经验及各种知识沉淀
08-25 2730
二维码（Quick Response Code, 快速响应码）本质上是密码算法。在做某个项目的时候，由于二维码内容页面链接，由于链接内容过长，导致上述错误，最后几经查询调试，
vue 实现扫条形码与二维码 H5 兼容 苹果IOS
此人很懒，什么都没有写
07-15 3077
vue-qrcode-reader采用摄像头解析，浏览器为了安全，只有https协议下或者本地localhost可访问摄像头，所以代码需要部署所在的服务器需要https
移动端浏览器的扫描二维码实现（vue-qrcode-reader与jsQR方式）
最新发布
stay hungry, stay foolish
06-11 2042
类似扫一扫的功能，自动识别到画面中的二维码并进行识别，也可以选择从相册中上传。 vue-qrcode-reader 一组用于检测和解码二维码的Vue.js组件jsQR 一个纯粹的javascript二维码阅读库，该库接收原始图像，并将定位、提取和解析在其中找到的任何二维码。zxing-wasm ZXing-C++ WebAssembly 作为带有类型的 ES/CJS 模块。读/写 web、node、bun 和 deno 中的条形码。安装 3. 方式一：vue-qrcode-reader实现 🔍vue
Vue 微信小程序扫码后获取json转对象报错 SyntaxError: Unexpected token in JSON at position 0
༺墨༒眉༻
03-22 771
看打印信息啥的都没啥问题，但是只要使用JSON.parse()转对象就会报。网上查了很久，都没未找到问题，最后大神给到一个答案并成功解决。断点调试：内容是调用小程序扫码接口扫码后拿到的数据。
pc端 微信扫码登录时 WxLogin is not defined问题
Kenom_的博客
06-11 1281
微信扫码功能我觉得这两篇文章已经讲的比较清除了，在这就不多做阐述了，主要说一下造成WxLogin is not defind的原因，我当时也是根据这篇文章做的这个功能，一切都没有问题，但是公司又加了一个新功能，需要https域名，在https域名下这个问题就出来了，我当时https和http全部引入也还是报错（http域名下没问题，https报错），后来进过尝试，发现在当前页面和public/index.html中同时引入，会去调用public/index.html中的js，问题解决，修改引入位置就行。
vue的h5项目在微信苹果手机ios 点击扫码没反应
qq_66798911的博客
02-03 441
解决方案：要么进入页面刷新一下 要么通过location.href 跳转 我是通过第二个方法。从登录页或者其他页跳转到需要扫码功能的页面要么刷新 要么 location.href跳转。后面试了一下 刷新页面后才可以。
vue使用微信扫一扫功能的实现代码
11-20
在Vue项目中集成微信扫一扫功能，需要遵循一系列步骤来实现。以下是对整个过程的详细解释： **第一步：安装依赖库** 首先，你需要安装`weixin-js-sdk`和`jquery`库，这两个库在实现微信扫一扫功能中是必不可少的。...
vue 微信分享回调iOS和安卓回调出现错误的解决
10-14
本文将深入探讨如何解决Vue微信分享回调在iOS和Android上遇到的错误。 首先，为了实现微信分享，我们需要在项目中集成微信JavaScript SDK（jsSDK）包。这通常涉及到在HTML文件中引入对应的SDK脚本，并通过接口向...
记录vue做微信自定义分享的一些问题
10-16
本文将详细阐述在Vue项目中实现微信自定义分享时遇到的问题以及相应的解决策略。 首先，我们要了解微信自定义分享的基本流程。在微信的官方文档中，要求在生成`jsapi_ticket`签名时，URL不应包含`#`及其后面的部分...
Vue企业微信扫码登录
RequesToGod的博客
06-28 1486
Vue企业微信扫码登录案例
vue 跳转页面在微信浏览器中无法正常跳转
FZ_9426的博客
03-13 1978
记一次奇怪的BUG。先说一下业务需求，现在要通过微信扫描一个二维码进入到指定的手机端页面（由自己开发的页面），然后在这个页面中由表单输入，输入完成提交后要直接跳转到第二个手机端页面（还是自己开发的页面）。 当我尝试在前端vue页面的ajax finally 中写 this.$router.push() 跳转时，在iPhone环境下的跳转没有任何问题，但是在android环境下...
vue-qrcode-reader-一个Vue.js 2组件，可检测并解码来自摄像机流的QR码。-Vue.js开发
05-27
文档| 实时演示一组Vue.js组件，使您无需离开浏览器即可检测和解码QR码。 :movie_camera:QrcodeStream访问文档| 实时演示一组Vue.js组件，使您无需离开浏览器即可检测和解码QR码。 :movie_camera:QrcodeStream访问设备相机并连续扫描传入的帧。 :litter_in_bin_sign:QrcodeDropZone渲染到一个空白区域，您可以在其中拖放要解码的图像。 :open_file_folder:QrcodeCapture是一个经典的文件上传字段，可立即扫描您选择的所有文件。 所有组件都具有响应能力。 除此之外，几乎零样式。 使它们适合您的布局。 ü
vue-barcode-reader:一组用于扫描条形码和二维码的 Vue.js 组件
05-29
Vue 条码和二维码扫描器 一组用于扫描（或上传图像）条形码和二维码的 Vue.js 组件。 好处 可以扫描条形码和二维码 使用 （“斑马线”），这是一个用 Java 实现的开源、多格式一维/二维条码图像处理库，可移植到其他语言。 演示 您可以在 codeandbox 演示站点中进行测试。 安装 使用 Vue Barcode Reader 的最简单方法是从npm或yarn安装它。 npm install vue-barcode-reader --save 或者 yarn add vue-barcode-reader 用法 Vue Barcode Reader 只需包含它即可开箱即用。 使用摄像机 加载来自用户相机的流后，它会显示并连续扫描条形码。 结果由解码事件指示。 import { StreamBarcodeReader } from "vue-barcode-reader"
vue 微信登录
qq_43548590的博客
12-02 2787
vue 微信登录
vue - 网站接入微信扫码登录功能详细教程，完整详细流程及完整功能示例源代码（附常见问题的解决方案与二维码样式修改方案）
高级前端工程师
03-03 4760
vue.js项目植入微信登录，vue网页项目怎么做微信扫码登录，VUE项目中的微信扫码登录，VUE中最简单的js调用微信扫一扫功能，vue:如何设计网页的微信扫码登录功能，微信扫码功能官方文档，通过vue方式实现二维码扫码功能，vue调用微信扫码，vue H5 调用微信扫描二维码，Vue前端实现微信扫码登录，vue-wxlogin 微信授权登录组件，网站引入的微信登录框如何修改宽高或其他样式，wxlogin 组件插件怎么改变宽高，vue-wxlogin组件怎么自定义样式，微信网页授权，vue调用微信JSDK
vue 引入weixin-js-sdk报错： import wx from ‘weixin-js-sdk‘ wx=‘undefined‘
且听风吟的博客
02-27 1915
vue 引入weixin-js-sdk报错： import wx from ‘weixin-js-sdk‘ wx=‘undefined‘
vue：如何设计网页的微信扫码登录功能
m0_46339022的博客
07-31 4384
上一篇文章讲到了如何根据不同的需求展示不同的弹框组件，这篇文章主要讲解如何设计网页的微信登录扫码功能。那么就开始吧！本篇文章主要讲解了如何设计网页的微信登录扫码功能。httpshttpshttps。......
微信公众号网页开发调用扫一扫及苹果手机（iOS）无反应问题解决方案
Rision666的博客
08-23 1408
微信网页开发调取扫一扫，在返回扫描结果模式下，安卓手机好使，但是苹果手机（iOS）总是一闪而过，到底如何解决
vue跳转微信小程序遇到的坑
qq_39933787的博客
10-14 904
官方参考https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21 vue项目-h5跳转小程序 - 简书 遇到的问题：在PC端不显示样式，手机端可以，但是手机端样式发生问题，在<wx-open-launch-weapp>标签中写的样式在手机端失效问题 解决方案，在外面标签写按钮样式(跳转小程序的按钮)，然后将微信标签有效部分定位到样式上 代码： <div style="
uniapp实现扫码
09-07
uniapp实现扫码的方法有多种选择。其中一种是使用uni.scanCode(OBJECT)直接调用的方法。这种方法的优点是方便快捷，支持安卓和iOS，而且可以直接转换成微信等官方扫码API，非常适合制作小程序。然而，这种方法的缺点是安卓和iOS端的识别率非常低，扫码耗时较长，在某些条件下无法识别二维码。 另一种方法是使用支付宝扫码插件。你可以直接在插件市场下载并使用。这种方法的优点是识别率不错，可以离线扫码。然而，缺点是需要付费88元，并且在测试阶段可能会出现扫码出现空字符导致数据传值失败的情况。为了解决这个问题，你可以对扫码获取的值进行处理，例如使用以下代码：this.invoicedata = ret.sValue.replace(/[\xa0\x00-\x09\x0b\x0c\x0e-\x1f\x7f]/g, ''); 还有一种方法是使用微信扫码。这种方法可以实现uniapp在H5端（仅支持Vue2）、APP端和微信小程序端的扫码识别功能。你可以按照以下步骤来实现： 1. 首先下载并安装依赖包：npm install --save vue-qrcode-reader 2. 然后根据需要进行配置和调用，如果有问题可以在评论中寻求帮助。 综上所述，uniapp实现扫码的方法有多种选择，你可以根据实际需求选择适合的方法来实现扫码功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [uni-app实现扫码的几种方式](https://blog.csdn.net/sinat_41772813/article/details/121034839)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [uniapp实现扫码功能H5+APP+wx小程序](https://download.csdn.net/download/TZ1284063988/87546781)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值