weixin-js-sdk

场景：在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
}

View Code