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组件生命周期运行原理解析
Nov 25 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
VUE递归树形实现多级列表
Jul 15 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数组函数
2008/08/18 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python实现字典的遍历与排序功能示例
2017/12/23 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
北承题目(C++)
2012/05/16 面试题
音乐教学反思
2014/02/02 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
2014年公司工作总结
2014/11/22 职场文书
经验交流材料格式
2014/12/30 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
Android实现图片九宫格
2022/06/28 Java/Android