【Day03】0基础微信小程序入门-学习笔记

文章目录

  • 视图与逻辑
    • 学习目标
    • 页面导航
      • 1. 声明式导航
      • 2. 编程式导航
      • 3. 导航传参
    • 页面事件
      • 1. 下拉刷新
      • 2. 上拉触底
      • 3.扩展-自定义编译模式
    • 生命周期
      • 1. 简介
      • 2. 生命周期函数
      • 3. 应用的生命周期函数
      • 4. 页面生命周期函数
    • WXS脚本
      • 1. 概述
      • 2. 基础语法
      • 3. WXS的特点
      • 4. 使用WXS处理手机号
    • 总结

视图与逻辑

持续更新~

学习目标

  • 能够知道如何实现页面之间的导航跳转
  • 能够知道如何实现下拉刷新效果
  • 能够知道如何实现上拉加载更多效果
  • 能够知道小程序中常用的生命周期函数

页面导航

指的是页面之间的相互跳转

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

  • 声明式导航

    声明一个navigator导航组件，点击组件实现页面跳转

  • 编程式导航

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

1. 声明式导航

导航到tabBar页面：

须要指定url属性和open-type属性。

url：要跳转的页面地址，必须/开头

open-type：表示跳转方式，必须为switchTab

示例：

<navigator url:'/pages/message/message' open-type="switchTab">导航到消息页面</navigator>

导航到非tabBar页面：

须要指定url属性和open-type属性。

url：要跳转的页面地址，必须/开头

open-type：表示跳转方式，必须为navigate

<navigator url:'/pages/info/info' open-type=""></navigator>

导航到非tabBar页面时，open-type属性可以省略。

后退导航：

如果要后退到上一页面或多级页面，则需要指定open-type和delta属性

open-type：表示跳转方式，必须为navigateBack 。

delta的值必须是数字，表示要后退的层级，默认值为1，可省略。

<navigator open-type="navigatorBack" delta="1"></navigator>

2. 编程式导航

导航到tabBar页面:

调用wx.switchTab(Object object)方法，可以跳转到tabBar页面。

其中Object参数对象的属性列表如下：

属性类型是否必选说明
urlstring是需要跳转的 tabBar 页面的路径，路径后不能带参数
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数(调用成功、失败都会执行)

示例：

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

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

导航到非tabBar页面:

调用wx.navigateTo(Object object)方法，可以跳转到非tabBar的页面。

object的参数列表：

属性类型是否必选说明
urlstring是需要跳转到的非 tabBar页面的路径，路径后可以带参数
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数(调用成功、失败都会执行)
<button bindtap="gotoInfo">    跳转到消息页面
</button>

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

后退导航：

调用 wx.navigateBack(0bject object)方法，可以返回上一页面或多级页面。

属性类型是否必选默认值说明
deltanumber否1返回的页面数，如果 delta 大于现有页面数，则返回到首页
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数(调用成功、失败都会执行)

示例：

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

gotoBack(){wx.navigateBack({//后退一层，delta可省略delta:1})
}

3. 导航传参

声明式导航传参：

url指定路径，后面可以携带参数

  • 参数与路径之间使用?分隔
  • 参数键和值之用=相连
  • 不同参数用&分隔
<navigator url="/pages/info/infoo?name=ruru&age=18"></navigator>

编程式导航传参：

也是在url地址中进行改动

<button bindtap=“gotoInfo>跳转到info页面 
</button>

gotoInfo(){wx.navigateTo({url:'/pages/info/info?name=ruru&gender=女'})
}

在onLoad中接收导航参数：

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad 事件中直接获取到，通过options进行接收。

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

为了让其他方法也可以使用到options中的数据，一般定义一个query对象接收导航传递过来的参数对象。

data:{//导航传递过来的参数对象query:{}
}

onLoad:function(options){//options就是导航传递过来的参数对象console.log(options)this.setData({//赋值query:options})
}

页面事件

1. 下拉刷新

下拉刷新，指的是手指在屏幕上下拉滑动操作，从而重新加载页面数据的行为。

下来刷新的两种方式：全局开启下拉刷新、局部开启下拉刷新。两种方式都是在json文件中将enablePullDownRefresh设置为true，配置位置不同。

推荐为需要的页面单独开启下拉刷新的效果，不建议全局配置喔~

配置下拉刷新窗口样式：窗口背景颜色backgroundColor和下拉loading样式backgroundTextStyle

监听页面下拉刷新事件：

在.js文件中，通过onPullDownRefresh()函数监听。只要触发了下拉刷新行为，就会立刻执行这个函数。

关闭下拉刷新使用 wx.stopPullDownRefresh()这个方法。

onPullDownRefresh:function(){console.log('触发了message页面的下拉刷新')//调用此函数，可关闭下拉刷新效果wx.stopPullDownRefresh()
}

2. 上拉触底

指的是手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

在.js文件中，通过onReachBottom()函数监听。

onReachBottom:function(){console.log('触发了message页面的上拉触底事件')
}

每次触底都会触发这个函数，为了提高性能，我们使用节流。

配置上拉触底距离：

指的是触发上拉触底事件时，滚动条距离页面底部的距离。在.json文件中通过onReachBottomDistance属性配置，默认是50px，可修改。

3.扩展-自定义编译模式

按需求填写
在这里插入图片描述
在这里插入图片描述

生命周期

1. 简介

生命周期(Life Cycle)是指一个对象从创建 ->运行 ->销毁的整个阶段，强调的是一个时间段。

分类：

  • 应用生命周期（范围较大）

    小程序 启动 -> 运行 -> 销毁 的过程

  • 页面生命周期（范围较小）

    小程序每个页面的 加载 -> 渲染 -> 销毁 的过程

在这里插入图片描述

2. 生命周期函数

定义：小程序提供的内置函数，伴随生命周期，自动按次序执行。

作用：运行程序员在特定的时间点，执行某些特定的操作。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

分类：

  • 应用的生命周期函数

    小程序从 启动 -> 运行-> 销毁 期间依次调用的函数

  • 页面的生命周期函数

    每个也买你从 加载 -> 渲染 -> 销毁 期间一次调用的那些函数。

3. 应用的生命周期函数

小程序的应用生命周期函数，需要在app.js中进行声明

前台：直接面对和操作的界面部分，也就是用户在手机或其他设备上看到和使用的界面

后台：运行在服务器上的后端系统，负责处理小程序的业务逻辑、数据存储、用户管理等功能

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

在这里插入图片描述

没有这个图标的话可以在工具-工具栏中打开

4. 页面生命周期函数

小程序的页面生命周期函数需要在.js文件中进行声明

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

WXS脚本

1. 概述

WXS(WeiXin Script)是小程序独有的一套脚本语言，结合WXML可以构建出页面的结构。

wxml中无法调用在页面的.js中定义的函数，但是，wxml 中可以调用wxs中定义的函数。

因此，小程序中wxs 的典型应用场景就是过滤器

了解：
在这里插入图片描述

2. 基础语法

内嵌wxs脚本：

wxs 代码可以编写在 wxml文件中的wxs标签内，就像Javascript 代码可以编写在 html文件中的 script标签内一样。
wxml文件中的每个<wxs></wxs>标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在wxml中访问模块中的成员。

<view>{{m1.toUpper(username)}}</view>
<wxs mpdule="m1">//将文本转为大写形式module.exports.toUpper = function(str){return str.toUpperCase()}
</wxs>

外联wxs脚本：

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

//tools.wxs文件
function toLower(str){return str.toLowerCase()
}module.exports = {toLower:toLower
}

使用外联wxs脚本:

为该标签添加module和src属性，分别是模块名称和相对路径。

<wxs src="../../utils/tools.wxs" module="m2"></wxs>

3. WXS的特点

  • 与js不同
  • 不能作为组件的事件回调，典型用法就是"过滤器"
  • 隔离性。wxs不能调用js定义的函数，也不能调用小程序提供的API
  • 性能好。在IOS设备上WXS比JS快2~20倍。安卓设备上无差异。

4. 使用WXS处理手机号

在这里插入图片描述

//utils/tools.wxs
function splitPhone(str){if（str.length !== 11) return strvar arr = str.split('')//console.log(arr)arr.splice(3,0,'-')arr.splice(8,0,'-')//console.log(arr)return arr.join('')  
}
module.expotrs = {splitPhone:splitPhone
}

<!--引入，使用-->
<wxs src="../../utils/tools.wxs" module="tools"></wxs><text>电话：{{tools.splitPhone(item.phone)}}</text>

总结

学完这一课，你要知道：

  • 能够知道如何实现页面之间的导航跳转
  • 能够知道如何实现下拉刷新效果
  • 能够知道如何实现上拉加载更多效果
  • 能够知道小程序中常用的生命周期函数

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/36035.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Multisim详细安装过程

Multisim详细安装过程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Multisim是什么&#xff1f;二、下载安装步骤1.下载安装包2.安装 总结 前言 对于很多学习电路&#xff0c;数电&#xff0c;模电的朋友&#xff0c;我们在…
阅读更多...
富格林：可信经验曝光有效出金

富格林：可信经验曝光有效出金

富格林认为&#xff0c;在现货黄金当中&#xff0c;曝光可信的交易技巧可以帮助投资者有效地盈利出金。现货黄金市场就像一把双刃剑&#xff0c;投资者利用得好就能成为赢家&#xff0c;利用得不好便是损失钱财。事实上&#xff0c;要想成为赢家还是要掌握必须的可信经验。以下…
阅读更多...
volcengine 库装不上 #25

volcengine 库装不上 #25

https://github.com/volcengine/volc-sdk-python/issues/25 解决了, 就是解决方案比较蠢 在 Docker python3.10-slim 中 volcengine 安装时报错, 其依赖 pycryptodome 显示 gcc 相关错误 调研发现 pycryptodome3.19.0 不会报错, volcengine 依赖的 pycryptodome3.9.9 会报错 …
阅读更多...
php中strict_types使用详解

php中strict_types使用详解

在PHP中&#xff0c;strict_types是一个声明性的指令&#xff0c;用于在文件级别控制类型声明的严格性。当你在脚本的最顶部使用declare语句启用strict_types时&#xff0c;PHP将在该文件中对类型声明执行严格的类型检查。这意味着函数参数、返回值等必须精确匹配指定的类型&am…
阅读更多...
05-Mysql备份与恢复

05-Mysql备份与恢复

物理备份&#xff1a;对数据库操作系统的物理文件&#xff08;如数据库文件&#xff0c;日志文件等&#xff09;的备份 物理备份方法&#xff1a; 冷备份&#xff08;防脱备份&#xff09;&#xff1a;是在关闭数据库的时候进行的 热备份&#xff08;联机备份&#xff09;&am…
阅读更多...
入门JavaWeb之 Session 篇

入门JavaWeb之 Session 篇

Session&#xff1a; 服务器会给每个用户&#xff08;浏览器&#xff09;创建一个 Session 对象 一个 Session 独占一个浏览器&#xff0c;只要浏览器没有关闭&#xff0c;这个 Session 就存在 代码如下&#xff1a; package com.demo.cookie;import javax.servlet.Servlet…
阅读更多...
WPF/C#：如何实现拖拉元素

WPF/C#：如何实现拖拉元素

前言 在Canvas中放置了一些元素&#xff0c;需要能够拖拉这些元素&#xff0c;在WPF Samples中的DragDropObjects项目中告诉了我们如何实现这种效果。 效果如下所示&#xff1a; 拖拉过程中的效果如下所示&#xff1a; 具体实现 xaml页面 我们先来看看xaml&#xff1a; <…
阅读更多...
软件工程练习题1

软件工程练习题1

一、选择 1. &#xff08; D &#xff09;不可以作为模块 A.子程序 B.函数 C.过程 D.循环 2. 下列哪个阶段不属于软件生命周期三大阶段&#xff08; C &#xff09; A.定义阶段 B.开发阶段 C.编码阶段 D.维护阶段 3. 需求分析最终结果是产生&#xff08;B&#…
阅读更多...
python之静态函数装饰器staticmethod介绍

python之静态函数装饰器staticmethod介绍

Python 中的 staticmethod 装饰器是用于定义一个静态方法的修饰器。静态方法是一种特殊的方法,它不需要 self 参数,也不需要 class 参数,它只是一个普通的函数,只是被定义在类的内部。 1.示例 下面是一个使用 staticmethod 的例子: class MyClass:def __init__(self, x, y):…
阅读更多...
基于稀疏矩阵方法的剪枝压缩模型方案总结

基于稀疏矩阵方法的剪枝压缩模型方案总结

1.简介 1.1目的 在过去的一段时间里&#xff0c;对基于剪枝的模型压缩的算法进行了一系列的实现和实验&#xff0c;特别有引入的稀疏矩阵的方法实现了对模型大小的压缩&#xff0c;以及在部分环节中实现了模型前向算法的加速效果&#xff0c;但是总体上模型加速效果不理想。所…
阅读更多...
动手学深度学习（Pytorch版）代码实践 -计算机视觉-39实战Kaggle比赛：狗的品种识别（ImageNet Dogs）

动手学深度学习（Pytorch版）代码实践 -计算机视觉-39实战Kaggle比赛：狗的品种识别（ImageNet Dogs）

39实战Kaggle比赛&#xff1a;狗的品种识别&#xff08;ImageNet Dogs&#xff09; 比赛链接&#xff1a;Dog Breed Identification | Kaggle 1.导入包 import torch from torch import nn import collections import math import os import shutil import torchvision from…
阅读更多...
IaaS，PaaS，SaaS理解

IaaS，PaaS，SaaS理解

目前主流的IaaS&#xff0c;PaaS&#xff0c;SaaS产品 一、简述应用方案 这里借用汽车的例子对IaaS、PaaS、SaaS的解释进一步阐述三者的区别。 假设你需要出去外出使用交通工具&#xff0c;我们有四种的方案&#xff1a; On-premise&#xff08;本地部署服务&#xff09; 自己…
阅读更多...
【AI绘画】关于AI绘画做副业，你需要知道的事

【AI绘画】关于AI绘画做副业，你需要知道的事

前言 AI绘画是一种新兴的艺术形式&#xff0c;它利用人工智能技术来创造出各种各样的艺术作品。随着人工智能技术的不断发展&#xff0c;AI绘画已经成为了一种非常有前途的副业&#xff0c;可以帮助人们赚取额外的收入。下面是一些利用AI绘画副业方法。 1、利用AI绘画技术创作…
阅读更多...
Java基础知识-线程

Java基础知识-线程

Java基础知识-线程 1、在 Java 中要想实现多线程代码有几种手段&#xff1f; 1. 一种是继承 Thread 类 2. 另一种就是实现 Runnable 接口 3. 最后一种就是实现 Callable 接口 4. 第四种也是实现 callable 接口&#xff0c;只不过有返回值而已 2、Thread 类中的 start() 和 …
阅读更多...
vue使用Props实现组件数据交互

vue使用Props实现组件数据交互

在Vue中&#xff0c;组件的props属性用于定义组件可以接收的外部数据&#xff0c;这些数据来自父组件并传递给子组件。 props可以是一个数组或对象&#xff0c;用于指定子组件接受的属性名称。通过在父组件中使用子组件时&#xff0c;通过属性的方式将数据传递给子组件&#x…
阅读更多...
JAVA课设必备环境配置 教程 JDK Tomcat配置 IDEA开发环境配置 项目部署参考视频 若依框架 链接数据库格式注意事项

JAVA课设必备环境配置 教程 JDK Tomcat配置 IDEA开发环境配置 项目部署参考视频 若依框架 链接数据库格式注意事项

JAVA环境配置 https://blog.csdn.net/xhmico/article/details/122390181 JAVA环境配置 前置条件&#xff1a;JDK安装 在开始配置Java环境之前&#xff0c;确保已经下载并安装了Java Development Kit (JDK)。JDK包含了Java编译器、Java虚拟机&#xff08;JVM&#xff09;以及…
阅读更多...
我的大学学习数据汇总【汇总】

我的大学学习数据汇总【汇总】

我的大学学习数据汇总【汇总】 前言版权推荐我的大学学习数据汇总成绩学习荣誉代码视频 附件最后 前言 2024-5-16 15:46:57 以下内容源自《【汇总】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是https:/…
阅读更多...
【408考点之数据结构】图的基本概念

【408考点之数据结构】图的基本概念

图的基本概念 图是一种重要的数据结构&#xff0c;它由顶点和顶点之间的边组成。图广泛应用于计算机科学、工程、数学和其他领域&#xff0c;用于表示和解决各种复杂问题。 一、图的定义 图的基本定义&#xff1a; 图 (G) 由一个顶点集合 (V(G)) 和一个边集合 (E(G)) 组成&am…
阅读更多...
微信公众号写作时必备的AI提示词（也称为指令或Prompt）

微信公众号写作时必备的AI提示词（也称为指令或Prompt）

猫头虎 &#x1f42f; 微信公众号写作时必备的AI提示词&#xff08;也称为指令或Prompt&#xff09; &#x1f389; 大家好&#xff0c;我是猫头虎&#xff0c;科技自媒体博主。今天&#xff0c;我们来聊聊如何利用AI提示词&#xff0c;打造出爆款的微信公众号文章。&#x1…
阅读更多...
Win10扩充C盘（把其他盘存储空间分给C盘）

Win10扩充C盘（把其他盘存储空间分给C盘）

C盘虽然没有安装任何软件&#xff0c;但无奈安装某些软件&#xff08;例如VS&#xff0c;QuarC等&#xff09;总会占用C盘容量&#xff0c;且C盘内存很小&#xff08;只有60G左右&#xff09;&#xff0c;看着D盘的三四十空闲内存&#xff0c;决定把D盘内存分给C盘30G&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023