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

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

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

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

代码如下

代码语言：js复制const app = getApp()

Page({

data: {

},

onShareAppMessage: function () {

return {

title: '分享好友',

path: '/index/index?id=123'

}

},

onLoad: function () {

},

onShow: function(opt) {

console.log(opt)

}

})或者按钮触发

代码语言：js复制

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

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

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

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

实现代码如下

代码语言：js复制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

代码语言：js复制wx.showShareMenu({

withShareTicket: true,

menus: ['shareAppMessage', 'shareTimeline']

})这里解释下 withShareTicket这个属性：

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

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

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

代码语言：js复制

App({

onLaunch: function (launch) {

console.log('launch',launch)

},

onShow: function(show) {

console.log('show',show)

}

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

注意

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

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

实现代码

代码语言：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

代码语言：js复制wx.downloadFile({

url: URL, // 下载url

success (res) {

// 下载完成后转发

wx.shareVideoMessage({

videoPath: res.tempFilePath,

success() {},

fail: console.error,

})

},

fail: console.error,

})showShareImageMenu

代码语言：js复制 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

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

代码语言：js复制 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腾讯技术创作特训营最新征文，快来和我瓜分大奖！