微信小程序转发、分享、预览

原创

iwhao

发布于 2024-07-01 19:57:32

3190

发布于 2024-07-01 19:57:32

之前做过的微信小程序项目，则涉及到很多转发分享的功能，例如页面的分享-到朋友圈-好友，文件（图片 doc pdf ）的分享给好友等等，开发中用到的api方法和遇到的问题，今天在这里统一总结记录下。

胶囊按钮分享

胶囊就是右上角的个位置的，可以看到小程序分享按钮和分享到朋友圈按钮默认是禁用灰色的，需要配置对应的api

分享好友

要想开启分享功能，需要设置onShareAppMessage方法，

这个方法会监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

代码如下

const app = getApp()

Page({
  data: {

  },
  onShareAppMessage: function () {
    return {
      title: '分享好友',
      path: '/index/index?id=123'
    }
  },
  onLoad: function () {
  },
  onShow: function(opt) {
    console.log(opt)
  }
})

或者按钮触发

<view class="intro">
  <button open-type="share">分享</button>
</view>

分享到朋友圈 onShareTimeline

小程序页面默认不可被分享到朋友圈，开发者需主动设置“分享到朋友圈”。页面允许被分享到朋友圈，需满足两个条件：

首先，页面需设置允许“发送给朋友”。具体参考 Page.onShareAppMessage 接口文档
满足条件 1 后，页面需设置onShareTimeline允许“分享到朋友圈”，同时可自定义标题、分享图等。

满足上述两个条件的页面，才可被分享到朋友圈

需要注意的是：用户在朋友圈打开分享的小程序页面，并不会真正打开小程序，而是进入一个“小程序单页模式”的页面，“单页模式” 需要注意以下问题：

页面顶部固定有导航栏，标题显示为当前页面 JSON 配置的标题。底部固定有操作栏，点击操作栏的“前往小程序”可打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式。
默认运行的是小程序页面内容，但由于页面固定有顶部导航栏与底部操作栏，很可能会影响小程序页面的布局。因此，请开发者特别注意适配“单页模式”的页面交互，以实现流畅完整的交互体验。
一些组件或接口存在一定限制，详情见下文单页模式下的限制章节
- 页面无登录态，与登录相关的接口，如 wx.login 均不可用；云开发资源需开启未登录访问方可在单页模式下使用，详见未登录模式。
- 不允许跳转到其它页面，包括任何跳小程序页面、跳其它小程序、跳微信原生页面
- 不允许横屏使用
- 若页面包含 tabBar，tabBar 不会渲染，包括自定义 tabBar
- 本地存储与小程序普通模式不共用

如图这个是从朋友圈打开的页面

实现代码如下

const app = getApp()

Page({
  data: {

  },
  onShareAppMessage: function () {
    return {
      title: '分享好友',
      path: '/index/index?id=123'
    }
  },
  onShareTimeline: function () {
    return {
      title: '分享朋友圈',
      path: '/index/index?id=123'
    }
  },
  onLoad: function () {
  
  },
  onShow: function(opt) {
    console.log(opt)
  }
})

如果嫌弃设置这两个api麻烦还有一种方法，但该口官方还在 Beta 版本，暂只在 Android 平台支持。

wx.showShareMenu

wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
})

这里解释下 withShareTicket这个属性：

带 shareTicket 的转发可以获取到更多的转发信息，例如群聊的名称以及群的标识 openGId

注意要想获取shareTicket，需要当用户将小程序转发到任一群聊之后，此转发卡片在群聊中被其他用户打开时，可以在 App.onLaunch 或 App.onShow 获取到一个 shareTicket

模拟器上提娜佳编译模式，选择1044进入场景来模拟

<!--app.js-->
App({
  onLaunch: function (launch) {
    console.log('launch',launch)
  },
  onShow: function(show) {
    console.log('show',show)
  }
})

文件分享

转发文件给好友

通用文件转发

这里用的api是 shareFileMessage,但这个api有个问题，例如图片视频，好友收到聊天页面看不到预览图，只能点击文件后才能查看具体内容效果可见下图

注意

开发者工具暂时不支持此 API 调试，得真机才能分享

且要注意下载的文件地址需要微信小程序后台设置downloadFile合法域名或者小程序设置里勾选不校验合法域名

实现代码

<!--wxml-->
<view class="intro">
  <button bindtap="shareFile">分享图片</button>
</view>
<!--js-->
shareFile() {
    let URL = 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg'
    wx.downloadFile({
      url: URL, // 下载url
      success(res) {
        // 下载完成后转发
        wx.shareFileMessage({
          filePath: res.tempFilePath,
          success() {},
          fail: console.error,
        })
      },
      fail: console.error,
    })
}

如果是图片或mp4 建议用专用的单独的api

shareVideoMessage

wx.downloadFile({
    url: URL, // 下载url
    success (res) {
      // 下载完成后转发
      wx.shareVideoMessage({
        videoPath: res.tempFilePath,
        success() {},
        fail: console.error,
      })
    },
    fail: console.error,
})

showShareImageMenu

 wx.downloadFile({
   url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
   success: (res) => {
     wx.showShareImageMenu({
       path: res.tempFilePath
     })
   }
 }

效果

Col1	Col2

预览文件

视频文件用 previewMedia

图片文件用 previewImage

一般像 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt' 这些文件类型统一用 openDocument

下面写的示例代码不太严谨凑合看吧

  wx.showLoading({
    title: '加载中',
  });
  wx.downloadFile({
    url: this.options.url,
    success: (res) => {
      console.log(res)
      const filePath = res.tempFilePath
      const fileType = this.getFileType(this.options.url)
      console.log(fileType)
      const arr = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt']
      if (arr.includes(fileType)) {
        wx.hideLoading();
        wx.openDocument({
          filePath: filePath,
          fileType,
          success: function (res) {
            console.log('')
          },
          fail: () => {
            
          }
        })
      } else if (fileType == 'mp4' || fileType == 'mov') {
        wx.hideLoading();
        wx.previewMedia({
          sources: [
            {
              url: filePath,
              type: 'video'
            }
          ],
          success(result) {
            
          },
          failt: (err) => {
           
          }
        })
      } else {
        uni.hideLoading();
        wx.previewImage({
          urls: [filePath],
          current: 0,
          success(result) {
            console.log('result', result)
          },
          failt: (err) => {
            
          }
        })
      }
    }
  })

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

微信小程序