🔥微信常用分享方法大集合;项目直接拿着用
✅作者简介:
我是痴心阿文,你们的学友哥,今天给大家分享微信小程序常用分享方法;项目直接拿着用!
💖如果觉得博主的文章有帮到你的话,请👍支持一下博主哦🤞
(1)分享: 在要分享的页面的js文件中设置: 监听用户点击页面内转发按钮(button组件open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。 设置允许“发送给朋友” onShareAppMessage:function(from,target,webViewUrl) { 参数: from 转发事件来源。button:页面内转发按钮;menu:右上角转发菜单 target 如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined webViewUrl 页面中包含web-view组件时,返回当前web-view的url
const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: '自定义转发标题'
})
}, 2000)
})
return{
title:'点击转发后,页面文章的标题',
path: "/pages/news/news-detail/news-detail" 默认是当前页面
imageUrl:'本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG'
不写默认为当前页面截图
promise,如果该参数存在,则以resolve结果为准,如果三秒内不resolve分享会使用上面传入的默认参数
}
}
其中:
该函数与data同级
path的默认路径为根路径,即src开始
path:'/必要要以/开头,放置要分析页面的文件路径,可根据app.json内的配置信息设置'
(2)点击按钮分享: button 组件设置属性 open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage
(3)分享到朋友圈: 必须先定义onShareAppMessage,定义该回调,点击右上角分享,才会显示
onShareTimeline(){
return{
title:自定义标题,即朋友圈列表页上显示的标题 当前小程序名称
query:自定义页面路径中携带的参数,如 path?a=1&b=2 的 “?” 后面部分 当前页面路径携带的参数
imageUrl:自定义图片路径,可以是本地文件或者网络图片。支持 PNG 及 JPG,显示图片长宽比是 1:1。 默认使用小程序 Logo
}
}
分享到朋友圈后,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面,“单页模式”有以下特点
页面无登录态,与登录相关的接口,如wx.login均不可用,云开发资源需开启未登录访问方可在单页模式下使用,详见未登录模式。
不允许跳转到其它页面,包括任何跳小程序页面、跳其它小程序、跳微信原生页面
不允许横屏使用
若页面包含tabBar,tabBar不会渲染,包括自定义tabBar
本地存储与小程序普通模式不共用
在app.json顶层或window字段内配置(未验证)
navigationBarFit 默认自动调整,若原页面是自定义导航栏,则为float,否则为squeezed 值为float时表示导航栏浮在页面上,与页面相交,值为squeezed时表示页面被导航栏挤压,与页面不相交
可通过判断场景值等于1154的方法来进行页面适配
(4)获取分享打开后的更多信息 如分享到群聊获取更多信息: (1)调用后,可以在App.onLaunch或App.onShow获取到一个shareTicket wx.showShareMenu({ withShareTicket 是否使用带shareTicket的转发详情,true能获取更多信息 menus 本接口为Beta版本,暂只在Android平台支持。需要显示的转发按钮名称列表,默认['shareAppMessage']。按钮名称合法值包含"shareAppMessage"、"shareTimeline"两种 success, ... }) (2)获取更多信息 wx.getShareInfo({ shareTicket, timeout, 毫秒 success, 需要解密 errMsg 错误信息 encryptedData 包括敏感数据在内的完整转发信息的加密数据,详细见加密数据解密算法 iv 加密算法的初始向量,详细见加密数据解密算法 cloudID 敏感数据对应的云 ID,开通云开发的小程序才会返回,可通过云调用直接获取开放数据,详细见云调用直接获取开放数据 fail, complete })
(5)群主转发小程序时同时把消息设为该群的群待办消息 (1)更新转发属性 wx.updateShareMenu({ withShareTicket 是否使用带shareTicket的转发详情 isUpdatableMessage 是否是动态消息,详见动态消息 activityId 动态消息的activityId。通过updatableMessage.createActivityId接口获取 toDoActivityId 群待办消息的id,通过toDoActivityId可以把多个群待办消息聚合为同一个。通过updatableMessage.createActivityId接口获取。详见群待办消息 2.11.0 templateInfo 动态消息的模板信息 isPrivateMessage 是否是私密消息。详见小程序私密消息 success 接口调用成功的回调函数 fail 接口调用失败的回调函数 complete 接口调用结束的回调函数(调用成功、失败都会执行) }) (2)若将多个待办消息聚合为同一个 通过wx.updateShareMenu接口修改toDoActivityId属性可以把多个待办消息聚合为同一个 即转发相同toDoActivityId的群待办消息,只会出现一个待办消息气泡。 toDoActivityId需要在转发前通过updatableMessage.createActivityId接口创建
(6)动态消息转发 消息发出去之后,开发者可以通过后台接口修改部分消息内容。 消息有对应的提醒按钮,用户点击提醒按钮可以订阅提醒,开发者可以通过后台修改消息状态并推送一次提醒消息给订阅了提醒的用户 消息有两个状态,分别有其对应的文字内容和颜色,其中状态0可以转移到状态0和1,状态1无法再转移。 状态 文字内容 颜色 允许转移的状态 0 "成员正在加入,当前 {member_count}/{room_limit} 人" #FA9D39 0, 1 1 "已开始" #CCCCCC 无 状态参数 每个状态转移的时候可以携带参数,具体参数说明如下。 参数 类型 说明 member_count string 状态 0 时有效,文字内容模板中 member_count 的值 room_limit string 状态 0 时有效,文字内容模板中 room_limit 的值 path string 状态 1 时有效,点击「进入」启动小程序时使用的路径。对于小游戏,没有页面的概念,可以用于传递查询字符串(query),如 "?foo=bar" version_type string 状态 1 时有效,点击「进入」启动小程序时使用的版本。有效参数值为:develop(开发版),trial(体验版),release(正式版) (1)创建activity_id 每条动态消息可以理解为一个活动,活动发起前需要通过updatableMessage.createActivityId接口创建activity_id。 后续转发动态消息以及更新动态消息都需要传入这个activity_id。 活动的默认有效期是 24 小时。活动结束后,消息内容会变成统一的样式: 文字内容:“已结束” 文字颜色:#00ff00 (2)在转发之前声明消息类型为动态消息 通过调用 wx.updateShareMenu 接口,传入 isUpdatableMessage: true,以及 templateInfo、activityId 参数。其中 activityId 从步骤一中获得。
wx.updateShareMenu({
withShareTicket: true,
isUpdatableMessage: true,
activityId: '', // 活动 ID
templateInfo: {
parameterList: [{
name: 'member_count',
value: '1'
}, {
name: 'room_limit',
value: '3'
}]
}
})
(3)修改动态消息内容
动态消息发出去之后,可以通过updatableMessage.setUpdatableMsg修改消息内容。
(7)私密消息转发 当分享者分享小程序卡片给其他用户或者微信群后,其他用户点击此小程序卡片时,开发者可以鉴别出点击卡片的用户是否被分享者分享过小程序卡片。 (1)创建activityId 创建业务活动后、分享小程序消息前,需要通过后台接口updatableMessage.createActivityId创建activityId,建立一个activityId与一个业务活动id唯一关联。 然后通过wx.updateShareMenu接口声明本次分享的消息为私密消息,私密消息具有不可二次转发性。 声明完成后,可以通过右上角菜单、分享按钮组件、wx.shareAppMessage(仅小游戏)分享私密消息给个人、群聊。 activityId创建后7天内分享有效,120天内验证有效。
wx.updateShareMenu({
withShareTicket: true,
isPrivateMessage: true,
activityId: 'xxx',
})
(2)验证
从群聊、单聊消息卡片进入小程序时,通过wx.authPrivateMessage接口可以验证当前用户是否是私密消息的接收者,即验证这条消息是否是A直接转发给B或者A转发给B所在的群。
该接口使用前,需要通过wx.login()接口登录小程序。
wx.authPrivateMessage({
shareTicket,
sucess
errMsg 错误信息
valid 验证是否通过,可能被篡改
encryptedData 经过加密的activityId,解密后可得到原始的activityId。若解密后得到的activityId可以与开发者后台的活动id对应上则验证通过,否则表明valid字段不可靠(被篡改)详细见加密数据解密算法
iv 加密算法的初始向量,详细见加密数据解密算法
...
})
(8)转发分享图片 wx.showShareImageMenu({ path, 要分享的图片地址,必须为本地路径或临时路径 success, ... }) 示例: wx.downloadFile({ url: 'res.wx.qq.com/wxdoc/dist/…', success: (res) => { wx.showShareImageMenu({ path: res.tempFilePath }) } })
(9)转发分享视频 wx.shareVideoMessage({ videoPath, 要分享的视频地址,必须为本地路径或临时路径 thumbPath, 缩略图路径,若留空则使用视频首帧 success, ... }) 示例: 回调写法: wx.downloadFile({ url: URL, 下载url success (res) { 下载完成后转发 wx.shareVideoMessage({ videoPath: res.tempFilePath, success() {}, fail: console.error, }) }, fail: console.error, })
Promise写法:
const { tempFilePath } = await wx.downloadFile({
url: URL,
})
下载完成后转发
await wx.shareVideoMessage({
videoPath: res.tempFilePath,
})
(10)转发分享文件 wx.shareFileMessage({ filePath 要分享的文件地址,必须为本地路径或临时路径 fileName 自定义文件名,若留空则使用filePath中的文件名 success 接口调用成功的回调函数 ... }) 示例:支持上面的回调写法 const { tempFilePath } = await wx.downloadFile({ url: URL, 下载url }) 下载完成后转发 await wx.shareFileMessage({ filePath: res.tempFilePath, })
(11)复制链接 监听用户点击右上角菜单的「复制链接」按钮时触发的事件。本接口为Beta版本,暂只在Android平台支持。 应在进入页面时调用wx.onCopyUrl自定义query,退出页面时调用wx.offCopyUrl,防止影响其它页面。
绑定分享参数
wx.onCopyUrl(() => {
return { query: 'a=1&b=2' }
})
取消绑定分享参数
wx.offCopyUrl()
(12)收藏: 收藏视频 wx.addVideoToFavorites({ videoPath 要收藏的视频地址,必须为本地路径或临时路径 thumbPath 缩略图路径,若留空则使用视频首帧 success ... })
收藏文件
wx.addFileToFavorites({
filePath 要收藏的文件地址,必须为本地路径或临时路径
fileName 自定义文件名,若留空则使用filePath中的文件名
success
...
})
用户点击右上角收藏触发事件:
onAddToFavorites(webviewUrl) { 页面中包含web-view组件时,返回当前web-view的url
...
return {
title: '自定义标题',
imageUrl: 'http://demo.png',
query: 'name=xxx&age=xxx', 当前页面的query
}
}
示例: wx.downloadFile({ url: URL, 下载url success (res) { 下载完成后收藏 wx.addVideoToFavorites({ videoPath: res.tempFilePath, success() {}, fail: console.error, }) }, fail: console.error, })
(13)隐藏当前页面的转发按钮 wx.hideShareMenu({ menus: ['shareAppMessage', 'shareTimeline'], "发送给朋友"|"分享到朋友圈" 隐藏“发送给朋友”按钮时必须同时隐藏“分享到朋友圈”按钮,隐藏“分享到朋友圈”按钮时则允许不隐藏“发送给朋友”按钮 sucess,... })