基于nuxt3的微信分享

756 阅读1分钟

微信分享的两种方式

注意问题 :
1.sdk校验是否通过
2.分享的链接应该为当前页链接

1.通过srcipt标签引用sdk


const jsApiList = ['updateAppMessageShareData', 'updateTimelineShareData']   
async function getJSSDK (dataForWeixin) {
  const { $axios} = useNuxtApp()
  const { data } = await useLazyAsyncData('getimg',()=>$axios.get(`/wx/jsapi/getJsapiTicket?url=${window.location.href}`))
  const script = document.createElement('script');
    script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
    new Promise((resolve, reject) => {
    let done = false;
    script.onload = script.onreadystatechange = () => {
    if (!done &&(!script.readyState ||script.readyState === 'loaded' ||script.readyState === 'complete')) {
      done = true;// 避免内存泄漏
      script.onload = script.onreadystatechange = null;
      resolve(script);
     }
    };
    script.onerror = reject;
    document.getElementsByTagName('head')[0].appendChild(script);
    }).then(res => {
    
    let { appId, timestamp, nonceStr, signature } = data
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
      appId: appId, // 必填,公众号的唯一标识
      timestamp: timestamp, // 必填,生成签名的时间戳
      nonceStr: nonceStr, // 必填,生成签名的随机串
      signature: signature, // 必填,签名
      jsApiList: jsApiList // 必填,需要使用的JS接口列表
    })
    // console.log(res.data);
    // console.log(dataForWeixin);
    wx.ready(function () {
      // 监听“分享好友”按钮点击、自定义分享内容及分享结果接口
      wx.updateTimelineShareData({
        title: dataForWeixin.title,
        desc: dataForWeixin.desc,
        link: dataForWeixin.linkurl,
        imgUrl: 'https://xxx/share.png',
        trigger: function trigger (res) {
          console.log('trigger-----' + res);
          console.log('trigger');
        },
        success: function success (res) {
          console.log('success-----' + res);
          console.log('已分享');
        },
        cancel: function cancel (res) {
          console.log('cancel-----' + res);
          console.log('已取消');
        },
        fail: function fail (res) {
          console.log(JSON.stringify(res));
        }
      });
      // 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
      wx.updateAppMessageShareData({
        title: dataForWeixin.title,
        link: dataForWeixin.linkurl,
        imgUrl: 'https://xxx/share.png',
        trigger: function trigger (res) {
          console.log('trigger-----' + res);
          console.log('trigger');
        },
        success: function success (res) {
          console.log('success-----' + res);
          console.log('已分享');
        },
        cancel: function cancel (res) {
          console.log('cancel-----' + res);
          console.log('已取消');
        },
        fail: function fail (res) {
          console.log(JSON.stringify(res));
        }
      });
    })
    // 分享错误处理
    wx.error(function (res) {
      console.log(JSON.stringify(res) + "微信验证失败");
    });})
    
 
}
export default getJSSDK

2.npm 包安装

import Vue from 'vue'
import wx from 'weixin-js-sdk'
import {getJsapiTicket} from '@/api/homePage.js'
Vue.prototype.$wechat = wx

const jsApiList = ['updateAppMessageShareData', 'updateTimelineShareData']
export default ({ app, store }) => {
  Vue.prototype.wxShare = function (shareData) {
    console.log(app);
    console.log(store.getters.deviceType)
    // if (process.title === 'browser') {
      getJsapiTicket(window.location.href).then(res => {
        const Data = res.data
        console.log('getWeChatConfig', Data)
        this.$wechat.config({
          debug: false,
          appId: Data.appId,
          timestamp: Data.timestamp,
          nonceStr: Data.nonceStr,
          signature: Data.signature,
          jsApiList:jsApiList
        })
      })
      this.$wechat.ready(() => {
      // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
        this.$wechat.updateAppMessageShareData({
          title: shareData.title,
          desc: shareData.desc,
          link: shareData.link,
          imgUrl: shareData.imgUrl,
          success () {
            // 设置成功
          },
          cancel () {
            console.log('分享取消')
          }
        })
        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
        this.$wechat.updateTimelineShareData({
          title: shareData.title,
          desc: shareData.desc,
          link: shareData.link,
          imgUrl: shareData.imgUrl,
          success () {
            // 设置成功
          },
          cancel () {
            console.log('分享取消')
          }
        })
      })
    // }
  }
}