小程序中如何实现自定义分享?

angrybird2332022-08-20Frontend微信小程序

小程序分享配置介绍

在小程序中的分享功能,官方文档中包含了分享到朋友圈open in new window转发open in new window给好友及群聊两种 这里主要探讨小程序的分享。 首先看下普通分享,即“转发”,通过阅读文档发现小程序没有提供配置全局分享信息的方法,且默认是没有开启页面分享的 开启方式:

触发方式:

  • 点击右上角 --> 选择转发给朋友(menu)
  • 点击含有open-type="share"属性的button,会触发页面的onShareAppMessageopen in new window 事件(事件触发时执行) (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"
  };
},

onShareAppMessageopen in new window函数在点击分享菜单点击button时触发,点击分享菜单如下所示 图1-点击分享菜单(发送给朋友) 当onShareAppMessage为空函数时,即没有返回配置对象时,微信小程序会自动设置默认分享配置,小程序名作为转发标题,高度为80% 屏幕宽度的图像作为转发图片。

小程序隐藏API onAppRoute(eventListener)

在小程序切换页面或打开页面时会触发onAppRoute 事件,小程序框架通过wx.onAppRoute 可以注册页面切换时的处理程序,一般开发放在app.js的onLunch生命周期中全局注册一次即可,可用于监听页面切换。

onLaunch() {
  wx.onAppRoute((route) => {
    console.log(route);
  });
}

通过对查看route,个人总结如下

小程序不同场景需求配置分享的策略

1. 官方配置思路

官方的配置思路是,哪个页面需要,哪个页面添加,不添加则不开启分享 适用场景:当前项目仅部分页面需要配置分享,如活动页面,并可携带动态参数。如果在打开分享后,需要获取更多场景信息,如群标识,见此官方文档open in new window

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],
  //...
})

参考:

  1. 微信小程序原理分析 - 匠心博客open in new window
  2. 从源码看微信小程序启动过程 - 有赞coder 公众号open in new window
  3. taro - issues-7470open in new window
  4. 微信小程序全局分享转发控制实现——从此无需页面单独配置 - 简书open in new window
  5. 小程序的全局分享方法onShareAppMessage - segmentfaultopen in new window
  6. 谈一谈隐藏路由回调API wx.onAppRoute - 微信开放社区open in new window
  7. 从源码看微信小程序启动过程 - 有赞团队open in new window
  8. 关于小程序全局分享 - 微信开放社区open in new window
最后更新时间 9/18/2024, 8:13:52 AM