vue引入微信jssdk / SDK
vue 2017-12-27 08:59:35

 

JavaScript Code复制内容到剪贴板
  1. npm i -S weixin-js-sdk  

 

引入：

JavaScript Code复制内容到剪贴板
  1. import wx from 'weixin-js-sdk'  

 

踩坑一：

微信分享：

QAQ1、router模式请改为hash：

JavaScript Code复制内容到剪贴板
  1. export default new Router({  
  2.     mode: 'hash',  
  3.     base:'/test/', // 根路径，可自定义  
  4.     routes: [  
  5.         // 用户部分  
  6.         {  
  7.             path: '/',  
  8.             name: 'userPetSelect',  
  9.             components: {  
  10.                 main: userPetSelect,  
  11.             }  
  12.         },  

 

QAQ2、关于网上资料说，IOS的请求页面权限需要使用入口记录第一次的url（在改为哈希模式后，这条不成立）：

关于分享后的链接被微信添加了微信的自定义参数，如：

http://test.aaa.bbbb.com/?from=singlemessage&isappinstalled=0#/details?id=2
// 原本链接 http://test.aaa.bbbb.com/#/details?id=2

找了资料发现有小伙伴提供的一个方案很好用，在#前面加一个?号

JavaScript Code复制内容到剪贴板
  1. wxShare({state,commit},params) {  
  2.     let desc = params.desc, //分享的简介  
  3.     title = params.title,//params.title, //分享的标题  
  4.     shareUrl = params.link, //分享的链接  
  5.     imgUrl = params.imgUrl; //分享的缩略图  
  6.       
  7.     let link = window.location.href; // 请求JSSDK的页面路径  
  8.     link = link.split('#')[0]; //签名需要传当前页面的url  
  9.       
  10.     let linkEndString = link.charAt(link.length-1);  
  11.     if(linkEndString == '?'){  
  12.         link=link.substring(0,link.length-1)  
  13.     }  
  14.       
  15.     shareUrl = link + "?#"+ shareUrl; //重新拼接分享的链接  
  16.     alert(shareUrl);  
  17.     request.post(global.shareUrl,{url:link}).then(response => {  
  18.         if(!response) {  
  19.             return false;  
  20.         }  
  21.         // 请求成功后保存  
  22.         let appId = response.appId;  
  23.         let timeStamp = response.timeStamp;  
  24.         let nonceStr = response.nonceStr;  
  25.         let signature = response.signature;  
  26.           
  27.         wx.config({  
  28.             debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。    
  29.             appId: appId,  
  30.             timestamp: timeStamp,  
  31.             nonceStr: nonceStr,  
  32.             signature: signature,  
  33.             jsApiList: [  
  34.                 'checkJsApi',  
  35.                 'onMenuShareTimeline', //分享到朋友圈  
  36.                 'onMenuShareAppMessage', //分享给朋友  
  37.                 'onMenuShareQQ', //分享到QQ  
  38.                 'onMenuShareWeibo', //分享到腾讯微博  
  39.                 'onMenuShareQZone', //分享到QQ空间  
  40.             ]// 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
  41.         });  
  42.       
  43.         let share_config = {    
  44.                 "imgUrl": imgUrl,//分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。  
  45.                 "desc" : desc,//摘要,如果分享到朋友圈的话，不显示摘要。  
  46.                 "title" : title,//分享卡片标题  
  47.                 "link": shareUrl,//分享出去后的链接，这里可以将链接设置为另一个页面。  
  48.                 "success":function(){  
  49.                         //分享成功后的回调函数  
  50.                         commit("changeIfShare",true);  
  51.                           
  52.                         let instance = Toast('分享成功');    
  53.                     setTimeout(() => {  
  54.                         instance.close();    
  55.                     }, 1000);  
  56.                 },  
  57.                 'cancel': function () {    
  58.                     // 用户取消分享后执行的回调函数  
  59.                     let instance = Toast('您已取消分享');    
  60.                     setTimeout(() => {    
  61.                         instance.close();    
  62.                     }, 1000);  
  63.                 }  
  64.         };  
  65.         wx.ready(function() {  
  66.             //分享给朋友  
  67.             wx.onMenuShareAppMessage(share_config);  
  68.             wx.onMenuShareAppMessage(share_config);    
  69.             wx.onMenuShareTimeline(share_config);  
  70.             wx.onMenuShareQQ(share_config);  
  71.             wx.onMenuShareWeibo(share_config);  
  72.             wx.onMenuShareQZone(share_config);  
  73.         })  
  74.         wx.error(function(res){  
  75.             // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。  
  76.             alert.log(res);  
  77.         });  
  78.     });  
  79. },  

 

 

上面的放在action方法中，回调以后 可以通过变量值currentIfShare来控制

JavaScript Code复制内容到剪贴板
  1. const state = {  
  2.     currentIfShare:false, //当前页面是否已分享  
  3. }  
  4. const mutations = {  
  5.     changeIfShare(state,value){  
  6.         state.currentIfShare = value;  
  7.     },  
  8. }  

 

 

 

方法使用：

JavaScript Code复制内容到剪贴板
  1. data() {  
  2.   return {  
  3. },  
  4. mounted() {  
  5.   this.wxShare(); //执行微信分享  
  6. },  
  7. computed:{  
  8.     ifShare(){  
  9.     return this.$store.state.common.currentIfShare;  
  10.     },  
  11. },  
  12. watch:{  
  13.   ifShare(){  
  14.     if(this.ifShare){  
  15.       this.closePopup(); //如果ifShare参数为true，关闭遮罩层  
  16.     }  
  17.     },  
  18. },  
  19. methods: {  
  20.   openPopup(val) {  
  21.     this.popupVisible = true;//打开遮罩  
  22.   },  
  23.   closePopup(val) {  
  24.     //关闭遮罩层的同时，将当前分享状态设为false，分享成功后回调为true  
  25.     this.popupVisible = val;  
  26.     this.$store.commit('common/changeIfShare', false);   
  27.   },  
  28.   wxShare() {  
  29.     let defaultImg = this.$store.state.common.LOGOImg;console.log(defaultImg);  
  30.     var shareUrl = "/yoyo/user-homepage/"+sessionStorage.getItem("userId"); //分享链接  
  31.     let params = {  
  32.       title: 'yoyo个人博客', //分享的标题  
  33.       desc:'想要站在巨人的肩膀上，就从关注他开始！', // 分享的简介  
  34.       link: shareUrl, //分享链接  
  35.       imgUrl: defaultImg //分享默认图片  
  36.     };  
  37.     this.$store.dispatch("common/wxShare",params); // 进入方法，调取分享SDK接口  
  38.   
  39.   }  
  40. },  

 

PS：改为哈希模式后，发现不需要判断设备了，该方法通用

 

 

QAQ3：路由中包含code参数？ 

在微信浏览器中，如果要获取用户授权，会自带一个code参数，这种情况，vue的分享路由就会出现问题，针对code 改一下截取：

JavaScript Code复制内容到剪贴板
  1.     wxShare({state,commit},params) {  
  2.         let desc = params.desc, //分享的简介  
  3.         title = params.title,//params.title, //分享的标题  
  4.         shareUrl = params.link, //分享的链接  
  5.         imgUrl = params.imgUrl; //分享的缩略图  
  6.           
  7.         let link = window.location.href; // 请求JSSDK的页面路径  
  8.         link = link.split('#')[0]; //签名需要传当前页面的url  
  9.           
  10.         request.post(global.shareUrl,{url:link}).then(response => {  
  11.             if(!response) {  
  12.                 return false;  
  13.             }  
  14.             // 请求成功后保存  
  15.             let appId = response.appId;  
  16.             let timeStamp = response.timeStamp;  
  17.             let nonceStr = response.nonceStr;  
  18.             let signature = response.signature;  
  19.               
  20.             wx.config({  
  21.                 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。    
  22.                 appId: appId,  
  23.                 timestamp: timeStamp,  
  24.                 nonceStr: nonceStr,  
  25.                 signature: signature,  
  26.                 jsApiList: [  
  27.                     'checkJsApi',  
  28.                     'onMenuShareTimeline', //分享到朋友圈  
  29.                     'onMenuShareAppMessage', //分享给朋友  
  30.                     'onMenuShareQQ', //分享到QQ  
  31.                     'onMenuShareWeibo', //分享到腾讯微博  
  32.                     'onMenuShareQZone', //分享到QQ空间  
  33.                 ]// 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
  34.             });  
  35.   
  36.   
  37.             let code = global.GetQueryString('code'); // 定义GET参数  
  38.             if(code !=null && code.toString().length>1)    
  39.             {  
  40.                 link = link.split('?')[0];//如果有code值要截取?之前  
  41.             }else{  
  42.                 link = link.split('#')[0]; //签名需要传当前页面的url  
  43.             }  
  44.             let linkEndString = link.charAt(link.length-1);  
  45.             if(linkEndString == '?'){  
  46.                 link=link.substring(0,link.length-1)  
  47.             }  
  48.             shareUrl = link + "?#"+ shareUrl; //重新拼接分享的链接  
  49.           
  50.             let share_config = {    
  51.                     "imgUrl": imgUrl,//分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。  
  52.                     "desc" : desc,//摘要,如果分享到朋友圈的话，不显示摘要。  
  53.                     "title" : title,//分享卡片标题  
  54.                     "link": shareUrl,//分享出去后的链接，这里可以将链接设置为另一个页面。  
  55.                     "success":function(){  
  56.                             //分享成功后的回调函数，改变当前分享状态为true，默认为false  
  57.                             commit("changeIfShare",true);  
  58.                             let instance = Toast('分享成功');  
  59.                         setTimeout(() => {  
  60.                             instance.close();  
  61.                         }, 1000);  
  62.                         return true;  
  63.   
  64.                     },  
  65.                     'cancel': function () {    
  66.                         // 用户取消分享后执行的回调函数  
  67.                         let instance = Toast('您已取消分享');    
  68.                         setTimeout(() => {    
  69.                             instance.close();    
  70.                         }, 1000);  
  71.                         return false;  
  72.                     }  
  73.             };  
  74.             wx.ready(function() {  
  75.                 //分享给朋友  
  76.                 wx.onMenuShareAppMessage(share_config);  
  77.                 wx.onMenuShareAppMessage(share_config);    
  78.                 wx.onMenuShareTimeline(share_config);  
  79.                 wx.onMenuShareQQ(share_config);  
  80.                 wx.onMenuShareWeibo(share_config);  
  81.                 wx.onMenuShareQZone(share_config);  
  82.             })  
  83. //          wx.error(function(res){  
  84. //              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。  
  85. //              alert.log(res.errMsg);  
  86. //          });  
  87.         });  
  88.     },  

 

获取地址栏的GET参数方法：

JavaScript Code复制内容到剪贴板
  1. GetQueryString(name){  
  2.     //js获取地址栏的GET参数  
  3.     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");    
  4.     var r = window.location.search.substr(1).match(reg);    
  5.     if(r!=null)return  unescape(r[2]); return null;    
  6. },  

 

 

在安卓的分享成功后的回调中，不仅有自己配置的分享成功，还会出现安卓本身的，已分享字样，故，增加判断设备 ：

 

 

 

踩坑二：微信支付

不需要使用预先SDK的接口支持，直接引入SDK后，加点击事件：

JavaScript Code复制内容到剪贴板
  1. wx.chooseWXPay({  
  2.     appId: data.appId,  
  3.     timestamp: data.timeStamp, // 支付签名时间戳，最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
  4.     nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位  
  5.     package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）  
  6.     signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
  7.     paySign: data.paySign, // 支付签名  
  8.     success: function(res) {  
  9.         // 支付成功后的回调函数  
  10.         alert("支付成功");  
  11.         this.intoByType();  
  12.     }  
  13. });  

这里对这个timestamp字段，有一个争议，看到有的文档中是S大写，有的是小写，在vue的脚手架上项目开启了debug后，发现该字段赋值为underfined，在微信的debug中，也是timeStamp，在JS中却要使用小写的，具体看使用情况吧！

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/260.html

上一篇 vue 富文本编辑器
下一篇 动态立体盒子效果
相关的文章
Powered by yoyo苏ICP备15045725号