【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 str
    
    var 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>

总结

学完这一课，你要知道：

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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

计算机网络：如何隐藏真实的IP和MAC地址？

计算机网络：如何隐藏真实的IP和MAC地址？

目录 一、什么是MAC地址二、什么是IP地址三、如何隐藏真实的MAC地址四、如何隐藏真实的IP地址 一、什么是MAC地址 MAC地址&#xff0c;全称为媒体访问控制地址&#xff08;Media Access Control Address&#xff09;&#xff0c;是一种用于网络通信的唯一标识符。它是由IEEE 8…
阅读更多...
深入解析Java和Go语言中String与byte数组的转换原理

深入解析Java和Go语言中String与byte数组的转换原理

1.Java String与byte[]互相转换存在的问题 java中&#xff0c;按照byte[] 》string 》byte[]的流程转换后&#xff0c;byte数据与最初的byte不一致。 多说无益&#xff0c;上代码&#xff0c;本地macos机器执行&#xff0c;统一使用的UTF-8编码。 import java.nio.charset.S…
阅读更多...
【最佳实践】前端如何搭建自己的cli命令行工具，让自己编码的时候如虎添翼

【最佳实践】前端如何搭建自己的cli命令行工具，让自己编码的时候如虎添翼

作为前端开发人员&#xff0c;搭建自己的前端CLI工具是一个有趣且有意义的事情。以下是一篇详细的教程&#xff0c;包括使用场景和案例。 使用场景 假设你是一个前端团队的一员&#xff0c;需要频繁地在不同的项目中执行一些标准化的任务&#xff0c;比如&#xff1a; 根据模…
阅读更多...
一次tcpdump抓包过程

一次tcpdump抓包过程

#查询网卡 tcpdump -D # 监听 21100 端口 网卡ens192 &#xff08;不知道网卡&#xff0c;可以直接不输入 -i 网卡&#xff09;TCP数据&#xff0c;等待一段时间&#xff0c;执行CtrlC&#xff0c;终止程序 tcpdump -x -s 0 -w /tmp/123.dump -i ens192 -p tcp port 21100 #…
阅读更多...
充电桩小程序：引领未来，携手共创绿色充电新纪元

充电桩小程序：引领未来，携手共创绿色充电新纪元

着新能源汽车市场的迅猛增长&#xff0c;充电桩行业正迎来前所未有的发展机遇。然而&#xff0c;在这个充满竞争和机遇并存的时代&#xff0c;如何快速、高效地满足用户需求&#xff0c;成为充电桩行业老板们关注的焦点。为此&#xff0c;我们推出了全新的充电桩小程序&#xf…
阅读更多...
【智能算法应用】麻雀搜索算法在物流配送中心选址的应用（无待选配送中心）

【智能算法应用】麻雀搜索算法在物流配送中心选址的应用（无待选配送中心）

目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法&#xff08;SSA&#xff09;原理及实现 2.数学模型 模型假设 待定物流配送中心的库存总能满足需求点的需求不考虑从工厂到待定物流配送中心的运输成本不考虑选定区域内待确定…
阅读更多...
python爬虫--scrapy框架

python爬虫--scrapy框架

Scrapy 一 介绍 Scrapy简介 1.Scrapy是用纯Python实现一个为了爬取网站数据、提取结构性数据而编写的应用框架&#xff0c;用途非常广泛2.框架的力量&#xff0c;用户只需要定制开发几个模块就可以轻松的实现一个爬虫&#xff0c;用来抓取网页内容以及各种图片&#xff0c;非…
阅读更多...
学生成绩管理系统带8000字文档学生选课管理系统java项目javaweb项目ssm项目jsp项目java课程设计java毕业设计

学生成绩管理系统带8000字文档学生选课管理系统java项目javaweb项目ssm项目jsp项目java课程设计java毕业设计

文章目录 学生选课成绩管理系统一、项目演示二、项目介绍三、8500字项目文档四、部分功能截图五、部分代码展示六、底部获取项目源码带8500字文档&#xff08;9.9&#xffe5;带走&#xff09; 学生选课成绩管理系统 一、项目演示 选课成绩管理系统 二、项目介绍 语言: Java …
阅读更多...
CentOS安装ntp时间同步服务

CentOS安装ntp时间同步服务

CentOS安装ntp时间同步服务 安装ntp 检查服务器是否安装ntp&#xff1a; rpm -q ntp安装ntp&#xff1a; yum install -y ntp服务端配置 配置文件路径&#xff1a;/etc/ntp.conf 设置ntp为开机启动 systemctl enable ntpd查看ntp开机启动状态 enabled:开启, disabled:关闭 …
阅读更多...
第4章，在 PyCharm 中创建、打开、关闭项目的操作

第4章，在 PyCharm 中创建、打开、关闭项目的操作

在 PyCharm 中创建、打开、关闭项目的操作 在PyCharm中创建、打开和关闭项目的操作步骤。以下是每个操作的步骤说明&#xff0c;以及在PyCharm界面中可能对应的区域&#xff1a; 1、创建新项目 1&#xff09;启动PyCharm&#xff1a; 打开PyCharm IDE。 2&#xff09;创建新…
阅读更多...
数据结构 —— 哈夫曼树

数据结构 —— 哈夫曼树

数据结构 —— 哈夫曼树 哈夫曼树定义构造算法特性应用 哈夫曼编码核心概念工作原理特点 我们今天来看哈夫曼树&#xff1a; 哈夫曼树 哈夫曼树&#xff08;Huffman Tree&#xff09;&#xff0c;是一种特殊的二叉树&#xff0c;由D.A. Huffman在1952年提出&#xff0c;主要用…
阅读更多...
php聚合快递寄快递小程序

php聚合快递寄快递小程序

一、引言&#xff1a;告别传统寄件&#xff0c;拥抱便捷新选择 在数字化时代&#xff0c;我们越来越追求便捷和高效。传统的寄件方式已经无法满足现代人快速、便捷的需求。因此&#xff0c;一款聚合快递优惠寄件小程序应运而生&#xff0c;它集合了多家快递公司&#xff0c;为…
阅读更多...
推荐两款电脑文件处理工具，强大到你不舍得卸载

推荐两款电脑文件处理工具，强大到你不舍得卸载

EasyFileCount EasyFileCount是一款基于Java开发的多功能文件管理工具&#xff0c;旨在帮助用户更轻松地管理和优化他们的文件存储。以下是EasyFileCount的主要功能和特点&#xff1a; 查看文件夹大小&#xff1a;用户可以快速统计和查看文件夹的总大小&#xff0c;实时显示各…
阅读更多...
计算机组成原理——系统总线

计算机组成原理——系统总线

题目：计算机使用总线结构便于增减外设，同时__C____。 A.减少了信息传送量 B.提高了信息传输速度 C.减少了信息传输线的条数 1. 总线的分类 1.1. 片内总线 芯片内部的总线 在CPU芯片内部，寄存器与寄存器之间、寄存器与逻辑单元ALU之间 1.1.1. 数据总线 双向传输总线 数…
阅读更多...
ISO37001认证：防范贿赂风险的强大工具

ISO37001认证：防范贿赂风险的强大工具

随着全球反贿赂法规的日益严格&#xff0c;各类组织面临的贿赂风险和合规压力不断增加。ISO37001反贿赂管理体系认证应运而生&#xff0c;为组织提供了一个系统化的管理框架&#xff0c;帮助其有效发现、预防和管控贿赂风险。本文将详细探讨ISO37001认证的作用和意义&#xff0…
阅读更多...
刷代码随想录有感（119）：动态规划——打家劫舍III(树形dp)

刷代码随想录有感（119）：动态规划——打家劫舍III(树形dp)

题干&#xff1a; 代码&#xff1a; class Solution { public:vector<int>dp(TreeNode* cur){if(cur NULL)return vector<int>{0, 0};vector<int> left dp(cur -> left);vector<int> right dp(cur -> right);//偷int val1 cur -> val l…
阅读更多...
U-boot相关基础知识

U-boot相关基础知识

U-boot和Bootloader之间的关系 U-Boot是Bootloader的一种实现&#xff0c;它专门用于嵌入式系统&#xff0c;特别是那些基于ARM、MIPS等处理器的系统。U-Boot提供了丰富的硬件支持和功能&#xff0c;使得开发者能够轻松地初始化硬件、加载操作系统内核&#xff0c;并进行一些基…
阅读更多...
Adobe Indesign 操作

Adobe Indesign 操作

页面设置 版面&#xff1a;图文和空白部分的总和。 版心&#xff1a;规划在版面中排印文本和图片的部分。 开本&#xff1a;单个页面的宽度和高度。 如图所示&#xff0c;新建文件&#xff0c;自定义是210297毫米。这个数据是开本大小。 点击“边距和分栏”&#xff0c;出现…
阅读更多...
技术干货｜SimLab 电子产品热流体仿真

技术干货｜SimLab 电子产品热流体仿真

电子产品热仿真特点有哪些&#xff1f; 结构复杂&#xff0c;电子设备包含几十~上千个元器件 体积小&#xff0c;功率密度高、关注热敏感元器件 多种冷却方式&#xff0c;自然冷却、风扇冷却、液冷、热管等 多维度&#xff0c;芯片级&#xff0c;板级&#xff0c;系统级 单…
阅读更多...
.idea文件夹里面iml文件有啥用

.idea文件夹里面iml文件有啥用

.idea文件夹和其中的.iml文件对于IntelliJ IDEA项目非常重要&#xff0c;它们共同构成了IDEA对项目理解的基础。让我们详细了解一下这两者的作用&#xff1a; .idea文件夹 .idea文件夹包含了IntelliJ IDEA项目的所有配置信息&#xff0c;包括但不限于&#xff1a; 编译器设置…
阅读更多...
最新文章

Copyright @ 2022~2023