记录一次微信公众号自定义分享

最新推荐文章于 2025-10-01 17:01:44 发布

原创最新推荐文章于 2025-10-01 17:01:44 发布 · 603 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信

注意：微信自定义分享需要在配置号的域名下测试，本地测试传入的url会导致signature计算错误。

开发步骤添加微信js-sdk 依赖

在js引入需要用到的js

//vue引入微信sdk

import wx from 'weixin-js-sdk';
//vue引入支持axios 进行ajax请求

import axios from 'axios';

var appid;
var timestamp;
var nonceStr;
var signature;
var url;

var introduce;
var venueName;
var pictureUrl;

mounted() {
//获取微信配置参数
share();

function share() {

var url = location.href.replace(/#/g, "%23");
var _this = this;

//调用后台接口返回signature等相关数据，传入的url应该是#之前的url

//比如http://www.baidu.com/#/AAAAAA

//url应该是http://www.baidu.com/而不是加上#之后的全部值

//本项目因为业务需要将#转码了
        axios.get('/api/wechat/jsapi/signature?redirectURI=' + url).then(function (v) {
          if (v.code == 200) {
            console.log(v.result);
            var result = v.result;
            var params = result.wxJsapiSignature;
            appid = params.appId;
            timestamp = params.timestamp;
            nonceStr = params.nonceStr;
            signature = params.signature;
            url = params.url;

//业务相关数据可以省略
            if (result.artVenueTpl) {
              var artVenueTpl = result.artVenueTpl;
              venueName = artVenueTpl.name;
              pictureUrl = artVenueTpl.pictureUrl;
              introduce = artVenueTpl.introduce;
            }
            initWXShare();
          }
        });
      }

      function initWXShare() {
        wx.config({

//设置debug为ture可以在访问时打印信息
          debug: false,
          appId: appid, // 和获取Ticke的必须一样------必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: nonceStr, // 必填，生成签名的随机串
          signature: signature,// 必填，签名，见附录1
          //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
          jsApiList: [
            'onMenuShareAppMessage', 'onMenuShareTimeline',
            'onMenuShareQQ', 'onMenuShareQZone'
          ]
        });
        //处理验证失败的信息
        wx.error(function (res) {
          logUtil.printLog('验证失败返回的信息:', res);
        });
      }

      //处理验证成功的信息
      wx.ready(function () {
        //       alert(window.location.href.split('#')[0]);
        //分享到朋友圈
        wx.onMenuShareTimeline({
          title: venueName, // 分享标题
          desc: introduce, // 分享描述
          link: url, // 分享链接
          imgUrl: pictureUrl, // 分享图标
          trigger: function (res) {
            // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
        //分享给朋友
        wx.onMenuShareAppMessage({
          title: venueName, // 分享标题
          desc: introduce, // 分享描述
          link: url, // 分享链接
          imgUrl: pictureUrl, // 分享图标
          trigger: function (res) {
            // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
        //分享到QQ
        wx.onMenuShareQQ({
          title: venueName, // 分享标题
          desc: introduce, // 分享描述
          link: url, // 分享链接
          imgUrl: pictureUrl, // 分享图标
          trigger: function (res) {
            // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });

        //分享到QQ空间
        wx.onMenuShareQZone({
          title: venueName, // 分享标题
          desc: introduce, // 分享描述
          link: url, // 分享链接
          imgUrl: pictureUrl, // 分享图标
          trigger: function (res) {
            // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          },
          fail: function (res) {
//            mui.toast(JSON.stringify(res));
          }
        });
      });
    },