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


Posted in Vue.js onJanuary 03, 2021

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

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

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

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

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

this.$router.push的效果图

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

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

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

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

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

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

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

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.js 相关文章推荐
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue中使用echarts的示例
Jan 03 #Vue.js
vue 动态生成拓扑图的示例
Jan 03 #Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 #Vue.js
vue中activated的用法
Jan 03 #Vue.js
vue实现登录功能
Dec 31 #Vue.js
vue 实现图片懒加载功能
Dec 31 #Vue.js
vue 动态创建组件的两种方法
Dec 31 #Vue.js
You might like
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
产品开发计划书
2014/04/27 职场文书
中秋手机店促销方案
2014/06/16 职场文书
社区志愿者活动总结
2014/06/26 职场文书
开服装店计划书
2014/08/15 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
医院合作意向书范本
2015/05/08 职场文书
公司酒会致辞
2015/07/30 职场文书