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 相关文章推荐
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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调用时间格式的参数详解
2013/06/06 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
python入门教程 python入门神图一张
2018/03/05 Python
python实现列表的排序方法分享
2019/07/01 Python
如何通过Python实现标签云算法
2019/07/02 Python
python实现按关键字筛选日志文件
2019/12/24 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
python实现canny边缘检测
2020/09/14 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
大学生简短的自我评价分享
2014/02/20 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
普通话演讲稿
2014/09/03 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
祝酒词范文
2015/08/12 职场文书
会议主持词通用版
2019/04/02 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python