微信小程序分享给朋友比较简单,只需要在要分享的页面中设置onShareAppMessage即可。
只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
监听用户点击页面内转发按钮( 组件 open-type="share"
)或右上角菜单“转发”按钮的行为,并自定义转发内容。
使用button分享
<button open-type="share">分享按钮</button>
onShareAppMessage如果带了参数,参数中的from会指明是从哪里触发的,从按钮触发from='button',从右上角菜单中触发from='menu'
onShareAppMessage: function (res) {
//console.log('onShareAppMessage',res);
return {
title: '自定义标题',
path: '/pages/index/index?userId='+Constant.userId+'&share=true',
}
},
//onShareAppMessage {from: "button", target: {…}}
支持自定义标题,自定义路径和自定义图片
字段 | 说明 | 默认值 | 最低版本 |
---|---|---|---|
title | 转发标题 | 当前小程序名称 | |
path | 转发路径 | 当前页面 path ,必须是以 / 开头的完整路径 | |
imageUrl | 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持 PNG 及JPG。显示图片长宽比是 5:4。 | 使用默认截图 | |
promise | 如果该参数存在,则以 resolve 结果为准,如果三秒内不 resolve,分享会使用上面传入的默认参数 |
我们点击分享出去的卡片,打开小程序,可以在onLoad里获取path里的参数
onLoad(query) {
console.log('onLoad',query);
}
//onLoad {userId: "1530474058280374273", share: "true"}
本接口为 Beta 版本,暂只在 Android 平台支持,iOS平台有的机型支持有的不支持
onShareTimeline: function() {
return {
title: '乐湃鲨自助台球',
query: 'userId='+Constant.userId+'&storeId='+Constant.curStoreId+'&share=true',
}
}
事件处理函数返回一个 Object,用于自定义分享内容,不支持自定义页面路径,返回内容如下:
字段 | 说明 | 默认值 | 最低版本 |
---|---|---|---|
title | 自定义标题,即朋友圈列表页上显示的标题 | 当前小程序名称 | |
query | 自定义页面路径中携带的参数,如 path?a=1&b=2 的 “?” 后面部分 | 当前页面路径携带的参数 | |
imageUrl | 自定义图片路径,可以是本地文件或者网络图片。支持 PNG 及 JPG,显示图片长宽比是 1:1。 | 默认使用小程序 Logo |
2、通过分享到朋友圈的内容打开小程序
用户在朋友圈打开分享的小程序页面,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面,底部固定有操作栏,点击操作栏的“前往小程序”可打开小程序的当前页面。打开当前页面后,比如你分享的不是首页,你的顶部返回按钮又是一个公共的组件,都是返回上一级,你先通过分享的进入小程序,因为页面栈没有上一级,所以你是不能返回首页的,所以需要更改一下你的公共组件。
单页模式的介绍详见:
“单页模式”默认运行的是小程序页面内容, “单页模式”下,一些组件或接口存在一定限制,可通过判断等于 1154 的方法来进行页面适配。
补充:
单页模式下有很多限制,详情如下:
单页模式下的限制
小程序“单页模式”适用于纯内容展示场景,可实现的交互与接口能力有限,因此存在如下限制:
对于一些会产生交互的组件或接口,在点击后调用时,会弹 toast 提示“请前往小程序使用完整服务”。为达到良好的用户体验,请注意适配单页模式的接口能力,请勿大量使用被禁用的接口或组件。
运营须知
分享朋友圈能力是为了满足纯内容场景的分享诉求,滥用于营销、诱导等行为将会被打击。
注意事项