微信二次分享 单页面应用

图片转换。链接转换
图片

1.首先npm i weixin-js-sdk
使用：
import wx from ‘weixin-js-sdk’

项目中运用
1.封装wxapi.js:多页面调用

import wx from 'weixin-js-sdk'
import Axios from 'axios'

let url = window.location.href.split('#')[0];
//  let url = window.location.href;
console.log(url, 'url')
const wxApi = {
    wxRegister(callback) {
        // 这边的接口请换成你们自己的
        let postData = {
            url: url
        }
        Axios.get('/video/getweixinticket', {
            params: {
                ...postData,
            }
        }).then((res) => {
            let data = res.data.data;
            wx.config({
                debug: false, // 开启调试模式
                appId: data.appid, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名，见附录1
                jsApiList: [
                    'onMenuShareWeibo',
                    'updateAppMessageShareData',
                    'updateTimelineShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            })
        }).catch((error) => {
            // console.log(error)

        })
        wx.ready((res) => {
           
            // 如果需要定制ready回调方法
            if (callback) {
                callback();
            }
        })
        wx.error(function (res) {
            // console.log(res)
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
       
        
    },
    ShareTimeline(option) {
        wx.updateTimelineShareData({ //分享到朋友圈”及“分享到QQ空间
            title: option.title, // 分享标题
            link: option.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: option.imgUrl, // 分享图标
            success() {
                // 用户成功分享后执行的回调函数
                option.success()
            },
            cancel() {
                // 用户取消分享后执行的回调函数
                option.error()
            }
        })
    },
    ShareAppMessage(option) {
        wx.updateAppMessageShareData({ //分享给朋友”及“分享到QQ”
            title: option.title,
            desc: option.desc,
            link: option.link,
            imgUrl: option.imgUrl,
            success: function () {
                option.success()
            },
            cancel: function () {
                option.error()
            }
        })
    },
    ShareAppweibo(option){
        wx.onMenuShareWeibo({
            title: option.title,
            desc: option.desc,
            link: option.link,
            imgUrl: option.imgUrl,
            success: function () {
                option.success()
            },
            cancel: function () {
                option.error()
            }
        });
    },
}
export default wxApi

2.在页面运用
import wxApi from “@/utils/wxapi.js”;

需要的地方调用

  var _this = this;
   wxApi.wxRegister(_this.wxRegCallback);

 // 微信分享
    wxRegCallback() {
      // 用于微信JS-SDK回调
      this.wxShareAppMessage();
      this.ShareTimeline();
      this.ShareAppweibo();
    },
    //微信分享给朋友”及“分享到QQ”
    wxShareAppMessage() {
      let option = {
        title: this.ImitateDvo.title, // 分享标题
        desc: "视频太有趣,我用英葩APP,看百万英语短视频学英语,字幕可点击查看",
        imgUrl: this.ImitateDvo.videoPicUrl,
        link:
          window.location.href.split("#")[0] +
          "?#" +
          window.location.href.split("#")[1], // 分享链接接，
        // imgUrl: this.content.figure, // 分享图标,需要绝对路径
        success: () => {},
        error: () => {}
      };
      wxApi.ShareAppMessage(option);
    },
    //微信分享到朋友圈”及“分享到QQ空间
    ShareTimeline() {
      let option = {
        title: this.ImitateDvo.title, // 分享标题
        desc: "视频太有趣,我用英葩APP,看百万英语短视频学英语,字幕可点击查看",
        link:
          window.location.href.split("#")[0] +
          "?#" +
          window.location.href.split("#")[1], // 分享链接接，
        imgUrl: this.ImitateDvo.videoPicUrl, // 分享图标,需要绝对路径
        success: () => {
          alert(分享成功);
        },
        error: () => {}
      };
      wxApi.ShareTimeline(option);
    },
    //微信分享到微博
    ShareAppweibo() {
      let option = {
        title: this.ImitateDvo.title, // 分享标题
        desc: "视频太有趣,我用英葩APP,看百万英语短视频学英语,字幕可点击查看",
        link:
          window.location.href.split("#")[0] +
          "?#" +
          window.location.href.split("#")[1], // 分享链接接，
        imgUrl: this.ImitateDvo.videoPicUrl, // 分享图标,需要绝对路径
        success: () => {
          alert(分享成功);
        },
        error: () => {}
      };
      wxApi.ShareAppweibo(option);
    },

做的时候会遇到很多坑。遇到的地方，看下微信官方文档报错解决的办法，这个是自己做的时候，单页面运用可以，如果需要路由跳转请看另外一篇