小程序中如何实现自定义分享?
小程序分享配置介绍
在小程序中的分享功能,官方文档中包含了分享到朋友圈及转发给好友及群聊两种 这里主要探讨小程序的分享。 首先看下普通分享,即“转发”,通过阅读文档发现小程序没有提供配置全局分享信息的方法,且默认是没有开启页面分享的 开启方式:
- 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://select-oil-oss.vchangyi.com/wxapp/share-img.png"
};
},
onShareAppMessage函数在点击分享菜单或点击button时触发,点击分享菜单如下所示 当onShareAppMessage为空函数时,即没有返回配置对象时,微信小程序会自动设置默认分享配置,小程序名作为转发标题,高度为80% 屏幕宽度的图像作为转发图片。
小程序隐藏API onAppRoute(eventListener)
在小程序切换页面或打开页面时会触发onAppRoute 事件,小程序框架通过wx.onAppRoute 可以注册页面切换时的处理程序,一般开发放在app.js的onLunch生命周期中全局注册一次即可,可用于监听页面切换。
onLaunch() {
wx.onAppRoute((route) => {
console.log(route);
});
}
通过对查看route,个人总结如下
小程序不同场景需求配置分享的策略
1. 官方配置思路
官方的配置思路是,哪个页面需要,哪个页面添加,不添加则不开启分享 适用场景:当前项目仅部分页面需要配置分享,如活动页面,并可携带动态参数。如果在打开分享后,需要获取更多场景信息,如群标识,见此官方文档。
onShareAppMessage() {
return {
title: app_version_info.title,
imageUrl: "https://select-oil-oss.vchangyi.com/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://select-oil-oss.vchangyi.com/wxapp/share-img.png',
};
},
},
});
//./pages/home/home.js
var shareConfigBehavior = require('../../behaviors/share-config.js')
Page({
behaviors: [shareConfigBehavior],
//...
})
参考: