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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python实现list由于numpy array的转换
2018/04/04 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
python函数超时自动退出的实操方法
2020/12/28 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
英语演讲稿范文
2014/01/03 职场文书
八年级英语教学反思
2014/01/09 职场文书
个人授权委托书
2014/04/03 职场文书
年终奖发放方案
2014/06/02 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
升国旗演讲稿
2014/09/05 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
Python编写冷笑话生成器
2022/04/20 Python
nginx 配置指令之location使用详解
2022/05/25 Servers