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

Super_Tyr

已于 2022-06-02 21:39:01 修改

阅读量827

点赞数 1

分类专栏：前端文章标签：小程序

于 2022-06-02 21:34:28 首次发布

本文链接：https://blog.csdn.net/Super_Tyr/article/details/125107075

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在微信浏览器中，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://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，个人总结如下

属性	类型	说明
openType	String	跳转方式(appLaunch/reLaunch/switchTab/navigateTo/navigateBack/redirectTo)
page:{window}	Object	window表示页面配置信息即json的对象化数据
path	String	页面path
query	Object	页面（链接）查询参数对象
webviewId	Number	webviewId（运行环境ID）
scene(初次启动)	Number	场景值，见链接
notFound(初次启动)	Boolean	true/false、页面找不到则为true

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

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