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 $router和$route的区别详解
Dec 02 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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函数
2006/10/09 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php字符串函数学习之substr()
2015/03/27 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
Python生成密码库功能示例
2017/05/23 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
用python解压分析jar包实例
2020/01/16 Python
python asyncio 协程库的使用
2021/01/21 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
房产转让协议书
2014/04/11 职场文书
校园安全演讲稿
2014/05/09 职场文书
员工合理化建议书
2014/05/19 职场文书
质量承诺书怎么写
2014/05/24 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
早读课迟到检讨书
2014/09/25 职场文书
化妆品促销活动总结
2015/05/07 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
mysql如何配置白名单访问
2021/06/30 MySQL