vue 模仿钉钉打卡_Vue页面 分享到钉钉 消息样式

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

微信设置好的分享样式

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

修改前

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

1.引入该外部js文件

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.这样，本页面在分享的时候就能实现如下效果：

修改后的效果