uniapp多平台如何进行分享

一诺滚雪球
2,260 阅读4分钟

uniapp可以编译出不同平台代码，而分享是最常用的一个功能。对于不同平台分享的调用方式和逻辑有较大差异。本文主要介绍下App、微信小程序、H5平台下如何进行微信分享。

主要内容如下：

  1. App：可以自主控制分享内容、分享形式及分享平台

    1. 使用 uni.share API方式调用社交sdk分享

  2. 小程序：不支持API调用，只能用户主动点击触发分享。可使用自定义按钮方式 或监听系统右上角的分享按钮 onShareAppMessage 进行自定义分享内容

  3. H5：如果是普通浏览器，浏览器自带分享按钮；如果是在微信内嵌浏览器中，可调用js-sdk进行分享，参考，本次介绍微信内嵌h5方式。

1. 具体代码实现

1.1 小程序分享

小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息。

  • 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮，也可能是开发者在页面中放置的分享按钮（<button open-type="share">）。

具体代码如下：

export default {
  onShareAppMessage(res) {
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123',
      imageUrl: xxx.jpg,
    }
  }
}

1.2 h5分享

这里的h5分享，只考虑在微信内嵌浏览器中。具体需要调用js-sdk进行分享。

步骤1：全局引入js-sdk

<script src='https://res2.wx.qq.com/open/js/jweixin-1.6.0.js'></script>

步骤2：使用sdk的onMenuShareAppMessage进行分享

jWeixin.ready(async function () {
          jWeixin.showOptionMenu()
          jWeixin.onMenuShareTimeline({
            title: opt.title || '', // 分享标题
            link: opt.link, // 分享链接
            desc: opt.desc || '', //
            imgUrl: opt.imgUrl, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
              if (opt.sucess) {
                opt.sucess()
              }
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
              if (opt.cancel) {
                opt.cancel()
              }
            }
          })
          jWeixin.onMenuShareAppMessage({
            title: opt.title || '', // 分享标题
            desc: opt.desc || '', // 分享描述
            link: opt.link, // 分享链接
            imgUrl: opt.imgUrl, // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            //dataUrl: '<%=localUrl+wsc.getDataUrl()%>', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
              // 用户确认分享后执行的回调函数
              if (opt.sucess) {
                opt.sucess()
              }
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
              if (opt.cancel) {
                opt.cancel()
              }
            }
          })

          jWeixin.error(function (res) {})
        })

1.3 App分享

uni-app的App引擎已经封装了微信、QQ、微博的分享SDK，开发者可以直接调用相关功能 。

1.3.1 uni.share 在App端各社交平台分享配置说明

  • 第一步，打开 manifest.json -> App模块权限配置，勾选 Share(分享)；
  • 第二步，按如下文档具体配置微信、微博、QQ的参数。

1.3.2 微信分享

在 manifest.json 的 App SDK 配置里，勾选微信消息及朋友圈，并填写 appid，如需在iOS平台使用还需要配置通用链接。

参考文档

image.png

这些配置需要打包生效，真机运行仍然是HBuilder基座的设置，可使用自定义基座包调试。离线打包请参考离线打包文档在原生工程中配置。

配置并打包后，通过uni.getProvider可以得到配置的结果列表，注意这里返回的是manifest配置的，与手机端是否安装微信、QQ、微博无关。

如果手机端未安装QQ、微博，调用时会启动这些平台的wap页面分享，如果已安装相应客户端，会启动它们的客户端分享。

1.3.3 具体代码

uni.share({
    provider: "weixin",
    scene: "WXSceneSession",
    type: 0,
    href: "http://uniapp.dcloud.io/",
    title: "uni-app分享",
    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
    imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });

分享效果如下：

image.png

1.4 h5内嵌小程序分享

小程序内嵌H5项目，分享小程序时可以指定分享标题、图片链接、跳转链接，即在分享时需要H5小程序通讯传递相关信息。

web-view网页中可使用wx.miniProgram.postMessage向小程序发送消息，触发组件的message事件，在小程序web-view页面中用bindMessage相关参数。

具体代码实现：

  1. 判断h5是在小程序环境中，调用微信的sdk进行授权，使用postMessage传递信息，数据可以自行定义
// 判断是否在微信中
function isMp() {
  return new Promise((resolve, reject) => {
      wx.miniProgram.getEnv(function (res) {
          if (res.miniprogram) {
              resolve(true)
          } else {
              resolve(false)
          }
      })
  })
}

const isMiniProgram = async () => {
  if(/MicroMessenger/i.test(navigator.userAgent)){
    const result = await isMp();
    return result || false;
  }
}
const isMini = await isMiniProgram()
// data数据自行定义

if(this.isMini){
    wx.miniProgram.postMessage({
        data: {
            shareTitle: shareTitle,
            shareImage: shareImage,
            shareJumpUrl: shareJumpUrl
        }
    });
}else{
    使用内嵌的h5微信分享
};

小程序：

<web-view :src="url" @message="bindmessage" @load="bindload"></web-view>

bindmessage(e){
    this.shareData = e.detail.data
}
onShareAppMessage: function (res) {
  const path = this.shareData.link || decodeURIComponent(res.webViewUrl)
  path = this.getUrl(path)
  const params = {
    url: path
  }
  const sharePath = '/pages/mall/webview?' + urlEncode(params)
  return {
    title: this.shareItem.title || this.shareItem.desc,
    imageUrl: this.shareItem.imgUrl || '',
    path: sharePath,
    success: function (res) {},
    fail: function (res) {}
  }
}

2. 总结

最后总结一下：

  • App：使用 uni.share API，开发者可完全控制分享内容和形式。
  • 小程序：通过 onShareAppMessage 处理分享，依赖用户操作。
  • H5：对于微信内嵌的h5，使用微信 SDK 在内嵌浏览器中分享。
  • 小程序内嵌H5：使用wx.miniProgram.postMessage向小程序发送消息，进行小程序分享

希望能对大家有所帮助，如有错误，请指正O^O!

avatar
文章
阅读
粉丝