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在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
Vue详细的入门笔记
May 10 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
Vue操作Storage本地化存储
Apr 29 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
js 内存释放问题
2010/04/25 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
webpack配置sass模块的加载的方法
2017/07/30 Javascript
js匿名函数使用&传参(实例)
2017/09/08 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
vue权限管理系统的实现代码
2019/01/17 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Python实现修改文件内容的方法分析
2018/03/25 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Django ORM filter() 的运用详解
2020/05/14 Python
python实现粒子群算法
2020/10/15 Python
python实现猜拳游戏项目
2020/11/30 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
大学生学期自我鉴定
2014/03/19 职场文书
法制宣传口号
2014/06/16 职场文书
实习协议书范本
2014/09/25 职场文书
银行员工考核评语
2014/12/31 职场文书
论文答辩开场白大全
2015/05/27 职场文书
早会开场白台词大全
2015/06/01 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
MySQL 视图(View)原理解析
2021/05/19 MySQL