微信小程序开发 - 视图与逻辑

文章目录

    • 一、页面导航
      • 1、声明式导航
      • 2、编程式导航
      • 3、导航传参
    • 二、页面事件
      • 1、下拉刷新
      • 2、上拉触底
    • 三、生命周期
    • 四、WXS 脚本
      • 1、wxs使用
      • 2、wxs 与 js 区别
      • 3、内嵌wxs
      • 4、外联的 wxs
    • 总结

一、页面导航

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

1、声明式导航

页面上声明一个 导航组件,通过点击这个组件实现页面跳转;

可参考:导航组件

在使用 组件跳转到指定的 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 中的 标签中,wxml 中的每一个 标签都必须提供一个 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 文件中,通过 标签的 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)

你可能感兴趣的