先看一下效果图：

点击右上角的分享按钮，触发百度浏览器的分享事件，来实现分享。

目前只支持UC浏览器  百度浏览器  等主流浏览器。

使用NativeShare.js 来达到上述功能的实现

如何在Vue中使用：

第一步：安装依赖：npm install nativeshare

第二步：在需要的vue组价或页面引入

import NativeShare from 'nativeshare'

第三步：在点击分享的地方创建方法：

@click="onSelect()"

第四步：在methods中创建：

        onSelect() {
          const self = this

            var nativeShare = new NativeShare({
              wechatConfig: {
                appId: self.shlist.appId,
                timestamp: self.shlist.timestamp,
                nonceStr: self.shlist.nonceStr,
                signature: self.shlist.signature,
              },
              // 让你修改的分享的文案同步到标签里，比如title文案会同步到<title>标签中
              // 这样可以让一些不支持分享的浏览器也能修改部分文案，默认都不会同步
              syncDescToTag: false,
              syncIconToTag: false,
              syncTitleToTag: false,
            })


// 设置分享文案
            nativeShare.setShareData({
              icon: 'http://www.zh8zh8.com/uploads/20200515/1383cbec15b3f604c9299f565669fb14.jpg',
              link: window.location.href,
              title: '知会教育',
              desc:self.title,
              from: '@fa-ge',
            })

// 唤起浏览器原生分享组件(如果在微信中不会唤起，此时call方法只会设置文案。类似setShareData)
            try {
              nativeShare.call()
              // 如果是分享到微信则需要 nativeShare.call('wechatFriend')
              // 类似的命令下面有介绍
              console.log('支持')
            } catch(err) {
              // 如果不支持，你可以在这里做降级处理
              self.$toast('不支持该浏览器自动分享,请您手动分享')
            }
          // this.showShare = false;

          },

这样就可以完美的实现功能了，有的浏览器不支持catch会在这里地方做处理

gitHup：https://github.com/fa-ge/NativeShare