【小程序】window、tabBar节点配置，数据请求，页面导航，页面事件，生命周期，WXS脚本

一、小程序-配置

1.1 全局配置

• 小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:
  1. pages
     • 记录当前小程序所有页面的存放路径
  2. window
     • 全局设置小程序窗口的外观
  3. tabBar
     • 设置小程序底部的tabBar效果
  4. style
     • 是否启用新版的组件样式

1.1.1 window节点

1. 小程序窗口的组成部分
   
2. window节点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/ white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading的样式，仅支持 dark/ light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离。单位为px

1.1.2 tabBar节点

• tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为:
  • 底部tabBar
  • 顶部tabBar
• 注意：
  • tabBar中只能配置最少2个、最多5个tab页签
  • 当渲染顶部tabBar 时，不显示icon，只显示文本

---

属性	类型	默认值	说明
position	String	bottom	tabBar的位置，仅支持 bottom/ top
borderStyle	String	black	tabBar 上边框 的颜色，仅支持 black/ white
color	HexColor		tab上文字的默认（未选中）颜色
selectedColor	HexColor		tab 上的文字选中时的颜色
backgroundColor	HexColor		tabBar的背景色
list (必填)	Array		tab 页签的列表， 最少两个，最多五个tab

每个tab项的配置选项：

属性	必填	说明
pagePath	是	页面路径，页面必须在pages中预先定义
text	是	tab上显示的文字
iconPath	否	未选中时的图标路径;当postion为top 时，不显示icon
selectedIconPath	否	选中时的图标路径;当postion为top 时，不显示icon

1.2 页面配置

• 小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
• 页面配置和全局配置的关系：
  • 小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
  • 如果某些小程序页面想要拥有特殊的窗口表现，此时， “页面级别的.json配置文件” 就可以实现这种需求。
  • 注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

---

• 常用配置项：

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/ white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading的样式，仅支持 dark/ light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离。单位为px

1.3 数据请求

1. 小程序中网络数据请求的限制
   • 出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：
     • 只能请求 HTTPS 类型的接口
     • 必须将接口的域名添加到信任列表中
2. 配置 request 合法域名
   • 配置步骤：登录微信小程序管理后台→开发→开发设置→服务器域名→修改request 合法域名
   • 注意事项：
     1. 域名只支持 https 协议
     2. 域名不能使用IP地址或 localhost
     3. 域名必须经过ICP备案
     4. 服务器域名一个月内最多可申请5次修改

1.3.1 发起 GET / POST 请求

• 调用微信小程序提供的 wx.request()方法，可以发起GET / POST数据请求，示例代码如下:

getinfo(){
  wx.request({
    url: 'https://www.escook.cn/api/get',
    //url: 'https://www.escook.cn/api/post',
    method:'GET',
    //method:'POST',
    data:{
      name:'laoliu',
      age:18
    },
    success:(res)=>{
      console.log(res.data);
    }
  })
}

1.3.2 在页面刚加载时请求数据

• 在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下:

onload:function(options){
	this.getSwiperList()
	this.getGridList()
},
//获取轮播图的数据
getSwiperList(){...
},
//获取九宫格的数据
getGridList(){...
}

1.3.3 跳过request合法域名校验

• 如果后端程序员仅仅提供了http协议的接口、暂时没有提供 https协议的接口。
• 此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS版本及HTTPS证书」选项，跳过request合法域名的校验。
  
• 注意：跳过request合法域名校验的选项，仅限在开发与调试阶段使用!

1.3.4 关于跨域和Ajax的说明

• 跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
• Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”

二、小程序-视图与逻辑

2.1 页面导航

• 页面导航指的是页面之间的相互跳转。
• 小程序中实现页面导航的两种方式：
  1. 声明式导航
     • 在页面上声明一个<navigator>导航组件
     • 通过点击<navigator>组件实现页面跳转
  2. 编程式导航
     • 调用小程序的导航API，实现页面的跳转

2.1.1 声明式导航

1. 导航到tabBar页面

• tabBar页面指的是被配置为tabBar的页面。
• 在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中:
  • url表示要跳转的页面的地址，必须以 / 开头
  • open-type表示跳转的方式，必须为switchTab
• 示例代码如下：

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

---

2. 导航到非tabBar页面

• 非tabBar页面指的是没有被配置为tabBar的页面。
• 在使用<navigator>组件跳转到普通的非tabBar页面时，则需要指定url属性和 open-type属性，其中:
  • url表示要跳转的页面的地址，必须以 / 开头
  • open-type表示跳转的方式，必须为navigate
• 示例代码如下：

<navigator url="/pages/info/info" open-type="switchTab">导航到info页面</navigator>

• 注意：为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以省略。

---

3. 后退导航

• 如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性，其中:
  • open-type的值必须是navigateBack，表示要进行后退导航
  • delta 的值必须是数字，表示要后退的层级
• 示例代码如下：

<navigator open-type="navigateBack" delta="1">后退一页</navigator>

• 注意：为了简便，如果只是后退到上一页面，则可以省略delta属性，因为其默认值就是1。

2.1.2 编程式导航

1. 导航到tabBar页面

• 调用wx.switchTab(0bject object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下:

属性	类型	是否必选	说明
url	string	是	需要跳转的tabBar页面的路径，路径后不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

• 示例代码如下：

<button bindtap="gotoMessage">导航到消息页面</button>

  gotoMessage(){
    wx.switchTab({
      url: '/pages/message/message',
    })
  }

---

2. 导航到非tabBar页面

• 调用wx.navigateTo(Object object)方法，可以跳转到非tabBar的页面。其中 Object参数对象的属性列表如下:

属性	类型	是否必选	说明
url	string	是	需要跳转的非tabBar页面的路径，路径后可以带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

• 示例代码如下：

<button bindtap="gotoInfo">导航到info页面</button>

  gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  }

---

3. 后退导航

• 调用wx.navigateBack(Object object)方法，可以返回上一页面或多级页面。其中Object 参数对象可选的属性列表如下:

属性	类型	是否必选	说明
delta	number	是	返回的页面数，如果delta大于现有页面数，则返回到首页（默认值为1）
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

• 示例代码如下：

<button bindtap="goBack">后退</button>

  goBack(){
    wx.navigateBack({
      delta: 1,
    })
  }

2.1.3 导航传参

1. 声明式导航传参
   • navigator组件的url属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数:
     • 参数与路径之间使用?分隔
     • 参数键与参数值用=相连
     • 不同参数用&分隔

• 示例代码如下：

<navigator url="/pages/info/info?name=zs&age=18" open-type="switchTab">跳转到info页面</navigator>

---

2. 编程式导航传参
   • 调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数，代码示例如下：

<button bindtap="gotoInfo2">跳转到info页面</button>

  gotoInfo2(){
    wx.navigateTo({
      url: '/pages/info/info?name=ls&age=20',
    })
  }

---

3. 在onload中接收导航参数
   • 通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到，示例代码如下;

data:{
	// 导航传递过来的参数对象
	query:()
},

onload:function(options){
	// options就是导航传过来的参数
	console.log(options)
	this.setData({
		query:options
	})
}

2.2 页面事件

2.2.1 下拉刷新事件

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

1. 监听页面的下拉刷新事件
   • 在页面的.js文件中，通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    console.log('触发了下拉刷新事件');
  },

2. 停止下拉刷新的效果
   • 当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏loading 效果。此时，调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新

  onPullDownRefresh() {
    console.log('触发了下拉刷新事件');
 	wx.stopPullDownRefresh()
  },

2.2.2 上拉触底事件

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

监听页面的上拉触底事件

在页面的.js文件中，通过 onReachBottom()函数即可监听当前页面的上拉触底事件。示例代码如下:

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log('触发了上拉触底事件');
  },

2.3 生命周期

生命周期(Life Cycle)是指一个对象从创建->运行->销毁的整个阶段，强调的是一个时间段。

在小程序中，生命周期分为两类，分别是:

① 应用生命周期

• 特指小程序从启动->运行->销毁的过程

② 页面生命周期

• 特指小程序中，每个页面的加载->渲染->销毁的过程

---

• 生命周期函数
  • 生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。
  • 生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。
  • 注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

2.3.1 应用的生命周期函数

• 小程序的应用生命周期函数需要在app.js 中进行声明，示例代码如下:

// app.js 文件
APP({
	// 小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作。
	onLaunch:function(options){},
	// 小程序启动，或从后台进入前台显示时触发。
	onShow:function(options){},
	// 小程序从前台进入后台时触发。
	onHide:function(options){}
})

2.3.2 页面的生命周期函数

• 小程序的页面生命周期函数需要在页面的 .js 文件中进行声明，示例代码如下:

// 页面的 .js 文件中
Page({
	// 监听页面加载，一个页面只调用一次
	onLoad:function(options){}
	// 监听页面显示
	onShow:function(options){}
	// 监听页面初次渲染完成，一个页面只调用一次
	onReady:funciton(options){}
	// 监听页面隐藏
	onHide:function(options){}
	// 监听页面卸载，一个页面只调用一次
	onUnload:funciton(options){}
})

2.4 WXS脚本

WXS ( WeiXin Script)是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构。

wxml 中无法调用在页面的.js 中定义的函数，但是，wxml中可以调用 wxs 中定义的函数。因此，小程序中wxs的典型应用场景就是“过滤器"”

2.4.1 内嵌wxs脚本

• wxs代码可以编写在wxml文件中的<wxs>标签内，就像Javascript代码可以编写在 html文件中的<script>标签内一样。
• wxml文件中的每个<wxs></wxs>标签，必须提供module属性，用来指定当前wxs的模块名称，方倔wxml中访问模块中的成员:

<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
	// 将文本转换为大写形式
	module.exprots.toUpper = function(str){
		return str.toUpperCase()
	}
</wxs>

2.4.2 外联的wxs脚本

1. 定义外联的wxs脚本
   • wxs代码还可以编写在以 .wxs 为后缀名的文件内，就像javascript代码可以编写在以.js为后缀名的文件中一样。示例代码如下:

// tools.wxs 文件
function toLower(str){
  return str.toLowerCase()
}
module.exports = {
  toLower:toLower
}

2. 使用外联的wxs脚本
   • 在wxml中引入外联的wxs脚本时，必须为<wxs>标签添加module和src属性，其中:
     • module用来指定模块的名称
     • src用来指定要引入的脚本的路径，且必须是相对路径

• 示例代码如下：

<text>电话：{{tools.splitPhone(item.phone)}}</text>

<wxs src="../../utils/tools.wxs" module="tools"></wxs>

// tools.wxs 文件
function splitPhone(str){
  if(str.length !== 11)  return str

  var arr = str.split('')
  arr.splice(3,0,'-')
  arr.splice(8,0,'-')
  return arr.join('')
}

module.exports={
  splitPhone:splitPhone
}