微信小程序实现转发、分享、预览功能方案

之前做过的微信小程序项目，则涉及到很多转发分享的功能，例如 页面的分享-到朋友圈-好友，文件（图片 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

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

• 1.首先，页面需设置onShareAppMessage允许发送给朋友 。
• 在条件1满足的情况下，页面需设置onShareTimeline允许 分享到朋友圈

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

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

实现代码如下

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) => {
            
          }
        })
      }
    }
  })