[移动开发]微信小程序开发 - 视图与逻辑

一、页面导航

页面导航指的是页面直接的互相跳转，浏览器中实现页面导航的方式：a 标签、location.href ；小程序实现页面导航的方式是：声明式导航、编程式导航；

1、声明式导航

页面上声明一个 <navigator> 导航组件，通过点击这个组件实现页面跳转；

可参考：导航组件

在使用<navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性：

taeget：默认 self 当前小程序，也可以是 miniProgram 其他小程序
url：要跳转的页面地址，必须 / 开头
open-type：跳转的方式
delta：数字，表示后退层级，默认是1
app-id：当target="miniProgram"时有效，要打开的小程序 appId
path：当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页

<navigator url="/pages/message/message" open-type="switchTab">跳转到消息列表页</navigator>

1、open-type 值为 switchTab，只能打开 tabBar 页面，并关闭其他所有非 tabBar 页面；
2、open-type 值为 navigateBack，需要增加一个参数 delta ，表示导航后退 delta 指定层级；
3、open-type 值为 navigate ，保留当前页面，跳转到非 tabBar 页面，可简写（不写open-type属性）；
4、open-type 值为 redirect，关闭当前页面，跳转到应用内的某个非 tabBar 页面
5、open-type 值为 reLaunch，关闭所有页面，打开到应用内的某个非 tabBar 页面
6、open-type 值为 exit，退出小程序，target="miniProgram"时生效；

2、编程式导航

调用小程序的导航 API 实现页面的跳转；

可参考：API 路由

1、wx.switchTab(Object object)：跳转到 tabBar 页面，参数如下：

url：需要跳转的 tabBar 页面的路径 ，路径后不能带参数。
success：接口调用成功的回调函数
fail：接口调用失败的回调函数
complete：接口调用结束的回调函数（调用成功、失败都会执行）

<button bindtap="toMessage"></button>
toMessage(e){
	wx.switchTab({
		url:"/pages/message/message";
	})
}

2、wx.reLaunch(Object object)：关闭所有页面，打开到应用内的某个非 tabBar 页面，参数如下：

url：需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
success：接口调用成功的回调函数
fail：接口调用失败的回调函数
complete：接口调用结束的回调函数（调用成功、失败都会执行）

3、wx.redirectTo(Object object)：关闭当前页面，跳转到应用内的某个非 tabBar页面，参数同上；
4、wx.navigateTo(Object object)：保留当前页面，跳转到应用内的某个非 tabBar页面；使用 wx.navigateBack 可以返回到原页面；小程序中页面栈最多十层；
参数如下：

url：需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
events：页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持
success：接口调用成功的回调函数
fail：接口调用失败的回调函数
complete：接口调用结束的回调函数（调用成功、失败都会执行）

5、wx.navigateBack(Object object)：关闭当前页面，返回上一页面或多级页面；可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层，参数如下：

delta：返回的页面数，如果 delta 大于现有页面数，则返回到首页
success：接口调用成功的回调函数
fail：接口调用失败的回调函数
complete：接口调用结束的回调函数（调用成功、失败都会执行）

3、导航传参

1、url 传参
跳转时可以在 url 后面拼接参数：参数与路径之间使用 ? 分隔、参数键与参数值用 = 相连、不同参数用 & 分隔；（url 传参在声明式导航和编程式导航里面都会用到）

2、接收参数
在目标页面中的 onLoad 事件中的 options 参数中可以获取到传递的参数

 onLoad: function (options) {
 	console.log(options);
 	this.setData({query:options});
 },

一般我们需要将 onLoad 里面获取到的 options 放到 data 中，这也我们就可以在当前页面的其他方法中使用这些参数；

二、页面事件

1、下拉刷新

屏幕下拉滑动操作，从而重新加载数据；关于页面开启下拉刷新设置、下拉刷新窗口样式设置在前面的文章以及介绍过来，这里就不重复说明；
1、在 .js 文件中，我们可以通过 onPullDownRefresh() 函数来监听页面的下拉刷新事件；

 onPullDownRefresh: function () {
	console.log("当前页面下拉刷新了！")
 }

2、停止下拉刷新动作
当下拉刷新触发之后，下拉的 loading 会一直显示，不会主动消失，这时候我们需要手动关闭这个 loading 效果；我们可以调用 wx.stopPullDownRefresh() 方法来停止当前页面的下拉刷新；

 onPullDownRefresh: function () {
	console.log("当前页面下拉刷新了！")；
	wx.stopPullDownRefresh()；
 }

一般下拉刷新时我们需要操作：重置相关数据（已有列表数据、分页数据）、重新发起数据请求；

2、上拉触底

屏幕下拉滑动操作，从而重新加载数据；上拉触底距离设置之前文章介绍过；
1、在 .js 文件中，我们可以通过 onReachBottom() 函数来监听页面的上拉刷新事件；

 onReachBottom: function () {
	console.log("当前页面上拉触底了！")
 }

2、上拉触底实现

//wxml
<view wx:for="{{colorList}}" wx:key="index" class="itemList" style="background-color:rgba({{item}})">{{item}}</view>

//js
data: {
  colorList:[],
  isLoading:false
},
//触底刷新是获取数据的方法
getColorList(){
    this.setData({isLoading:true});
    wx.showLoading({title:"数据正在加载中。。。。"})
    wx.request({
      url:"https://www.escook.cn/api/color",
      method:"GET",
      success:(res)=>{
        console.log(res)
        this.setData({colorList:[...this.data.colorList, ...res.data.data]});
      },
      complete:()=>{
        wx.hideLoading();
        this.setData({isLoading:false});
      }
    })
  },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getColorList();
  },
   /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if(this.data.isLoading) return;
    this.getColorList();
  }

注意：在开发过程中，刷新时我们最好判断一下下一页是否还有数据，如果没有了就不再发起请求；判断方式是利用接口返回的数据总数进行计算：

当前页（page） * 每页展示数量（pageSize）>= 总数（totail）,满足条件说明下一页没数据了，可以调用 wx.showToast 发出提示并且不在调取接口；

三、生命周期

一个对象从创建 => 运行 => 销毁 的整个阶段，强调的是一个时间段；
1、生命周期分类

应用生命周期：启动 => 运行 => 销毁
页面生命周期：页面加载 => 渲染 => 销毁

2、应用生命周期函数
需要在 app.js 中声明；

//app.js
App({
	//小程序初始化完成时执行，全局只触发一次，可以做一些初始化的操作
	onLaunch(){},
	//小程序启动或者从后台进入到前台显示的时候触发
	onShow(){},
	//小程序从前台进入后台时触发
	onHide(){}
})

3、页面生命周期函数
需要在页面的 .js 文件中声明；

Page({
	onLoad:function(){},//监听页面加载，只调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
	onShow:function(){},//监听页面展示
	onReady:function(){},//页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
	onHide:function(){},//监听页面隐藏，如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
	onUnLoad:function(){}//页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时
})

一般在 onLoad 中做一些初始化的处理，或者获取并转存页面路径参数等；在 onReady 中修改页面内容；

四、WXS 脚本

WeXin Script ：小程序独有的脚本语言，配合 wxml 可以构建出页面的结构；

1、wxs使用

wxml 无法直接调用 js 中定义的函数，但是直接调用 wxs 中的函数，因此 wxs 的作用就是一个过滤器；

2、wxs 与 js 区别

数据类型：wxs 支持 number、string、array、boolean、object、function、date、regexp，跟 js 差不多
不支持es6：只支持类似 es5 的语法(var、function)
遵循 CommonJs：module、require、module.exports
隔离性：wxs 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的 API
可以使用 wxs 函数响应事件，绑定的 wxs 函数必须用 {{}} 括起来
在 ios 设备上，小程序内的 wxs 会比 js 代码块 2-20 倍 ；安卓设备上二者无差异

3、内嵌wxs

wxs 代码可以编写在 wxml 中的 <wxs> 标签中，wxml 中的每一个 <wxs> 标签都必须提供一个 module 属性，用来指定当前 wxs 模块的名称，方便 wxml 中访问 wxs 模块；

<wxs module="m1">
	var msg = "hello world";
	module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>

4、外联的 wxs

wxs 代码还可以编写在以 .wxs 后缀的文件中；然后在 wxml 文件中，通过 <wxs> 标签的 src（文件路径） 和 module （提供模块名称）属性来引入模块

//utils/tool.wxs
function toLower(str){
  return str.toLowerCase();
}
module.exports = {
  toLower:toLower
}

页面使用

<wxs src="../../utils/tools.wxs" module="m2"></wxs>
<view>{{m2.toLower(message)}}</view>

参考：WXS

总结

1、页面直接跳转：声明式导航、编程式导航
2、实现下拉刷新：enablePullDownRflesh、onPullDownRflesh
3、实现上拉触底：onReachBottomDistance、onReachBottom
4、了解小程序的生命周期：应用生命周期（onLaunch、onShow、onHide）、页面生命周期（onLoad、onReady、onShow、onHide、onUnLoad）