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

embedded/2025/1/21 14:13:55/

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，表示要后退的层级)；
<!-- 当前在首页 -->
<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文件的<wxs>标签内，类似html中js写在script标签内；
  • 每个<wxs>标签，必须提供一个module属性，以指定当前wxs的模块名称；
<!-- filter -->
<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>
<!-- 导入外联脚本 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.文本标签的内容显示在一行内，超出部分用 “…” 表示的方法：

.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


http://www.ppmy.cn/embedded/155782.html

相关文章

CentOS 7.9下安装Docker

CentOS 7.9下安装Docker

一、安装docker前的准备工作 操作系统版本为centos 7.9&#xff0c;内核版本需要在3.10以上&#xff0c;需要保障能够连通互联网&#xff0c;为了避免安装过程中出现网络异常建议关闭linux的防火墙&#xff08;生产环境下不要关闭防火墙&#xff0c;可根据实际情况设置防火墙出…
阅读更多...
WPF 属性绑定详解

WPF 属性绑定详解

在 WPF 开发中&#xff0c;属性绑定是一项核心且强大的功能&#xff0c;它极大地简化了 UI 与数据之间的交互&#xff0c;提高了代码的可维护性和可扩展性。本文将深入探讨 WPF 属性绑定&#xff0c;帮助大家更好地理解和运用这一技术。 什么是属性绑定 属性绑定是指在 WPF 中…
阅读更多...
基于 Electron 应用的安全测试基础 — 提取和分析 .asar 文件

基于 Electron 应用的安全测试基础 — 提取和分析 .asar 文件

视频教程在我主页简介或专栏里 目录&#xff1a; 提取和分析 .asar 文件 4.1. .asar 文件提取工具 4.1.1. 为什么选择 NPX&#xff1f; 4.2. 提取过程 4.3. 提取 .asar 文件的重要性 4.3.1 关键词 4.3.2 执行关键词搜索 4.3.2.1 使用命令行工具“grep”进行关键词搜索 4.3.2…
阅读更多...
Ubuntu 22.04.5 修改IP

Ubuntu 22.04.5 修改IP

Ubuntu22.04.5使用的是netplan管理网络&#xff0c;因此需要在文件夹/etc/netplan下的01-network-manager-all.yaml中修改&#xff0c;需要权限&#xff0c;使用sudo vim或者其他编辑器&#xff0c;修改后的内容如下&#xff1a; # Let NetworkManager manage all devices on …
阅读更多...
springboot基于安卓的智启教育服务平台app

springboot基于安卓的智启教育服务平台app

基于Spring Boot的智启教育服务平台App是一个结合了Spring Boot后端框架与安卓前端技术的综合性教育服务平台。 一、技术背景与架构 1.开发语言&#xff1a;后端采用Java语言开发&#xff0c;充分利用Java的跨平台性、面向对象特性和强大的后端处理能力。前端则使用安卓开发技…
阅读更多...
2.6 聚焦：Word Embedding

2.6 聚焦：Word Embedding

聚焦：Word Embedding Word Embedding（词嵌入） 是一种将词语转化为低维向量表示的技术，使得词语在数学空间中具有语义上的相似性。它是自然语言处理（NLP）中不可或缺的一部分，为文本数据提供了强大的表示能力。与传统的基于词频的词袋模型（Bag-of-Words）相比，Word Emb…
阅读更多...
智能仓储管理：从自动化到智能化的演进与挑战

智能仓储管理：从自动化到智能化的演进与挑战

智能仓储管理：从自动化到智能化的演进与挑战 随着电子商务的迅猛发展，仓储管理已不再是一个单纯的物理存储问题，它已经变得更加复杂，涉及到物流、库存、订单处理等多个环节。而随着人工智能和物联网技术的不断进步，智能仓储管理正在从传统的自动化仓库向更加智能化的系统…
阅读更多...
JavaWeb开发（十五）实战-生鲜后台管理系统（二）注册、登录、记住密码

JavaWeb开发（十五）实战-生鲜后台管理系统（二）注册、登录、记住密码

1. 生鲜后台管理系统-注册功能 1.1. 注册功能 &#xff08;1&#xff09;创建注册RegisterServlet&#xff0c;接收form表单中的参数。   &#xff08;2&#xff09;service创建一个userService处理业务逻辑。   &#xff08;3&#xff09;RegisterServlet将参数传递给ser…
阅读更多...
最新文章

Copyright @ 2022~2023