vue h5页面唤起浏览器原生分享模块

vue h5页面唤起浏览器原生分享模块兼容性强

淡762

4382人浏览 · 2022-08-11 10:55:10

淡762 · 2022-08-11 10:55:10 发布

方式一.使用NativeShare实现拉起浏览器原生分享模块

git地址：

GitHub - fa-ge/NativeShare: NativeShare是一个整合了各大移动端浏览器调用原生分享的插件

npm包安装

npm install --save nativeshare

组件内引入：

import NativeShare from 'nativeshare'

html:

 <div @click="nativeShare" style="padding:20px">拉起分享</div>

js:

nativeShare() {
      let nativeShare = new NativeShare()

      nativeShare.setShareData({
        icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
        link: 'https://github.com/fa-ge/NativeShare',
        title: 'NativeShare',
        desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
        success: function () {
          alert('success')
        },
        fail: function () {
          alert('fail')
        }
      })
      try {
        nativeShare.call('wechatFriend')//
        // 如果是分享到微信则需要 nativeShare.call('wechatFriend')
        // 类似的命令有
        //  default 默认，调用起底部的分享组件，当其他命令不支持的时候也会调用该命令
        //  wechatTimeline 分享到朋友圈
        //  wechatFriend 分享给微信好友
        //  qqFriend 分享给QQ好友
        //  qZone 分享到QQ空间
        //  weibo 分享到微博
        alert('成功')
      } catch (err) {
        // 如果不支持，你可以在这里做降级处理
        alert(err)
      }
    }

方式二.使用web share api拉起浏览器原生分享模块

html：

    <div @click="webShare" style="padding:20px">webShare</div>

js：

 webShare() {
      if (navigator.share) {
        navigator.share(
          {
            title: 'webShare',
            text: 'webShare',
            url: location.href
          }
        );
      }
    }

2022年8月11日截图Navigator.share - Web API 接口参考 | MDN

3.注意：

方式一NativeShare兼容性较强，但截止目前最后一次更新时间为2020.11.23，可能会导致未知问题。

方式二web share api兼容性较差，但它是未来趋势。

以上两种方法拉起浏览器原生分享，页面必须是https协议，http会导致拉起失败，想要尝试拉起效果可以用localhost本地打开项目。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^