2021版小程序开发3——视图与逻辑
2021版小程序开发3——视图与逻辑
学习笔记 2025
- 页面间导航跳转
- 下拉刷新
- 上拉加载更多
- 小程序生命周期函数
- WXS脚本
1
页面导航 是指页面之间的相互跳转，浏览器上一般有两种：a标签和location.href；
小程序中则支持两种页面导航方式：
- 声明式导航：
- 声明一个
- 声明一个
- 编程式导航
- 调用小程序的导航API，实现页面的跳转；
声明式导航:
- 指定url（页面的地址，以
/开头）和open-type属性，如tabBar中页面间的跳转，那么open-type必须为switchTab - 如果是从tabBar页面导航到非tabBar页面，open-type则为
navigate（也可以省略该属性值的配置） - 后退导航，则需要指定 open-type 属性为
navigateBack和delta属性(必须是数字，默认值为1，表示要后退的层级)；
<navigatior url="/pages/message/message" open-type="switchTab">tabBar主页 使用声明式导航 首页导航到消息页面navigatior>
<navigatior url="/pages/info/info" open-type="navigate">tabBar主页 使用声明式导航 首页导航到其他页面navigatior>
<navigator open-type="navigateBack" delta='1'>返回一个层级navigator>
编程式导航：
- 跳转tabBar页面，调用
wx.switchTab(Object obj)方法；参数需要指定如下四个属性：- url：tabBar页面路径，路径不能带参数
- success
- fail
- complete：结束后的回调，成功失败都会执行
- 跳转到非tabBar页面，调用
wx.navigateTo(Object obj)方法；参数需要指定如下四个属性：- url：tabBar页面路径，路径可以带参数
- success
- fail
- complete：结束后的回调，成功失败都会执行
- 后退导航，调用
wx.navigateBack(Object obj)方法，参数需要指定如下四个属性：- delta：如果delta大于现有页面数，则返回首页，默认值1
- success
- fail
- complete：结束后的回调，成功失败都会执行
导航传参：
- 页面参数 url =
"/pages/info/info?name=a&page=20"
接收导航传参：
- 可以直接在onLoad时间监听回调中获取；
data:{
query: {}
},
onload: function(options){
// options 就是页面参数对象，转存到data中
this.setData({
query: options
})
}
2
页面事件
- 下拉刷新
- 上拉加载更多
下拉刷新
在配置文件中：
- 全局配置开启，或局部开启（推荐）；
enablePullDownRefresh设置为true；
下拉刷新窗口样式：
backgroundColor窗口背景颜色，16进制颜色值backgroundTextStyle：dark/light可以设置下拉loading的样式
监听下拉刷新事件：
onPullDownRefresh: function(){}- 停止（不会主动消失）下拉刷新：在监听回调处理代码结束后，调用
wx.stopPullDownRefresh() - 下拉刷新的时候，需要重置一些关键性的节点数据；同时要注意关闭下拉刷新的时机；
onPullDownRefresh: function(){
this.setData({
page: 1,
dataList: [],
total: 0
})
// 为了按需的实现 下拉关闭，可以给getDataList()传递一个回调函数
this.getDataList(()=>{
wx.stopPullDownRefresh()
})
}
// 网络请求
getDataList(callBack){
...
// 网络请求的结束回调
complete: ()=>{
wx.hideLoading()
this.setData({isloading: false}) // 上拉节流阀
callBack && callBack()
}
}
上拉加载更多
监听上拉触底事件：
- 页面需要高于屏幕才可滑动，只有滑动才会触发触底；
- 监听上拉触底事件，
onReachBottom: function(){} - 这个动作会随着页面上下滑动被反复触发，如果进行网络请求的话，可以使用全屏loading提示，阻止反复发出请求；
wx.showLoading(title="loading...")打开wx.hidLoading()关闭(一般用在接口请求的complete回调中)
- 请求数据拼接：
this.setData({datalist: [...this.data.datalist, ...res.data]})
网络请求节流：
- 一般上拉加载更多，都需要这样操作
- 定义一个 isLoading变量，默认值为false，发送请求的时候设置为true
- 在网络请求结束之后，重新设置为false
- 在触底的监听事件中，判断该节流阀的值是否为true以确定是否需要发送网络请求；
分页数据page上限的判断：
- 如果没有下一页数据，即
page * pageSize >= total，就不要再发起后续的网络请求了 - 同样可以在在触底的监听事件中进行判断，并提示用户没有下一页了
wx.showToast({title:"数据已全部加载", icon:"none"})；
监听用户右上角分享的事件：
onShareAppMessage:function(){}
自定义编译模式
- 点击普通编译的下拉，选择添加编译默认的按钮
- 可以配置
启动页面(下拉选择)，这样可以在每次重新编译启动模拟器之后，直接跳转到指定页面；
3
小程序的生命周期
- 应用生命周期：对应小程序的启动 运行和销毁
- 页面生命周期：页面的加载 渲染和卸载
生命周期函数：
- 小程序框架内置函数，伴随着生命周期，会自动按次序执行；
- 允许程序员在特定的时间点，执行某些特定的操作，如在onLoad生命周期函数中初始化页面数据；
应用的生命周期函数
- 一共2个，都是在app.js中的
App()方法传入对象中声明的； onLaunch: function(options){ }小程序初始化完成时触发，全局调用1次，可以用于加载本地数据（imp）；onShow: function(options){ }已经启动的小程序，从后台进入前台显示时，会触发；onHide: function(){ }小程序从前台进入后台，会触发；
页面的生命周期函数
- 一共5个，都是在页面.js中的
Page()方法传入对象中声明的； onLoad: function(options){ }页面加载，一个页面只调用1次，参数是页面路径参数（imp）；onShow: function(){ }页面显示/切入前台；onReady: function(){ }页面初次渲染完成时触发，一个页面只调用1次，表示页面以准备完成，可以与视图层进行交互，修改导航栏样式请在onReady之后进行（imp）；onHide: function(){ }页面隐藏/切入后台，导航wx.navigateTo和切换页面（tab切换页面）都是；onUnload: function(){ }页面卸载时触发，如wx.redirectTo()或wx.navigateBack()
4 wxs脚本
wxs脚本：微信中的的脚本语言，帮助渲染页面结构，结合WXML可以构建出页面的结构；
wxml中无法调用js函数，但是可以调用wxs中定义的函数；小程序中wxs的典型应用就是过滤器(数据包装处理再显示)；和js是完全不同语言（虽然很相似），有自己的数据类型、不支持es6、遵循CommonJS规范；
wxs的数据类型：
- number
- string
- boolean
- object
- function
- array
- date 日期类型
- regexp 正则
wxs不支持：let const 结构赋值 展开运算符 箭头函数 对象属性简写等 es6语法；只支持var定义变量和普通的function函数等类似es5的语法；
wxs遵循CommonJS规范：
- module：
- 在 CommonJS 规范中，module 是一个对象，它代表当前的模块。每个文件都被视为一个独立的模块，并且在该文件内部会自动创建一个 module 对象。
- module.exports
- module.exports 是 module 对象的一个属性，它是模块向外导出的对象。在一个模块中，你可以将函数、对象、变量等赋值给 module.exports，从而让其他模块通过 require() 函数来使用这些导出的内容。
- 可以将任何数据类型赋值给 module.exports
- require()
- require() 是 CommonJS 规范中用于导入模块的函数。它接收一个参数，该参数是要导入的模块的路径，可以是相对路径或者是内置模块的名称。
通过 module.exports 和 require() 的配合使用，我们可以实现模块的解耦和代码的复用，使得代码结构更加清晰和易于维护。module 提供了模块的基本信息和状态，module.exports 是模块导出内容的接口，而 require() 是导入其他模块的工具，它们共同构成了 CommonJS 模块化的基础。
内嵌wxs脚本：
- 可以编写在wxml文件的
- 每个
<view>{{ m1.toUpper(userName) }}view>
<wxs module="m1">
module.exports.toUpper = function(str){
return str.toUpperCase()
}
wxs>
外联wxs脚本：
- wxs代码还可以编写在
以.wxs为后缀名的文件内；
// /utils/tools.wxs
function toUpper(str){
return str.toUpperCase()
}
module.exports = {
toUpper: toUpper
}
<view>{{ m1.toUpper(userName) }}view>
<wxs module="m1" src="../../utils/tools.wxs">wxs>
wxs的特点：
- 虽然语法上借鉴了js，但与js并不相同；
- 典型应用场景就是过滤器，通常配合Mustache语法使用；
- wxs中定义的函数不能作为组件的事件回调函数；
- wxs的运行环境与其他js代码时隔离的，wxs中不能调用js中定义的函数，也不能调用小程序提供的API；
- 某些系统上，性能会更好；
5
案例实践经验：
1.调用API动态设置标题：wx.setNavigationBarTitle(Object object)，在onReady()生命周期函数中进行使用；
2.仅在当前页面使用的数据，可以使用下划线开头；
3.将
- 在 HTML 中，
4.文本标签的内容显示在一行内，超出部分用 “…” 表示的方法：
.text-label {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
display: block; /* 确保元素为块级元素，可根据实际情况调整 */
width: 200px; /* 设置元素的宽度，可根据需要修改 */
}
5.使用绝对位置布局：将一个view中的7个子view，分别设置在父view的中间位置和四个角落，以及上边的中间和 下边的中间位置；
- 无论是相对位置、绝对位置、flex布局，都需要先看默认的流式布局是否能满足，不要上来就用其他的方式进行页面布局；
/* 首先，将父 view 设为相对定位，作为子 view 的定位参考 */
.view {
position: relative;
width: 100%;
height: 100vh; /* 假设父 view 占据整个视口高度 */
}
/* 子 view 通用样式 */
.view1,.view2,.view3,.view4,.view5,.view6,.view7 {
position: absolute;
width: 50px;
height: 50px;
background-color: red; /* 可自定义颜色 */
}
/* 左上角的 view1 */
.view1 {
top: 0;
left: 0;
}
/* 右上角的 view2 */
.view2 {
top: 0;
right: 0;
}
/* 左下角的 view3 */
.view3 {
bottom: 0;
left: 0;
}
/* 右下角的 view4 */
.view4 {
bottom: 0;
right: 0;
}
/* 上边中间的 view5 */
.view5 {
top: 0;
left: 50%;
transform: translateX(-50%); /* 使用 transform 来将元素向左偏移自身宽度的一半，以实现水平居中 */
}
/* 下边中间的 view6 */
.view6 {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
/* 父 view 中间的 view7 */
.view7 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用 transform 来将元素向左和向上偏移自身宽度和高度的一半，以实现居中 */
}
6.rpx有点像 iphone6的2x图，以1x出图的话，12px就是24rpx；
px像素单位，rpx是用来实现响应式布局的；
7.box-sizing属性 决定了元素的尺寸计算方式，主要涉及元素的 width 和 height 如何包含元素的不同部分（如 content、padding、border 和 margin）。该属性有两个主要的值：content-box 和 border-box。
- 值为 content-box：width 和 height 属性只包括元素的内容区域，不包括 padding、border 和 margin。
- 值为
border-box时：width 和 height 属性包括元素的 content、padding 和 border，但不包括 margin。- 使用场景和优势：使用 border-box 可以使元素的尺寸更可预测，特别是在设置 padding 和 border 时，不会导致元素总宽度和高度超出预期。对于布局复杂的页面，这有助于保持元素尺寸的一致性，避免意外的布局调整。在响应式布局中，当需要根据不同屏幕尺寸调整元素大小时，使用 border-box 可以使元素的 width 和 height 更容易管理，因为你可以直接调整 width 和 height 而无需考虑 padding 和 border 的影响。
7.js是实现逻辑的关键，css是样式实现的关键，值得深入学习；
arr.splice