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 26 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue中activated的用法
Jan 03 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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
DC动漫人物排行
2020/03/03 欧美动漫
一步一步学习PHP(3) php 函数
2010/02/15 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
PHP7引入的"??"和"?:"的区别讲解
2019/04/08 PHP
JS定时关闭窗口的实例
2013/05/22 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python argparser的具体使用
2019/11/10 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
什么是python的id函数
2020/06/11 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
小学新学期教师寄语
2014/01/18 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
安全月活动总结
2014/05/05 职场文书
银行先进个人总结
2015/02/15 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
2015入党自传格式范文
2015/06/26 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang