小程序开发实用技巧——扩展页面页面对象

扩展页面页面对象是小程序开发中非常有用的技术。你如何开发它？

小程序是通过调用Page函数来注册页面：

//index.jsPage（{data: {text:'This is page data。'}，onLoad: function（options）{//在页面加载时进行初始化。}，//事件处理程序.viewTap: function（）{ this.setData（{text:'设置一些数据用于更新视图。'}，function（）{//这是setData callback}）}}）复制代码

这里Page充当构造函数，Page初始化页面对象（实例），然后将配置参数中的属性合并到页面对象上。

假设您封装了一个负责发出请求的http模块。你想通过this.http直接在这个页面中引用模块，你需要扩展页面对象。要扩展对象，JavaScript中的常见做法是扩展构造函数的prototype属性。这是许多Vue插件的实现：

从'axios'Vot.prototype.axios=axios中导入axios //在vue组件中使用.then.get.get（api）.then（回调）复制代码

不幸的是，这种方法在小程序中无效。 Page不是普通的构造函数。底层做了很多其他事情。无法通过Page.prototype直接扩展页面对象。

我们可以改变思考方式并扩展传递给Page的配置对象。由于您始终必须调用页面注册页面，因此您可以定义一个函数来处理接收到的配置对象参数，然后将它们传递给页面。

//来自'./utils/http'const的wxPage.jsimport http wxPage=function（config）{config.http=http return Page（config）} export default wxPage copy code

注册页面时使用此wx页面：

从'./wxPage'Page导入页面（{data: {text:'这是页面数据。'}，onLoad:函数（选项）{console.log（this.http）//打印http模块变量this.http 。get（api）.then（callback）//直接调用http方法}，}）直接复制代码修改Page函数

为了增强页面对象，不必为每个必需的页面引入wxPage;我们经常维护一个旧项目，我们需要扩展每个原始页面对象，然后你可以直接修改它。页：

Const originalPage=Page //保存原始PagePage=function（config）{//覆盖Page变量config.http=http return originalPage（config）}复制代码

通常，修改页面的时间是在ApponLoad中。这样，原始页面可以直接从this.http获得而无需修改。

通过扩展页面对象来实现常见要求1.将一般逻辑添加到生命周期方法

有时我们想在页面注册的onLoad阶段执行一些通用逻辑，比如埋点，点击日志等，然后我们可以覆盖配置对象中的onLoad方法：

Const originalPage=PagePage=function（config）{const {onLoad}=config config.onLoad=function（onLoadOptions）{//点击日志，埋点. console.log（'每个页面都会输入这个日志'） if（Typeof onLoad==='function'）{onLoad.call（this，onLoadOptions）}}返回originalPage（config）}复制代码2.获取上一页对象

小程序中的页面跳转将形成页面堆栈，并且每个页面对象都存储在堆栈中。页面堆栈可以通过getCurrentPages方法获得。当页面为onLoad时，您可以获取页面堆栈，然后获取倒数第二个对象，即当前页面上一页上的页面对象：

//连接. const {onLoad}=config config.onLoad=function（onLoadOptions）{const pages=getCurrentPages（）this .__ previousPage=pages [pages.length - 2] //分配上一页的页面对象For这个.__ previousPage if（typeof onLoad==='function'）{onLoad.call（this，onLoadOptions）}}返回originalPage（config）来复制代码

通过这种方式，在页面对象中，您可以通过引用此.__ previousPage来获取前一页面对象的数据和所有方法，这样在某些情况下只需要两个页面进行交互，当前页面直接调用方法上一页对象（相当于回调）。返回后，管理上一页的数据比通过全局状态更方便。

3.跳转页面并将数据传递到下一页

这并不多说，只需直接查看代码：

//连接config.navigateTo=function（url，params）{//使用参数实现一个navigateTo方法，包括跳转网址和要传递的参数.__ params=params wx.navigateTo（{url}）} config.onLoad=函数（onLoadOptions）{const pages=getCurrentPages（）this .__ previousPage=pages [pages.length - 2] //将上一页的页面对象分配给此.__ previousPage if（this .__ previousPage）{onLoadOptions.params=this。 __previousPage .__ params //获取上一页的__params到onLoad函数的选项删除这个.__ previousPage .__ params} if（typeof onLoad==='function'）{onLoad.call（this，onLoadOptions）}} //一个页面跳转B页面this.navigateTo（'urlToB'，{foo:'bar'}）//B页面的onLoadPage（{onLoad（options）{console.log（options.params）//{foo:'bar'} }}复制代码

只需在此处编写，这些技术在使用本机解决方案时非常实用。稍后，编写如何构建小程序，以便小程序支持文件预编译，需要npm包，依此类推。

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。