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 调用微信扫一扫和相册的资料请关注脚本之家其它相关文章!

相关文章

  • Vuex报错之[vuex] unknown mutation type: handlePower问题及解决

    Vuex报错之[vuex] unknown mutation type: han

    这篇文章主要介绍了Vuex报错之[vuex] unknown mutation type: handlePower问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue自定义table表如何实现内容上下循环滚动

    vue自定义table表如何实现内容上下循环滚动

    这篇文章主要介绍了vue自定义table表如何实现内容上下循环滚动问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue之延时刷新实例

    vue之延时刷新实例

    今天小编就为大家分享一篇vue之延时刷新实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue-router命名路由和编程式路由传参讲解

    vue-router命名路由和编程式路由传参讲解

    今天小编就为大家分享一篇关于vue-router命名路由和编程式路由传参讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Vue给 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按钮加载效果

    Vue给 elementUI 中的 this.$confirm、this.$alert、 this.$promp

    这篇文章主要介绍了Vue给 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按钮的加载效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue自定义权限指令的实现

    vue自定义权限指令的实现

    本文主要介绍了vue自定义权限指令的实现
    2024-05-05
  • Vue中使用Printjs插件实现打印功能

    Vue中使用Printjs插件实现打印功能

    Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件,无需离开界面,也无需使用嵌入,这篇文章主要介绍了Vue中使用Printjs插件实现打印功能,需要的朋友可以参考下
    2022-08-08
  • vue获取DOM元素并设置属性的两种实现方法

    vue获取DOM元素并设置属性的两种实现方法

    下面小编就为大家带来一篇vue获取DOM元素并设置属性的两种实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • element-ui表格如何自适应高度效果示例

    element-ui表格如何自适应高度效果示例

    这篇文章主要给大家介绍了关于element-ui表格如何自适应高度的相关资料,Element UI的Table组件默认情况下是没有自适应高度的,文中给大家介绍了解决的办法,需要的朋友可以参考下
    2023-08-08
  • Vue.js element-plus使用图标不显示问题的解决方式

    Vue.js element-plus使用图标不显示问题的解决方式

    近期在学习Vue时用elementUI时发现图标在页面上显示不出来,所以这篇文章主要给大家介绍了关于Vue.js element-plus使用图标不显示问题的解决方式,需要的朋友可以参考下
    2022-09-09

最新评论