Vue页面分享到钉钉消息样式

之前在项目中遇到了h5做分享到微信，使用的是微信的js-sdk进行设置，能够设置分享出去的消息样式是下面的样子：

微信设置好的分享样式

测试在测试过程中，使用了钉钉打开该链接，然后在钉钉内部进行分享到钉钉或者微信，这时候会出现下面的显示问题

修改前

查了好多资料，没想到钉钉自己也有对应的js-sdk，和微信不同的是，这个不需要微信的一些繁琐的秘钥什么的，这个很简单，如下配置：
1.引入该外部js文件

<script type="text/javascript" src="https://g.alicdn.com/dingding/open-develop/1.9.0/dingtalk.js"></script>

2.在需要分享设置的页面进行设置如下代码

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: '分享出去的；链接',
              content: '分享出去的描述',
              title: '分享出去的标题',
              image:'分享出去的小图标',
              onSuccess: function () { },
              onFail: function (err) { }
            })
          },
          onFail: function (err) { }
        });
      })

3.这样，本页面在分享的时候就能实现如下效果：

修改后的效果

最后编辑于：2020.03.03 17:27:32

Vue页面 分享到钉钉 消息样式

推荐阅读更多精彩内容

Vue页面分享到钉钉消息样式