全局自定义分享——使用微信小程序隐式页面配置函数实现
本例使用了隐式函数 Page
以及返回对象 pageConfig
来对当前访问页面进行自定义分享配置,具体代码如下:
// app.js 中App({})外写
/**
* 全局分享配置,页面无需开启分享
* 使用隐式页面函数进行页面分享配置
* 使用隐式路由(wx.onAppRoute)获取当前页面路由,并根据路由来进行全局分享、自定义分享
*/
! function () {
let shareUrl= 'http://XXXX/image/xx.jpg'
//获取页面配置并进行页面分享配置
var PageTmp = Page
Page = function (pageConfig) {
//1. 获取当前页面路由
let routerUrl = ""
wx.onAppRoute(function (res) {
let pages = getCurrentPages(),
view = pages[pages.length - 1];
routerUrl = view.route
})
//2. 全局开启分享配置
pageConfig = Object.assign({
onShareAppMessage: function () {
//根据不同路由设置不同分享内容(微信小程序分享自带参数,如非特例,不需配置分享路径)
let shareInfo={}
console.log('配置页面路由',routerUrl)
// let noGlobalSharePages=["index/index"]
// //全局分享配置,如部分页面需要页面默认分享或自定义分享可以单独判断处理
// console.log('includes',routerUrl.includes(noGlobalSharePages))
// 判断地址中是否包含指定的指定的子字符串,如果包含则返回true,则走页面自定义,取反走这里的逻辑
// if (!routerUrl.includes(noGlobalSharePages)){
// shareInfo = {
// title: "自定义全局分享",
// imageUrl: wx.getStorageSync("shareUrl"),
// path: '/'+ routerUrl,
// }
// }
//目前发现这里的变量只能用App外定义的全局的,或者缓存~~~~
shareInfo = {
title: "自定义全局分享",
imageUrl: shareUrl,
path: '/'+ routerUrl,
}
console.log('自定义全局分享',shareInfo)
return shareInfo
}
}, pageConfig);
console.log('配置页面模板',pageConfig)
// 配置页面模板
PageTmp(pageConfig);
}
}();
功能表现:
- 只需要入口js中配置如上代码,即可实现全局自定义分享;
- 如果页面配置有分享事件的函数,那么全局分享将失效,直接走页面的分享(即使页面分享未配置内容,只要打开onShareAppMessage就会走页面分享);
- 如果使用全局分享每个页面无需去写onShareAppMessage这个方法,如果页面再次定义了onShareAppMessage,则按照页面定义的显示分享内容。
- 经多次验证,上述方法实现的全局分享自动携带当前页面的完整参数,无需另外获取。
使用隐式路由间接实现全局分享配置:
这种方法间接实现全局分享只是修改分享配置,前提是页面必须配置分享事件函数,否则无效。
App({
onLaunch: function() {
this.overShare()
},
/**
* 间接实现全局设置分享内容(需要页面配置分享事件函数)
*/
overShare: function() {
let self = this
// 调用隐藏路由回调
wx.onAppRoute(function(res) {
//获取加载的页面
let pages = getCurrentPages(),
//获取当前页面的对象
view = pages[pages.length - 1],
data;
if (view) {
data = view.data;
if (true || !data.isOverShare) {
data.isOverShare = true;
view.onShareAppMessage = function() {
//重写分享配置
return {
title: '分享标题',
imageUrl: wx.getStorageSync("shareUrl")
};
}
}
}
})
},
})
总结:
通过上边的两种方式,我们已经实现了全局自定义分享。如果需要对大部分页面进行全局分享配置(指定标题、图片、页面路径),那么在app.js中的全局分享代码中进行配置就好了。对于部分需要单独配置的,可以直接在页面进行特定配置就好了。
所以分析两种方法的使用情况如下:
第一种方法,无需在每个页面写分享函数,如果写了,则页面自己定义的起作用,全局的方法失效,可以应用定义单独的分享。
第二种方法,必须在每个页面写上分享函数,它会覆盖所有页面的分享,只有全局的配置可以用。无法单独写分享配置
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。