范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-微信小程序开发拓展页面对象教程

07-03 亚博APP
摘要:小法式是经由过程挪用Page函数来注册一个页面的,Page的感化相当在组织函数,Page会初始化页面临象(实例),然后将设置装备摆设参数中的属性 merge 到页面临象上。

小法式是经由过程挪用 Page 函数来注册一个页面的,这里 Page 的感化相当在组织函数, Page 会初始化页面临象(实例),然后将设置装备摆设参数中的属性 merge 到页面临象上。

//index.js

Page({

data: {

text:This is page data.

},

onLoad:function(options){

// Do some initialize when page load.

},

// Event handler.

viewTap:function(){

this.setData({

text:\'Set some data for updating view.\'

},

function(){

// this is setData callback})

}

})

假定你封装了个http模块负责发出要求,你想在页面临象中直接经由过程this.http援用这个模块,就需要扩大页面临象。要扩大一个对象,在 JavaScript 中的常见做法是扩大组织函数的prototype属性,这是Vue良多插件的实现:

importaxios from\'axios\'

Vue.prototype.axios = axios

// 在 vue 组件中

this.axios.get(api).then(callback)

很不幸,在小法式中这个法子无效。Page其实不是通俗的组织函数,底层还做了良多其他工作,没法子直接经由过程Page.prototype扩大页面临象。

我们可以改变思绪,扩大传进Page的设置装备摆设对象。既然始终要经由过程挪用Page注册页面,可以界说一个函数,这个函数会将收到的设置装备摆设对象参数进行处置,然后再传给Page。

// wxPage.js

importhttpfrom\'../utils/http\'

constwxPage =function(config){

config.http = http

returnPage(config)

}exportdefaultwxPage

注册页面的时辰改用这个wxPage:

importPagefrom\'./wxPage\'

Page({data:{

text:This is page data.

},

onLoad:function(options){

console.log(this.http)// 打印 http 模块变量

this.http.get(api).then(callback)// 直接挪用 http 的方式

},

})

/

直接点窜 Page 函数

为了加强页面临象,每一个需要的页面都得引入wxPage是一件不太省心的事;更多时辰我们是在保护一个老项目,需要扩大每一个原本的页面临象,这时候可以直接点窜Page:

constoriginalPage = Page//保留本来的

PagePage =function(config) {// 笼盖Page变量

config.http= http

return originalPage(config)}

一般来讲,点窜Page的机会是在ApponLoad的时辰。如许原本的页面不消点窜,直接就可以经由过程this.http拿到http。

经由过程扩大 Page 页面临象实现常见需求

给生命周期方式增添通用逻辑

有时我们但愿在页面注册的onLoad阶段履行一些通用的逻辑,例如埋点,打 log 等,这时候可以改写设置装备摆设对象中的onLoad方式:

constoriginalPage = Page

Page =function(config){

const{ onLoad } = config

config.onLoad =function(onLoadOptions){// 打 log、埋点……console.log(\'每一个页面城市打出这个log\')

if(typeofonLoad ===\'function\') {

onLoad.call(this, onLoadOptions)

}

}returnoriginalPage(config)}

获得上一页页面临象

小法式中的页面跳转会构成一个页面栈,栈中寄存着每一个页面临象,可以经由过程getCurrentPages方式取得这个页面栈。可以在页面onLoad的时辰获得这个页面栈,然后掏出倒数第二个对象,就是当前页上一页的页面临象:

const{ onLoad } =config

config.onLoad=function(onLoadOptions) {

constpages = getCurrentPages()

this.__previousPage= pages[pages.length-2]// 将上一页的页面临象赋为this.__previousPage

if(typeof onLoad === \'function\') {

onLoad.call(this, onLoadOptions)

亚博}

}returnoriginalPage(config)

如许在页面临象中可经由过程援用this.__previousPage获得上一页页面临象的data和所有方式,如许在一些只需要两个页面互动的情形下,当前页直接挪用上一个页面临象的方式(相当在回调)后再返回,比经由过程全局状况治理上一页的数据要便利。

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

这个不多说了,直接看代码吧:

config.navigateTo =function(url, params){// 实现一个navigateTo方式,参数包罗跳转url和要传递的参数

this.__params = params

wx.navigateTo({ url })

}

config.onLoad =function(onLoadOptions){

constpages = getCurrentPages()

this.__previousPage = pages[pages.length -2]// 将上一页的页面临象赋为this.__previousPage

if(this.__previousPage) {

onLoadOptions.params =this.__previousPage.__params// 获得上一页面的__params赋给onLoad函数的options

deletethis.__previousPage.__params

}if(typeofonLoad ===\'function\') {

onLoad.call(this, onLoadOptions)

}}// A 页面跳转 B 页面

this.navigateTo(

\'urlToB\',

{

foo:\'bar\'

})

// B 页面的

onLoadPage({

onLoad(options) {

console.log(options.params)

// {

foo: \'bar\'

}}

}

)

保举浏览:微信小法式开辟教程微信小法式

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.jiayuanLi.com

关于我们      深圳亚博app定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数