微信小程序——第四天

微信小程序 - Unit04

1.小程序的生命周期

小程序的生命周期由小程序的生命周期和页面的生命周期来构成。

1.1 小程序的生命周期

小程序的生命周期存储在app.js中。

App函数用于注册小程序，接收object类型的参数，在其中可以指定小程序的生命周期回调、全局变量等。

App({...})

· onLaunch()函数

onLaunch()函数在小程序初始化完成时自动触发，全局只触发一次，其语法结构是：

App({
	onLaunch(){
		//...
	}
})

可以在onLaunch()函数内完成用户是否登录的检测以及获取用户信息等操作。

·onShow()

onShow()方法在小程序启动或小程序从后台切入到前台时触发，其语法结构是：

App({
  	onShow(){
		//...
	}  
})

·onHide()

onHide()方法在小程序从前台切入到后台时触发，其语法结构是：

App({
 	onHide(){
		//...
	}   
})

1.2 页面的生命周期

页面的生命周期存储在page.js中。

Page()函数用于注册页面，其中包含在当前页面动态的数据 – data、生命周期回调、页面的事件等。

· onLoad(options)

onLoad(options)函数在页面加载时触发，一个页面只触发一次，其语法结构是：

Page({
   
	onLoad(options){
		//...
	}
})

options参数指由链接的URL地址栏参数所形成的对象！

· onShow()

onShow()函数在页面显示/切入前台时触发，其语法结构是：

Page({
	onShow(){
		//...
	}
})

· onReady()

onReady()函数在页面初次渲染完成时触发，一个页面只会触发一次，代表页面已经准备妥当，可以与视图层进行交互，其语法结构是：

Page({
	onReady(){
		//...
	}
})

小程序的生命周期回调中，先触发onShow() 即先显示静态的WXML页面，再触发onReady()，此时可以与视图层进行交互，这样做的目的是为了防止用户长时间面对空白页面。

· onHide()

onHide()函数在页面隐藏或小程序切入到后台时触发，其语法结构是：

App({
	onHide(){
		//...
	}
})

小程序在切入后台时，先触发页面onHide()，再次小程序的onHide()

小程序在切入前台时，先触发小程序的onShow()，再触发页面的onShow()

· onUnload()

onUnload()函数在页面卸载时触发，其语法结构是：

App({
	onUnload(){
		//...
	}
})

2.页面跳转

在小程序中，实现页面跳转的方式有两种：

A.通过<navigator>组件实现

B.通过相关的API实现

2.1 <navigator>

<navigator>组件为链接组件，其语法结构是：

<navigator url="当前小程序内的页面地址" open-type="跳转方式">
...
</navigator>

跳转方式有：

· navigate

​ 称为保留跳转，只能跳转到非tabBar页面

​ 触发当前页面的onHide()

​ 可以带有URL地址栏参数

· navigateBack

​ 称为关闭当前页面跳转

​ 触发当前页面的onUnload()

· switchTab

​ 称为关闭所有非tabBar页面

​ 触发所有页面的onUnload()

​ 不能带有URL参数

· redirect

​ 称为关闭当前页面，跳转到非tabBar页面

​ 触发当前页面的onUnload()

​ 可以带有 URL参数

· reLaunch

​ 称为关闭所有页面

​ 触发所有页面的onUnload()

​ 可以带有URL参数

2.2 API

· wx.navigateTo()

wx.navigateTo()方法的作用等同于<navigator open-type="navigate">，其语法结构是：

wx.navigateTo({
	url:'当前小程序内的非tabBar页面路径,可带有参数',
    success:res=>{
        //...
    }
    fail:error=>{
    	//...	
	},
    complete:res=>{
    	//...          
    }
});

· wx.navigateBack()

wx.navigateBack()方法等同于<navigator open-type="navigateBack">，其语法结构是：

wx.navigateBack({
	delta:层级数
})

· wx.switchTab()

wx.switchTab({
	url:'当前小程序内的tabBar页面路径',
    success:res=>{
        //...
    }
    fail:error=>{
    	//...	
	},
    complete:res=>{
    	//...          
    }
});

· wx.redirectTo()

wx.redirectTo({
	url:'当前小程序内的非tabBar页面路径,可带有参数',
    success:res=>{
        //...
    }
    fail:error=>{
    	//...	
	},
    complete:res=>{
    	//...          
    }
});

· wx.reLaunch()

wx.reLaunch({
	url:'当前小程序内的页面路径,可带有参数',
    success:res=>{
        //...
    }
    fail:error=>{
    	//...	
	},
    complete:res=>{
    	//...          
    }
});

navigate和redirect只能跳转到非tabBar页面

switchTab只能跳转到tabBar页面

reLaunch可以跳转到任意页面

navigate、redirect、reLaunch可以带有URL参数

switchTab不能带有URL参数

redirect关闭当前页面；switchTab关闭所有非tabBar页面；reLaunch关闭所有页面

3.获取服务器数据

3.1 服务器域名的限制

A.域名只支持 HTTPS协议

B.域名必须经过ICP备案

C.域名不能使用IP地址

D.不支持配置父域名使用子域名

E.对于每个接口最多可以配置20个域名

3.2 服务器域名的配置

小程序后台-开发-开发设置-服务器域名

3.3 wx.request()

wx.request()方法用于发起 HTTPS 网络请求，其语法结构是：

wx.request({
    url:"服务器API接口地址",
    data:"请求参数,object类型",
    method:"请求方式"，
    success:res=>{
    	//...	
	}
})

链图片转存中…(img-0uHdnbDJ-1621319234764)]

[外链图片转存中…(img-U1s2jJlo-1621319234766)]

[外链图片转存中…(img-4gkCn5gA-1621319234767)]

3.3 wx.request()

wx.request()方法用于发起 HTTPS 网络请求，其语法结构是：

wx.request({
    url:"服务器API接口地址",
    data:"请求参数,object类型",
    method:"请求方式"，
    success:res=>{
    	//...	
	}
})