【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;我们在…
阅读更多...
入门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目的 在过去的一段时间里&#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() 和 …
阅读更多...
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;以及…
阅读更多...
微信公众号写作时必备的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…
阅读更多...
css持续学习

css持续学习

一、样式层叠 当一个css样式发生冲突时&#xff0c;比如多处给一个字体设置了不同的颜色&#xff0c;这个时候就需要样式层叠了&#xff0c;它会进行三种比较 比较重要性 重要性从高到低&#xff1a; 1.带有 important 的作者样式&#xff08;作者样式就是开发者写的样式&…
阅读更多...
【Red Hat 7.9---详细安装Oracle 11g】---图形化界面方式

【Red Hat 7.9---详细安装Oracle 11g】---图形化界面方式

原文&#xff1a;https://blog.csdn.net/qq_41840843/article/details/131198718?spm1001.2014.3001.5501 &#x1f53b; 一、安装前规划 规划项(本环境)描述操作系统版本Red Hat Enterprise Linux Server release 7.9 (Maipo)主机名db-oracle数据库版本Oracle 11gIp规划192.…
阅读更多...
【毛毛虫案例-重力 Objective-C语言】

【毛毛虫案例-重力 Objective-C语言】

一、接下来，我们给这个毛毛虫，添加一下重力 1.把我们之前的代码，复制粘贴一份儿，改个名字，叫做：17-毛毛虫案例-重力， 重力的话，实际上，就比较简单了啊，那我们重力的话，去添加的时候，我也要在外面，去添加， 重力的话，叫做啥，UIGravityBehavior，啊， UIGravity…
阅读更多...
Thinkphp/Laravel高校竞赛管理系统的设计与实现_9pi7u

Thinkphp/Laravel高校竞赛管理系统的设计与实现_9pi7u

高校竞赛管理&#xff0c;其工作流程繁杂、多样、管理复杂与设备维护繁琐。而计算机已完全能够胜任高校竞赛管理工作&#xff0c;而且更加准确、方便、快捷、高效、清晰、透明&#xff0c;它完全可以克服以上所述的不足之处。这将给查询信息和管理带来很大的方便&#xff0c;从…
阅读更多...
时序约束（一）：时钟的约束

时序约束（一）：时钟的约束

目录 一、时钟约束的目的 二、约束工程项目 三、主时钟和生成时钟 四、主时钟约束 五、生成钟约束 一、时钟约束的目的 之前的文章对时序分析的基本原理做了介绍&#xff0c;我们会发现时序分析离不开时钟信号。对于时序分析工具来说同样如此&#xff0c;分析工具需要我…
阅读更多...
【漏洞复现】用友GRP-U8——SQL注入

【漏洞复现】用友GRP-U8——SQL注入

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 用友GRP-U8是一款企业管理软件&#xff0c;其系统dialog_moreUs…
阅读更多...
财务RPA案例研究——分析成功的财务RPA实施案例

财务RPA案例研究——分析成功的财务RPA实施案例

现代社会正加速向数字时代转型&#xff0c;数字技术以崭新的模式全面融入各行业领域。为顺应新一轮科技革命和产业变革趋势&#xff0c;越来越多的企业不断深化应用大数据、云计算、人工智能等新一代信息技术&#xff0c;积极迎接数字化转型&#xff0c;而RPA技术由于能够以自动…
阅读更多...
常用组件详解（二）：torch.nn.Flatten、torch.flatten()

常用组件详解（二）：torch.nn.Flatten、torch.flatten()

文章目录 torch.nn.Flattentorch.flatten() 官方API文档&#xff1a;点击跳转。torch.nn.Flatten是Pytorch提供的类&#xff0c;常用于将输入数据进行展平&#xff0c;而torch.flatten()函数与之功能相同。 torch.nn.Flatten 类初始化方式&#xff1a; torch.nn.Flatten(star…
阅读更多...
算法基础详解

算法基础详解

大O记法 为了统一描述&#xff0c;大O不关注算法所用的时间&#xff0c;只关注其所用的步数。 比如数组不论多大&#xff0c;读取都只需1步。用大O记法来表示&#xff0c;就是&#xff1a;O(1)很多人将其读作“大O1”&#xff0c;也有些人读成“1数量级”。一般读成“O1”。虽…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023