在微信浏览器中,H5借助微信的JS-SDK即可配置分享功能。
小程序分享配置介绍
在小程序中,同样有分享功能,官方文档中包含了分享到朋友圈及 “转发”给好友及群聊两种
这里主要探讨小程序的分享。
首先看下普通分享,即“转发”,通过阅读文档发现小程序没有提供配置全局分享信息的方法,且默认是没有开启页面分享的
开启方式:
- page添加onShareAppMessage参数(函数)
触发方式:
- 点击右上角 --> 选择转发给朋友 (menu)
- 点击含有open-type="share"属性的button,会触发页面的onShareAppMessage 事件(事件触发时执行) (button)
onShareAppMessage() {
const app_version_info = wx.getStorageSync('app_version_info');
return {
title: app_version_info.title,
imageUrl: "https://xxx/wxapp/share-img.png"
};
},
onShareAppMessage函数在点击分享菜单或点击button时触发。
当onShareAppMessage为空函数时,即没有返回配置对象时,微信小程序会自动设置默认分享配置,小程序名作为转发标题,高度为80% 屏幕宽度的图像作为转发图片。
小程序不同场景需求配置分享的策略
1. 官方配置思路
官方的配置思路是,哪个页面需要,哪个页面添加,不添加则不开启分享
适用场景:当前项目仅部分页面需要配置分享,如活动页面,并可携带动态参数。如果在打开分享后,需要获取更多场景信息,如群标识,见此官方文档。
onShareAppMessage() {
return {
title: app_version_info.title,
imageUrl: "https://xxx/wxapp/share-img.png"
path:'xxxx?xx=aa'
};
},
2. 全局默认分享、全局自定义分享、全局开启分享且部分页面自定义分享[8]
//在App.js 开头处写入如下立即执行函数表达式
(function(){
var PageTmp = Page;
Page =function (pageConfig) {
// 设置全局默认分享
pageConfig = Object.assign({
onShareAppMessage:function () {
return {
title:'默认文案',
path:'默认分享路径+id',
imageUrl:'默认分享图片',
};
}
},pageConfig);
PageTmp(pageConfig);
};
})();
//解释下上述代码做了什么
//在小程序初始化启动时,在上下文中立即执行上述代码,Page函数被赋值给PageTmp变量
//然后Page函数被重写,该函数接受原有初始化Page的Object参数,并添加了onShareAppMessage参数(函数)
//然后再调用PageTmp(真正的Page函数),并传修改后的配置对象参数
//IIEF在初始化执行完后立即被销毁,所以功能上完成的重写Page的作用,类似于执行前的拦截
//当在某个页面写了onShareAppMessage时,由于assign在后面,所以页面配置会替换默认配置
开启全局默认分享即不自定义分享信息、部分页面自定义分享需要在页面自行添加onShareAppMessage函数。
3. 仅开启部分页面分享且分享信息一致,一次配置策略
// 使用behaviors 统一配置,在需要的页面引入
// ./behaviors/share-config.js
// eslint-disable-next-line no-undef
module.exports = Behavior({
data: {},
methods: {
onShareAppMessage() {
return {
title: '测试分享标题',
imageUrl: 'https://xxx/wxapp/share-img.png',
};
},
},
});
//./pages/home/home.js
var shareConfigBehavior = require('../../behaviors/share-config.js')
Page({
behaviors: [shareConfigBehavior],
//...
})
参考:
- 微信小程序原理分析 - 匠心博客
- 从源码看微信小程序启动过程 - 有赞coder 公众号
- taro - issues-7470
- 微信小程序全局分享转发控制实现——从此无需页面单独配置 - 简书
- 小程序的全局分享方法onShareAppMessage - segmentfault
- 谈一谈隐藏路由回调API wx.onAppRoute - 微信开放社区
- 从源码看微信小程序启动过程 - 有赞团队
- 关于小程序全局分享 - 微信开放社区
如果错误,敬请指出!
给你点个赞
没必要这么复杂的监听全局的生命周期,增加分享朋友圈和好友就行