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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 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设计模式 Delegation(委托模式)
2011/06/26 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
修复ie8&chrome下window的resize事件多次执行
2011/10/20 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
J2EE面试题大全
2016/08/06 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
大学计划书范文800字
2014/08/14 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
质量保证书格式模板
2015/02/27 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技
德生2P3收音机开箱评测
2022/04/30 无线电