⼩程序如何重写Page⽅法？以及重写Page⽅法给开发者带
来的好处
17，18年的时候，我当时主要开发⼩程序，那时候领导想看⼀下⼩程序的访问量，还有⼀些埋点的需求，于是我们的⼩程序就接⼊了阿拉丁统计。
阿拉丁的接⼊⽅式除了配置以外，主要就⼀⾏引⼊代码。官⽅要求将以下代码写在app.js第⼀⾏代码。
const ald = require('./utils/ald-stat.js')
将代码放到app.js第⼀⾏代后，神奇的事情发⽣了，简简单单的⼀⾏代码，就可以统计到页⾯的访问量，分享量。⽽且每次触发分享都能在Network⾥⾯看到有接⼝请求。我出于好奇想知道它是怎么做到的，所以就扒了⼀下它的源代码，发现核⼼代码是通过重写Page⽅法实现的。
切⼊这篇⽂章的正题，如何重写Page⽅法？⾸先我们先看⼀下新建⼀个Page，编辑器⽣成的代码
Page({
/**
* 页⾯的初始数据
*/
data: {
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
}
/**
*  其他⽣命周期省略...
*/
})
通过以上代码我们可以发现，Page实际上是⼀个全局的⽅法，参数是⼀个对象，该对象有⼀些data和其他的⽣命周期。我们如果要重写Page⽅法，⼀定要在⼩程序初始化最早的时期重新赋值Page⽅法为我们⾃⼰⽅法，且要将原来的Page⽅法保存以备未来调⽤。
(function(){
// ⼩程序原来的Page⽅法
let originalPage = Page;
// 我们⾃定义的Page⽅法
Page = (config) => {
// todo 在这⾥我们可以给配置对象进⾏加⼯
// 将配置对象继续想下传递给⼩程序原来的Page⽅法
originalPage (config);
}
})();
将以上代码放到app.js顶部，即可实现了对Page对象的重写。
然⽽对Page对象重写有什么好处呢？我简单的列举两条
1）可以实现全局页⾯的⽣命周期的监控和处理(埋点、分享统计、全局分享设置)
2）可以实现为所有的配置对象，增加函数和属性，来实现更好的封装。结果类似调⽤Vue的Vue.prototype。
3）可以统⼀处理扫⼩程序⼆维码，获取⼩程序⼆维码参数的逻辑
再举两个实际的业务场景例⼦
1）实现⼀个ajax⽅法，挂载到所有的配置对象上，所有的页⾯调⽤this.ajax即可以请求接⼝
2)  拦截所有的⼩程序分享，如果页⾯有设置分享信息，就⽤页⾯的分享信息，如果没有分享信息的话，就⽤全局统⼀的分享信息；且所有的链接后⾯追加分享⼈ID
以下是实现代码，注意：需要将代码放到app.js顶部
(function(){
// ⼩程序原来的Page⽅法
let originalPage = Page;
// 我们⾃定义的Page⽅法
Page = (config) => {
// 页⾯⾥可以通过this.ajax调⽤请求接⼝的⽅法
config.ajax = function(){
// 写wx.request的相关代码
}
// 默认分享信息
let defaultShareInfo = {
path: appendInviteId('/pages/index/index'),
title: '全局设置的分享标题'
}
// 追加邀请⼈Id 参数: path(页⾯路径)
function appendInviteId(path){
// 分享⼈Id写成静态的实际可能要读取缓存
let inviteId = '9998877';
// 路径是否包含inviteId 包含就返回路径
if(path.includes('inviteId')){
return path;
写文章的小程序// 路径不包含inviteId 则追加
} else {
return path.includes('?') ? `${path}&inviteId=${inviteId}` : `${path}?inviteId=${inviteId}`;
}
}
// 重写onShareAppMessage⽅法
let originalShareMethod = ShareAppMessage;
// 配置对象有onShareAppMessage⽅法
if( originalShareMethod ){
// 配置对象实际返回的分享信息
let returnVal =  originalShareMethod.call(this, e)
// 如果有返回信息
if(returnVal) {
// 页⾯的分享信息没有邀请⼈id 则追加
returnVal.path  = appendInviteId(returnVal.path)
return returnVal
// 如果页⾯对象没有返回信息
} else {
return defaultShareInfo
}
// 配置对象没有onShareAppMessage⽅法直接返回默认的分享信息
} else {
return defaultShareInfo
}
}
// 将配置对象继续想下传递给⼩程序原来的Page⽅法
originalPage (config)
}
})();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。