微信自定义分享内容

参考链接：概述 | 微信开放文档 (qq.com)   微信开放文档 (qq.com)

前端配置步骤：

一、引入微信SDK

cnpm install wx-js-sdk-1.6.0 --save    // npm安装
let wx = require('wx-js-sdk-1.6.0')    // npm安装后引入
// 直接在线引入
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

二、获取微信签名（注意如果是在vue项目当中这里需要在mounted周期调用）

      initWxConfig() {
        this.$http({
          method:'post',
          url:'/wx/getWxTicket',
          data:{
            appId: this.APPID,
            refererUrl: location.href,  // 后台根据路径生成对应算法
          }
        }).then((response) =>{
          let res = response.data.data;
          let wx = require('wx-js-sdk-1.6.0');
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.appId, // 必填，公众号的唯一标识
            timestamp: res.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.nonceStr, // 必填，生成签名的随机串
            signature: res.signature, // 必填，签名
            jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','updateAppMessageShareData','updateTimelineShareData'] // 必填，需要使用的JS接口列表
          });
          // 需在用户点击分享按钮前就先调用
          wx.ready(function () {
            wx.updateAppMessageShareData({
              title: '', // 分享标题
              desc: '', // 分享描述
              link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: '', // 分享图标
              success: function () {
                // 设置成功
              }
            });
            wx.updateTimelineShareData({
              title: '', // 分享标题
              link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: '', // 分享图标
              success: function () {
                // 设置成功
              }
            })
          });
        }).catch((error) =>{
          console.log(error)
        });
      }

钉钉分享标题描述图标配置

<meta property="og:title" content="Title Here" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>
    <script>
      //钉钉分享
      function share() {
        dd.ready(function() {
          dd.biz.navigation.setRight({
            show: true, //控制按钮显示， true 显示， false 隐藏， 默认true
            control: true, //是否控制点击事件，true 控制，false 不控制， 默认false
            text: '...', //控制显示文本，空字符串表示显示默认文本
            onSuccess: function(result) {
              //如果control为true，则onSuccess将在发生按钮点击事件被回调
              dd.biz.util.share({
                type: 0, //分享类型，0:全部组件 默认； 1:只能分享到钉钉；2:不能分享，只有刷新按钮
                url: location.href,
                title: '标题',
                content: '描述',
                image: '图标地址',
                onSuccess: function() {
                  console.log('分享成功')
                },
                onFail: function(err) {
                  console.log(err)
                }
              })
            },
            onFail: function(err) {}
          });
        })
      }
      if (navigator.userAgent.indexOf('DingTalk') !== -1){
        share() //钉钉环境分享
      }
    </script>