网页H5分享到微信好友/朋友圈功能以及自定义分享卡片link、标题遇到的坑

利用微信SDK在网页调起分享并自定义分享link与标题、描述

一、第一步

首先需要在公众号配置您想要分享的网页域名 白名单
如下图所示，完成设置

二、第二步

安装微信提供的JS-SDK包

npm install weixin-js-sdk -S

随便找个页面引入在控制台打印，出现下图信息，引入成功

三、第三步

上面是微信文档原话

四、第四步

新建tools.js文件

// Vue.js 项目正常引入即可
// JS-SDK
var wx = require('weixin-js-sdk');


/**
 * 验证配置(由后端接口提供配置验证的必要参数)
 * @description appId/timestamp/nonceStr/signature等
 * @param {Object} data - 后端必要参数
 * @return void
 */
function config(data) {
	// 手动注入配置
	wx.config({
		debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
		appId: data.appId, // 必填，公众号的唯一标识
		timestamp: data.timestamp, // 必填，生成签名的时间戳
		nonceStr: data.nonceStr, // 必填，生成签名的随机串
		signature: data.signature,// 必填，签名
		jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的 JS 接口列表
	})

    // 或者由后端返回全部的参数 ↓↓↓
    // wx.config(data)
}


/**
 * 设置自定义分享配置(必须在用户可能点击分享按钮前就调用,也就是说提前设置好才行)
 * @description 详见文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#111
 * @param {Object} appMessage - "分享给朋友/分享到QQ" 配置
 * @param {Object} timeLine - "分享到朋友圈/分享到QQ空间" 配置
 * @return void
 */
function wxShare(appMessage = {}, timeLine = {}) {
	wx.ready(() => {
		// "分享给朋友/分享到QQ"
		wx.updateAppMessageShareData(appMessage)
		// "分享到朋友圈/分享到QQ空间"
		wx.updateTimelineShareData(timeLine)
	})
}


export default {
    config: config,
    wxShare: wxShare
}

五、第五步

在要自定义分享配置的页面引入tools.js文件，并注入配置信息，调用

<template>
  <div>
    <h1>微信开发者工具中打开进行测试</h1>
  </div>
</template>

<script>
// 注意路径！！！
import $tools from '@/assets/tools.js'
export default {
  
  data() {
    return {
      // 分享标题、描述、图标等数据(根据您的需求自定义即可)
      info: {
        title: '自定义标题',
        desc: '自定义描述',
        cover: 'https://xxxxxxx/xxxxx.png',
        // ...
      }
    }
  },

  mounted() {
    // 一键开启页面分享功能
    this.getConfig()
  },

  methods: {

    /**
     * 获取配置信息(尽量在mounted()钩子中执行)
     * @description 拿到后端数据后,传入封装好的函数中进行验证
     * @return void
     */
    getConfig() {
      // 请自行替换接口请求方式与地址！！
      this.$http(`XXXX`).then(res => {
        // console.log('配置信息', res.data)
        // 1: 注入并验证信息
        $tools.config(res.data)
        // 2: 调用分享功能
        this.setShare()
      })
    },

    /**
     * 获取配置信息(尽量在mounted()钩子中执行)
     * @description 拿到后端数据后,传入封装好的函数中进行验证
     * @return void
     */
    setShare() {
      // 分享标题、描述、图标等数据(根据您的需求自定义即可)
      const data = this.info;

      // "分享给朋友/分享到QQ"
      const appMessage = {
          title: data.title, //分享标题
          desc: data.desc, //分享描述
          link: location.href, //分享链接,默认当前页面(必须对应JS安全域名)
          imgUrl: data.cover, //分享图标
          success: () => {//调用成功
            // alert('成功')
          },
          fail: (err) => {//调用失败
            alert(JSON.stringify(err))
          }
      }

      // "分享到朋友圈/分享到QQ空间"
      const timeLine = {
          title: data.title, //分享标题
          link: location.href, //分享链接,默认当前页面(必须对应JS安全域名)
          imgUrl: data.cover, //分享图标
          success: () => {//调用成功
            // alert('成功')
          },
          fail: (err) => {//调用失败
            alert(JSON.stringify(err))
          }
      }

      // 丢入自动设置
      $tools.wxShare(appMessage, timeLine)
    },

  }
}
</script>

<style scoped></style>

遇到的坑

1. 确保公众号有权限
2. 确认传入config的后端接口参数
3. 
4. 近期微信做出了调整，必须在公众号底部菜单栏打开才能正常分享，显示自定义的卡片信息
   微信外部链接内容管理规范具
   5.再调后端接口拿验证信息的时候，后端可能会需要你传一个url，
   
   
   一定要是当前网页的url，不让有可能分享失败

encodeURIComponent(location.href.split('#')[0])

如果分享以后，发现小卡片上的链接不是config注入的配置中如ink链接，并且又是在公众号配置过的安全域名，那么可以让后端/运维给你一个转发地址，通过找个转发地址跳转到你想要去的页面