vue调用微信JSDK 扫一扫,相册等需要注意的事项

 更新时间:2021年01月03日 10:50:10   作者:Myzhuo  
这篇文章主要介绍了vue调用微信JSDK 扫一扫,相册等需要注意的事项,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下

在VUE里面需要注意的第一个问题就是路由得设置成

第二个就是 跳转路由的时候

不要用this.$router.push 或者this.$router.replace  前者在ios 和安卓端都调不起来的

后者只能在安卓端有效 在ios端无效

this.$router.push的效果图

测试工具上是可以调起,然后在安卓手机上和ios上这个是调不起的

这个在测试上椰是可以的,然后在安卓端上可以,在ios上会出现无效的token 40029

config:function(res){  //配置JSSDK和调取扫一扫功能
     // location.reload();
     this.isDisable = true;
     this.model = 'block'; 
     setTimeout(() => {
     this.isDisable = false;
      var that = this,
      USER = JSON.parse(sessionStorage.getItem('USER')),
      iscode = JSON.parse(sessionStorage.getItem('key')),
      dizhi = encodeURIComponent(location.href.split('#')[0]);
      console.log(dizhi);
     var data = {
      dizhi:dizhi,
      i:USER.uniacid,
      token:USER.token
     }
      this.$fetch('app/index.php/?c=entry&a=wxapp&do=Write&m=mzhk_sun&calltest=?&',data)
     .then((res)=>{
      console.log(res)
       that.model = 'none';
       
      wx.config({
        debug : false, // true为开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId : res.appId, // 必填,公众号的唯一标识
        timestamp : res.timestamp, // 必填,生成签名的时间戳
        nonceStr : res.nonceStr, // 必填,生成签名的随机串
        signature : res.signature,// 必填,签名
        jsApiList : ['checkJsApi', 'startRecord', 'stopRecord','translateVoice','scanQRCode', 'openCard'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

      });
       // 初始化
       wx.ready(function(){
         wx.scanQRCode({
           needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果
           scanType: ["qrCode","barCode"],
           success:((option)=>{
             var o = JSON.parse(option.resultStr);
             var id = o.id;
             var ordertype = o.ordertype;
             var user_id = o.user_id
             that.id = id;
             that.ordertype = ordertype;
             that.user_id = o.user_id;
             
             let parm = {
              i:USER.uniacid,
              id:id,
              ordertype:ordertype,
              user_id:user_id,
              bid:USER.bid,
              token:USER.token,
             }
             that.$fetch('app/index.php/?c=entry&a=wxapp&do=Couinfo&m=mzhk_sun&calltest=?',parm)
             .then((res)=>{
              console.log('扫码核销的接口',res)
              if(res.code == 1){
               alert(res.msg)
              }else{
               if(ordertype == 10){
                that.bname = res.data.bname;
                that.couname = res.data.couname;
                that.limittime = res.data.limittime;
                that.type = 1;
                that.uid = res.data.uid
                if(res.data.isUsed == "0"){
                 that.isUsed = "未使用";
                }else if(res.data.isUsed == "1"){
                 that.isUsed = "已使用";
                }
               }else if(ordertype == 11){
                that.bname = res.data.bname;
                that.couname = res.data.fname;
                that.limittime = res.data.wtime;
                that.uid = res.data.openid;
                that.type = 1;
                if(res.data.isUsed == "0"){
                 that.isUsed = "未核销";
                }else if(res.data.isUsed == "1"){
                 that.isUsed = "已核销";
                }

               }
              }

             })
           })
         })
       })
     })
    

     }, 300);
     
     
     
    }

所以用了这个,用了这个的话,在安卓端和ios端都可以掉的起来。

以上就是vue调用微信JSDK 扫一扫,相册等需要注意的事项的详细内容,更多关于vue 调用微信扫一扫和相册的资料请关注脚本之家其它相关文章!

相关文章

  • vue 跳转到其他页面并关闭当前页面的实现代码

    vue 跳转到其他页面并关闭当前页面的实现代码

    我在做一个调用虚拟机录屏的一个操作,需要在浏览器页面上,点击按钮后,关闭当前页面里的某一个页面,并且打开浏览器新页面是虚拟机的页面,本文给大家介绍vue 跳转到其他页面并关闭当前页面的实现代码,感兴趣的朋友一起看看吧
    2023-09-09
  • 分离vue文件中css、js代码的简单技巧

    分离vue文件中css、js代码的简单技巧

    这篇文章主要给大家介绍了关于分离vue文件中css、js代码的简单技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • Vue.js 点击按钮显示/隐藏内容的实例代码

    Vue.js 点击按钮显示/隐藏内容的实例代码

    下面小编就为大家分享一篇Vue.js 点击按钮显示/隐藏内容的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue返回首页后如何清空路由问题

    vue返回首页后如何清空路由问题

    这篇文章主要介绍了vue返回首页后如何清空路由问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue组件化开发的必备技能之组件递归

    Vue组件化开发的必备技能之组件递归

    组件是可以在它们自己的模板中调用自身的,不过它们只能通过 name 选项来做这件事,下面这篇文章主要给大家介绍了关于Vue组件化开发的必备技能之组件递归的相关资料,需要的朋友可以参考下
    2022-01-01
  • Vant2移动端Vue组件库问题记录

    Vant2移动端Vue组件库问题记录

    Vant是一套轻量、可靠的移动端组件库,通过Vant可以快速搭建出风格统一的页面,提升开发效率,下面这篇文章主要给大家介绍了关于Vant2移动端Vue组件库问题的相关资料,需要的朋友可以参考下
    2023-01-01
  • 解决Electron store的commit和dispatch不好用问题

    解决Electron store的commit和dispatch不好用问题

    这篇文章主要介绍了解决Electron store的commit和dispatch不好用问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue Router中Matcher的初始化流程

    Vue Router中Matcher的初始化流程

    这篇文章主要介绍了Vue Router中Matcher的初始化流程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 在vue中给后台接口传的值为数组的格式代码

    在vue中给后台接口传的值为数组的格式代码

    这篇文章主要介绍了在vue中给后台接口传的值为数组的格式代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue中(el-button的五种类型,三种css格式)

    vue中(el-button的五种类型,三种css格式)

    这篇文章主要介绍了vue中(el-button的五种类型,三种css格式)具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论