评论

小程序配置分享的一种实践

小程序配置分享(转发)的一种实践-onShareAppMessage

在微信浏览器中,H5借助微信的JS-SDK即可配置分享功能。

小程序分享配置介绍

在小程序中,同样有分享功能,官方文档中包含了分享到朋友圈及 “转发”给好友及群聊两种

这里主要探讨小程序的分享。

首先看下普通分享,即“转发”,通过阅读文档发现小程序没有提供配置全局分享信息的方法,且默认是没有开启页面分享的

开启方式:

触发方式:

  • 点击右上角 --> 选择转发给朋友 (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],
  //...
})

参考:

  1. 微信小程序原理分析 - 匠心博客
  2. 从源码看微信小程序启动过程 - 有赞coder 公众号
  3. taro - issues-7470
  4. 微信小程序全局分享转发控制实现——从此无需页面单独配置 - 简书
  5. 小程序的全局分享方法onShareAppMessage - segmentfault
  6. 谈一谈隐藏路由回调API wx.onAppRoute - 微信开放社区
  7. 从源码看微信小程序启动过程 - 有赞团队
  8. 关于小程序全局分享 - 微信开放社区

如果错误,敬请指出!


最后一次编辑于  2023-01-30  
点赞 4
收藏
评论

2 个评论

  • showms
    showms
    2023-01-30

    给你点个赞

    2023-01-30
    赞同
    回复
  • 发飙的蜗牛
    发飙的蜗牛
    2023-01-30

    没必要这么复杂的监听全局的生命周期,增加分享朋友圈和好友就行

    2023-01-30
    赞同
    回复 1
    • simple
      simple
      2023-01-30
      不同的场景吧,那个是默认全局开启且都相同的配置,用的很少
      2023-01-30
      回复
登录 后发表内容