2021版小程序开发3——视图与逻辑

2021版小程序开发3------视图与逻辑

学习笔记 2025

页面间导航跳转
下拉刷新
上拉加载更多
小程序生命周期函数
WXS脚本

1

页面导航是指页面之间的相互跳转，浏览器上一般有两种：a标签和location.href；

小程序中则支持两种页面导航方式：

声明式导航：
- 声明一个<navigatior>导航组件，通过点击该组件实现页面跳转；
编程式导航
- 调用小程序的导航API，实现页面的跳转；

声明式导航:

指定url（页面的地址，以/开头）和open-type属性，如tabBar中页面间的跳转，那么open-type必须为switchTab
如果是从tabBar页面导航到非tabBar页面，open-type则为navigate（也可以省略该属性值的配置）
后退导航，则需要指定 open-type 属性为navigateBack和delta属性(必须是数字，默认值为1，表示要后退的层级)；

xml 复制代码

<!-- 当前在首页 -->
<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时间监听回调中获取；

js 复制代码

data:{
  query: {}
},

onload: function(options){
  // options 就是页面参数对象，转存到data中
  this.setData({
    query: options
  })
}

2

页面事件

下拉刷新
上拉加载更多

下拉刷新

在配置文件中：

全局配置开启，或局部开启（推荐）；
enablePullDownRefresh设置为true；

下拉刷新窗口样式：

backgroundColor 窗口背景颜色，16进制颜色值
backgroundTextStyle： dark/light 可以设置下拉loading的样式

监听下拉刷新事件：

onPullDownRefresh: function(){}
停止（不会主动消失）下拉刷新：在监听回调处理代码结束后，调用wx.stopPullDownRefresh()
下拉刷新的时候，需要重置一些关键性的节点数据；同时要注意关闭下拉刷新的时机；

js 复制代码

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文件的<wxs>标签内，类似html中js写在script标签内；
每个<wxs>标签，必须提供一个module属性，以指定当前wxs的模块名称；

xml 复制代码

<!-- filter -->
<view>{{ m1.toUpper(userName) }}</view>

<!-- 内嵌脚本 -->
<wxs module="m1">
  module.exports.toUpper = function(str){
    return str.toUpperCase()
  }
</wxs>

外联wxs脚本：

wxs代码还可以编写在以.wxs为后缀名的文件内；

js 复制代码

//  /utils/tools.wxs
function toUpper(str){
    return str.toUpperCase()
  }
module.exports = {
  toUpper: toUpper
}

xml 复制代码

<view>{{ m1.toUpper(userName) }}</view>
<!-- 导入外联脚本 src只能使用相对路径 module指定模块名-->
<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.将<image>的display属性设置为 block 的主要作用:

在 HTML 中，<img> 元素是一个内联元素，它在默认情况下会与文本的基线对齐，这可能会导致在 <img> 元素的底部出现一些意外的间隙。当你将 display 属性设置为 block 时，会将其从内联元素变为块级元素，从而消除这种底部间隙。

4.文本标签的内容显示在一行内，超出部分用 "..." 表示的方法：

css 复制代码

.text-label {
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
    display: block; /* 确保元素为块级元素，可根据实际情况调整 */
    width: 200px; /* 设置元素的宽度，可根据需要修改 */
}

5.使用绝对位置布局：将一个view中的7个子view，分别设置在父view的中间位置和四个角落，以及上边的中间和下边的中间位置；

无论是相对位置、绝对位置、flex布局，都需要先看默认的流式布局是否能满足，不要上来就用其他的方式进行页面布局；

css 复制代码

/* 首先，将父 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