场景:在h5移动端,实现分享朋友,分享朋友圈。
插曲:一开始我认为是不能做到分享的,主要是我从微信小程序的角度出发的,想着微信小程序都做不到分享朋友圈功能,那h5就更不能实现了,导致出现了错误的判断。那么我就来总结一下实现都步骤吧!
开发环境:vue-cli2,vux,axios
注意:一定要去看sdk都官方文档:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2
因为安装都sdk版本不同(我安装都版本是"weixin-js-sdk": "^1.4.0-test"),里面有些方法可能被弃用,这是本人踩过都坑。
封装src/utils/wxshare.js
import axios from 'axios' import wx from 'weixin-js-sdk' //技术文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2 //要用到微信API function getJSSDK(shareUrl, dataForWeixin,id) { axios.post('http://www.hashclub.net/front/wechat/getconfig', { url:shareUrl, id:id }).then(res => { console.log(res.data); wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: res.data.appid, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature, // 必填,签名 jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] // 必填,需要使用的JS接口列表 }) wx.ready(function () { wx.updateAppMessageShareData({ title: dataForWeixin.title, desc: dataForWeixin.des, link: dataForWeixin.linkurl, imgUrl: dataForWeixin.img, success: function success(res) { console.log(res) console.log('success') console.log('已分享'); }, cancel: function cancel(res) { console.log('已取消'); }, fail: function fail(res) { alert(JSON.stringify(res)); } }); //分享给微信朋友 // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口 wx.updateTimelineShareData({ title: dataForWeixin.title, link: dataForWeixin.linkurl, imgUrl: dataForWeixin.img, success: function success(res) { console.log(res) alert('已分享'); }, cancel: function cancel(res) { alert('已取消'); }, fail: function fail(res) { alert(JSON.stringify(res)); } }); // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口 // wx.onMenuShareQQ({ // title: dataForWeixin.title, // desc: dataForWeixin.desc, // link: dataForWeixin.linkurl, // imgUrl: dataForWeixin.img, // trigger: function trigger(res) { // //alert('用户点击分享到QQ'); // }, // complete: function complete(res) { // alert(JSON.stringify(res)); // }, // success: function success(res) { // //alert('已分享'); // }, // cancel: function cancel(res) { // //alert('已取消'); // }, // fail: function fail(res) { // //alert(JSON.stringify(res)); // } // }); // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口 // wx.onMenuShareWeibo({ // title: dataForWeixin.title, // desc: dataForWeixin.desc, // link: dataForWeixin.linkurl, // imgUrl: dataForWeixin.img, // trigger: function trigger(res) { // //alert('用户点击分享到微博'); // }, // complete: function complete(res) { // // alert(JSON.stringify(res)); // }, // success: function success(res) { // //alert('已分享'); // }, // cancel: function cancel(res) { // // alert('已取消'); // }, // fail: function fail(res) { // // alert(JSON.stringify(res)); // } // }); }) wx.error(function (res) { alert("微信验证失败"); }); }) } export default { // 获取JSSDK getJSSDK }