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开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue elementUI表格控制对应列
Apr 13 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
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
深入密码加salt原理的分析
2013/06/06 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
php跨域调用json的例子
2013/11/13 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
Python isinstance判断对象类型
2008/09/06 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
经贸日语专业个人求职信范文
2013/12/28 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
设计师求职信
2014/07/01 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Go web入门Go pongo2模板引擎
2022/05/20 Golang