微信H5分享配置详解

微信H5分享功能的配置相对复杂，但通过本文的详细介绍，您可以轻松掌握整个过程。

官方文档：JS-SDK说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

1. 公众号配置

首先，确保您的公众号为企业账号，并在公众号后台配置好允许访问的域名。

2. 引入JS文件

可以通过两种方式引入微信JS-SDK文件：

• 通过CDN引入
• 通过npm引入（推荐）

使用npm引入的步骤如下：

npm install weixin-js-sdk --save-dev

引入依赖模块：

// 1. 直接在需要的页面引入
import wx from 'weixin-js-sdk';
// 2. 或者在main.js中，通过Vue原型链全局引入
import wx from 'weixin-js-sdk';
Vue.prototype.$wx = wx;

3. 配置信息

使用 wx.config 方法配置信息：

// 前置动作
// 1. 将当前页面地址提交给后端，以获取配置信息configData
// 2. 推荐提交当前页面地址和参数：window.location.href
// 3. 提交给后端的页面地址必须在公众后台配置好域名
// 4. 本地调试的域名无法正常使用，可以在本地进行域名解析
var cOnfigData= {
  debug: true, // 开启调试模式
  appId: '', // 必填，公众号的唯一标识（后端提供）
  timestamp: , // 必填，生成签名的时间戳（后端提供）
  nonceStr: '', // 必填，生成签名的随机串（后端提供）
  signature: '', // 必填，签名（后端提供）
  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
};
$wx.config(configData); // 关键接口

4. 调用微信JS-SDK接口

注意：

• 调用微信SDK接口时，必须在 wx.config 之后。
• 调用的接口需要在 wx.config 的 jsApiList 中配置，否则无法使用。
• 本地调试时，可以尝试“域名重定向”的方式。
• 分享接口中的URL可以随意填写。
• 部分SDK接口的参数是必填的，否则会报错。

// 注意：
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后。
// config是一个客户端的异步操作，如果需要在页面加载时调用相关接口，
// 则须把相关接口放在ready函数中调用来确保正确执行。
// 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.ready(function() {
  // 自定义“分享给朋友”及“分享到QQ”
  wx.updateAppMessageShareData({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: that.pageData.avatar, // 分享图标
    success: function(setSuccess) {
      console.log('设置成功', setSuccess);
    }
  });
  // 自定义“分享到朋友圈”/“分享到QQ空间”
  wx.updateTimelineShareData({
    title: '', // 分享标题
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function(setSuccess) {
      console.log('设置成功', setSuccess);
    }
  });
  // 隐藏所有非基础按钮接口
  wx.hideAllNonBaseMenuItem();
  // 批量显示功能按钮接口
  wx.showMenuItems({
    menuList: ['menuItem:share:timeline', 'menuItem:share:appMessage'] // 要显示的菜单项
  });
});

完整示例：

wxConfig() {
  let that = this;
  var logInPageUrl = window.location.href;
  var logInPageUrl2 = window.location.origin + '/#/?id=' + that.id;
  var jsApiArray = ['showMenuItems', 'hideAllNonBaseMenuItem', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideOptionMenu', 'showOptionMenu'];
  that.$http('wxConfig_api', { url: logInPageUrl }).then(wxCOnfigRes=> {
    if (wxConfigRes.code == 0) {
      var getData = wxConfigRes.data;
      wx.config({
        debug: false, // 开启调试模式
        appId: getData.app_id, // 必填，公众号的唯一标识
        timestamp: getData.timeStamp, // 必填，生成签名的时间戳
        nonceStr: getData.nonceStr, // 必填，生成签名的随机串
        signature: getData.signature, // 必填，签名
        jsApiList: jsApiArray // 必填，需要使用的JS接口列表
      });
      wx.ready(function() {
        // 自定义“分享给朋友”及“分享到QQ”
        wx.updateAppMessageShareData({
          title: that.pageData.true_name + ' ' + that.pageData.position, // 分享标题
          desc: that.pageData.desc, // 分享描述
          link: logInPageUrl2, // 分享链接
          imgUrl: that.pageData.avatar, // 分享图标
          success: function(setSuccess) {
            console.log('设置成功', setSuccess);
          }
        });
        // 自定义“分享到朋友圈”/“分享到QQ空间”
        wx.updateTimelineShareData({
          title: that.pageData.true_name + ' ' + that.pageData.position, // 分享标题
          link: logInPageUrl2, // 分享链接
          imgUrl: that.pageData.avatar, // 分享图标
          success: function(setSuccess) {
            console.log('设置成功', setSuccess);
          }
        });
        // 隐藏所有非基础按钮接口
        wx.hideAllNonBaseMenuItem();
        // 批量显示功能按钮接口
        wx.showMenuItems({
          menuList: ['menuItem:share:timeline', 'menuItem:share:appMessage'] // 要显示的菜单项
        });
      });
      wx.error(function(res) {
        console.error('config信息验证失败', res);
      });
    }
  }).catch(err => {
    console.error('接口错误', err);
  });
}