快速上手微信小程序：视图与逻辑

会思想的苇草i

已于 2023-12-02 12:03:23 修改

阅读量1.8k

点赞数 6

分类专栏：前端文章标签：微信小程序小程序前端经验分享微信

于 2023-03-11 09:45:00 首次发布

本文链接：https://blog.csdn.net/ASHIYI66/article/details/129354600

版权

前端专栏收录该内容

52 篇文章 10 订阅

订阅专栏

快速上手微信小程序：视图与逻辑

1、小程序--视图与逻辑

1、小程序–视图与逻辑

1.1 页面导航

页面导航指页面之间的相互跳转

小程序实现页面导航的两种方式：

声明式导航

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

//页面地址必须以/开头
//必须指定跳转方式，为switchTab
<navigator url="/pages/message/message" open-type="switchTab">导航消息页面</navigator>

导航到非tabBar页面

//页面地址必须以/开头
//指定跳转方式，为navigate，可省略
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

后退导航

//open-type的值必须是navigateBack，表示要进行后退导航
//delta的值必须是数字，表示要后退的层级,可省略，默认值为1
<navigator open-type="navigateBack" delta="1">后退</navigator>

编程式导航

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

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

导航到tabBar页面

//wxml
<button bindtap="gotoMessage">跳转到消息页面</button>

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

导航到非tabBar页面

//wxml
<button bindtap="gotoInfo">跳转到信息页面</button>

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

后退导航

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

//wxml
<button bindtap="gotoBack">后退</button>

//js
gotoBack(){
    wx.navigateBack({
  })
}

导航传参

声明式导航传参
- 路径后面携带参数：
  - 参数与路径之间使用**？**
  - 分隔参数键与参数值用**=**相连
  - 不同参数用**&**分隔
```
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
```

编程式导航传参

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

//js
gotoInfo2(){
    wx.navigateTo({
	ur1: " /pages/infolinfo?name=ls&gender=男"
  })
}

在onLoad中接收导航参数

onLoad:function(options){
    //options即导航传递过来的参数对象
    console.log(options)
}

1.2 页面事件

下拉刷新事件

通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为
启用下拉刷新的方式：
- 全局开启下拉刷新(app.json的windows结点设置)
- 局部开启下拉刷新(页面的.json中配置)
- 实际开发中为需要的页面单独开启下拉刷新的效果
监听页面的下拉刷新事件
- 在页面的.js文件中，通过 **onPullDownRefresh()**函数即可监听当前页面的下拉刷新事件
```
onPullDownRefresh() {
    console.log('触发下拉刷新事件')
    wx.stopPullDownRefresh()
  },
```
停止下拉刷新的效果
- 调用**wx.stopPullDownRefresh()**可以停止当前页面的下拉刷新

上拉触底事件

通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为
监听页面的上拉触底事件
- 在页面的.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件(节流 – 在data 中定义isloading节流阀；在方法中修改isloading节流阀的值；在onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制)
配置上拉触底距离
- 触发上拉触底事件时，滚动条距离页面底部的距离，在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离

1.3 生命周期

在小程序中，生命周期分为两类,分别是:
- 应用生命周期(范围较大)特指小程序从启动->运行->销毁的过程
- 页面生命周期(范围较小)特指小程序中，每个页面的加载->渲染->销毁的过程
生命周期函数:是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行，允许程序员在特定时间点执行某些特定的操作
生命周期强调的是时间段，生命周期函数强调的是时间点
应用生命周期函数

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

页面生命周期函数

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

1.4 WXS脚本

概述

WXS (WeiXin Script)是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构
WXML中无法调用在页面的.js中定义的函数，但是，WXML中可以调用WXS中定义的函数
WXS与JavaScript的关系
- wxs有自己的数据类型
  - number数值类型、string字符串类型、boolean布尔类型、object对象类型、function函数类型、array数组类型、date日期类型、regexp 正则
- wxs不支持类似于ES6及以上的语法形式
  - 不支持: let. const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
  - 支持: var定义变量、普通function函数等类似于ES5的语法
- wxs遵循CommonJS规范
  - module对象、require()函数、module.exports对象