欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

(记)在vue中实现H5页面自定义分享朋友圈

程序员文章站 2022-03-07 19:06:18
需求:网页分享微信朋友圈,要有小的缩略图。1.使用第三方包,引入微信的JS_SDK"weixin-js-sdk": "^1.6.0"npm i weixin-js-sdk2.封装一个公共方法创建一个wxShare.js/* eslint-disable*/import wx from 'weixin-js-sdk'//微信sdk依赖const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuS....

需求:网页分享微信朋友圈,要有小的缩略图。

1.使用第三方包,引入微信的JS_SDK

"weixin-js-sdk": "^1.6.0"

npm i weixin-js-sdk

2.封装一个公共方法

创建一个wxShare.js

/* eslint-disable*/
import wx from 'weixin-js-sdk'			//微信sdk依赖
const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo']
//要用到微信API
function getJSSDK (data, dataForWeixin) {
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: data.appId, // 必填,公众号的唯一标识
    timestamp: data.timestamp, // 必填,生成签名的时间戳
    nonceStr: data.noncestr, // 必填,生成签名的随机串
    signature: data.signature, // 必填,签名
    jsApiList: jsApiList, // 必填,需要使用的JS接口列表
    success: () => {
      alert('success')
    },
  })
  wx.ready(function () {
    wx.onMenuShareAppMessage({
      title: dataForWeixin.title,
      desc: dataForWeixin.desc,
      link: dataForWeixin.linkurl,
      imgUrl: dataForWeixin.img,
      trigger: function trigger (res) { },
      success: function success (res) {
        // alert('已分享');
      },
      cancel: function cancel (res) {
        // alert('已取消');
      },
      fail: function fail (res) {
        // alert('进来了');
      }
    });
    // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
    wx.onMenuShareTimeline({
      title: dataForWeixin.title,
      link: dataForWeixin.linkurl,
      imgUrl: dataForWeixin.img,
      trigger: function trigger (res) {
        // alert('用户点击分享到朋友圈');
      },
      success: function success (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));
        // console.log(JSON.stringify(res));
      }
    });
  })
  wx.error((res) => {
    console.log(JSON.stringify(res) + "微信验证失败");
  });
}
export default {
  // 获取JSSDK
  getJSSDK: getJSSDK
}

3.在页面中的使用

import wxShare from '../util/wxShare'
export default{
	methods:{
		postWechatSignature({ url: location.href }).then((res) => {
          if (res.status === 200) {
            const { data } = res
            wxShare.getJSSDK(data, dataForWeixin)
          }
        })
	}
}

注解:
在页面中发起请求,获得后台返回的必要字段,在能实现。
必要事件:一定要在公众号绑定域名,需要后端一起协助,把当前路径传送到后台,给后台解析。才能实现微信提供的sdk功能。
了解更多:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

本文地址:https://blog.csdn.net/qq_41163341/article/details/109241891