微信二次分享 單頁面應用

圖片轉換。鏈接轉換
圖片

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);
    },

做的時候會遇到很多坑。遇到的地方，看下微信官方文檔報錯解決的辦法，這個是自己做的時候，單頁面運用可以，如果需要路由跳轉請看另外一篇