【微信小程序开发】基础语法篇

🥳🥳Welcome Huihui's Code World ! !🥳🥳

接下来看看由辉辉所写的关于小程序的相关操作吧

 

目录

🥳🥳Welcome Huihui's Code World ! !🥳🥳

一.视图层

1.数据绑定

wxml

js

2 .列表渲染

wx:for

wxml

js

3.条件渲染

wx:if

wxml

js

4.模板

wxml

js

事件的绑定

二.逻辑层（生命周期）

1.页面路由

①页面栈

②路由方式

③注意事项

2.生命周期

①一级跳一级

A.WXML

A.JS

B.WXML

B.JS

②二级跳二级

​编辑

aa.WXML

aa.JS

bb.WXML

bb.JS

③一级跳二级

④二级跳一级

⑤深层次页面直接跳一级

wh.WXML

wh.JS

⑥返回上一次所打开的页面

3.结论

上期我们简单的了解了小程序，并且成功安装了微信开发工具，那么这一期我们就来讲讲它的相关语法知识吧！！

一.视图层

1.数据绑定

wxml

<view> {{message}} </view>

js

 /*** 页面的初始数据*/data: {message: 'Hello 辉辉!'},

2 .列表渲染

wx:for

wxml
<view wx:for="{{huihui}}"> {{item.name}} </view>
js
/*** 页面的初始数据*/data: {huihui: [{name:'辉辉1'},{name:'辉辉2'}]},

3.条件渲染

wx:if

wxml
<view wx:for="{{huihui}}"> {{item.name}} </view>
<view wx:if="{{view == '1'}}"> 王辉 </view>
<view wx:elif="{{view == '2'}}"> 光军 </view>
<view wx:else="{{view == '3'}}"> 辉辉 </view>
js
/*** 页面的初始数据*/data: {view: '3'},

4.模板

wxml
<template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}},AllName:{{firstName}}{{lastName}}</view>
</template><template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
js
 /*** 页面的初始数据*/data: {staffA: {firstName: '王', lastName: '辉'},staffB: {firstName: '夏', lastName: '威'},staffC: {firstName: '辉', lastName: '辉'}},

事件的绑定

小程序中绑定事件通过bind关键字来实现。如：bindtap、bindinput、bindchange等

不同的组件支持不同的事件，具体看组件的说明即可

注意

🔺绑定事件是不能带参数 不能带括号 以下为错误写法

<input bindinput="handleInput(100)" />

🔺事件传值 通过标签自定义属性的方式和value

<input bindinput="handleInput" data-item="100" />

🔺事件触发时获取数据

 handleInput: function(e) {// {item:100}console.log(e.currentTarget.dataset)// 输入框的值console.log(e.detail.value);}

二.逻辑层（生命周期）

1.页面路由

在小程序中所有页面的路由全部由框架进行管理。

①页面栈

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：

路由方式页面栈表现
初始化新页面入栈
打开新页面新页面入栈
页面重定向当前页面出栈，新页面入栈
页面返回页面不断出栈，直到目标返回页
Tab 切换页面全部出栈，只留下新的 Tab 页面
重加载页面全部出栈，只留下新的页面

开发者可以使用 getCurrentPages() 函数获取当前页面栈。

②路由方式

对于路由的触发方式以及页面生命周期函数如下：

路由方式触发时机路由前页面路由后页面
初始化小程序打开的第一个页面onLoad, onShow
打开新页面调用 API wx.navigateTo
使用组件 <navigator open-type="navigateTo"/>		onHideonLoad, onShow
页面重定向调用 API wx.redirectTo
使用组件 <navigator open-type="redirectTo"/>		onUnloadonLoad, onShow
页面返回调用 API wx.navigateBack
使用组件<navigator open-type="navigateBack">
用户按左上角返回按钮		onUnloadonShow
Tab 切换调用 API wx.switchTab
使用组件 <navigator open-type="switchTab"/>
用户切换 Tab		各种情况请参考下表
重启动调用 API wx.reLaunch
使用组件 <navigator open-type="reLaunch"/>		onUnloadonLoad, onShow

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

当前页面路由后页面触发的生命周期（按顺序）
AANothing happend
ABA.onHide(), B.onLoad(), B.onShow()
AB（再次打开）A.onHide(), B.onShow()
CAC.onUnload(), A.onShow()
CBC.onUnload(), B.onLoad(), B.onShow()
DBD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D（从转发进入）AD.onUnload(), A.onLoad(), A.onShow()
D（从转发进入）BD.onUnload(), B.onLoad(), B.onShow()

③注意事项

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。

2.生命周期

小程序的生命周期分为应用生命周期和页面生命周期以及组件的生命周期

这一篇我们主要讲一下页面生命周期【下面这个图片是官方提供的】

首先准备四个页面，其中一级A和一级B是一级菜单，二级a和二级b是二级菜单，更深层的页面是wh页面，并且要在这些页面中添加按钮，然后设置对应的点击事件【navigateTo, redirectTo 只能打开非 tabBar 页面和switchTab 只能打开 tabBar 页面的原则】

①一级跳一级

A.WXML
<!--pages/A/A.wxml--><text>我是一级A</text>
<button bindtap="AtoB">一级A页面跳转一级B页面</button>
<button bindtap="Atoaa">一级A页面跳转二级aa页面</button>
A.JS
// pages/A/A.js
Page({/*** 页面的初始数据*/data: {},AtoB:function(){wx.switchTab ({url:"/pages/B/B",})},Atoaa:function(){wx.navigateTo({url:"/pages/aa/aa",})},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log('一级A--onLoad')},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log('一级A--onReady')},/*** 生命周期函数--监听页面显示*/onShow() {console.log('一级A--onShow')},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log('一级A--onHide')},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log('一级A--onUnload')},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
B.WXML
<!--pages/B/B.wxml-->
<text>我是一级B</text>
B.JS
// pages/B/B.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log('一级B--onLoad')},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log('一级B--onReady')},/*** 生命周期函数--监听页面显示*/onShow() {console.log('一级B--onShow')},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log('一级B--onHide')},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log('一级B--onUnload')},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

②二级跳二级

aa.WXML
<!--pages/aa/aa.wxml-->
<text>我是二级aa</text>
<button bindtap="aatobb">二级aa页面跳转二级bb页面</button>
<button bindtap="aatoA">二级aa页面跳转一级A页面</button>
aa.JS
// pages/aa/aa.js
Page({/*** 页面的初始数据*/data: {},aatoA :function(){wx.switchTab ({url:"/pages/A/A",})},aatobb:function(){wx.navigateTo({url:"/pages/bb/bb",})},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log('二级aa--onLoad')},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log('二级aa--onReady')},/*** 生命周期函数--监听页面显示*/onShow() {console.log('二级aa--onShow')},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log('二级aa--onHide')},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log('二级aa--onUnload')},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
bb.WXML
<!--pages/bb/bb.wxml-->
<text>我是二级bb</text>
<button bindtap="bbtowh">二级bb页面打开更深的wh页面</button>
bb.JS
// pages/bb/bb.js
Page({/*** 页面的初始数据*/data: {},bbtowh:function(){wx.navigateTo({url:"/pages/wh/wh",})},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log('二级bb--onLoad')},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log('二级bb--onReady')},/*** 生命周期函数--监听页面显示*/onShow() {console.log('二级bb--onShow')},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log('二级bb--onHide')},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log('二级bb--onUnload')},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

③一级跳二级

代码在上面的①②中

④二级跳一级

代码在上面的①②中

⑤深层次页面直接跳一级

wh.WXML
<!--pages/wh/wh.wxml-->
<text>pages/wh/wh.wxml</text>
<view> {{message}} </view>
<view wx:for="{{huihui}}"> {{item.name}} </view>
<view wx:if="{{view == '1'}}"> 王辉 </view>
<view wx:elif="{{view == '2'}}"> 光军 </view>
<view wx:else="{{view == '3'}}"> 辉辉 </view>
<template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}},AllName:{{firstName}}{{lastName}}</view>
</template><template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template><button bindtap="whtoA">wh页面直接到一级A</button>
wh.JS
// pages/wh/wh.js
Page({/*** 页面的初始数据*/data: {message: 'Hello 辉辉!',huihui: [{name:'辉辉1'},{name:'辉辉2'}],view: '3',staffA: {firstName: '王', lastName: '辉'},staffB: {firstName: '夏', lastName: '威'},staffC: {firstName: '辉', lastName: '辉'}},whtoA :function(){wx.switchTab ({url:"/pages/A/A",})},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log('深层次页面wh--onLoad')},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log('深层次页面wh--onReady')},/*** 生命周期函数--监听页面显示*/onShow() {console.log('深层次页面wh--onShow')},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log('深层次页面wh--onHide')},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log('深层次页面wh--onUnload')},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

⑥返回上一次所打开的页面

3.结论

▲一级菜单不会被销毁只会隐藏

▲深二级菜单跳浅二级菜单深的会销毁（d->c,d会被销毁）

▲浅二级菜单跳深二级菜单只会被隐藏（c->d,c会隐藏）

▲隔代跳级中间的所有页面会被销毁

好啦，今天的分享就到这了，希望能够帮到你呢！😊😊 

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

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

相关文章

Python学习六

Python学习六

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…
阅读更多...
AnolisOS升级SSH，不升级SSL

AnolisOS升级SSH，不升级SSL

由于ssh有漏洞需要升级&#xff0c;但是为了最小化升级不影响ssl&#xff0c;因为ssl里面带了加密库&#xff0c;系统中很多核心服务的加密都是用ssl进行加密的&#xff08;像网络服务&#xff0c;系统用户登录等&#xff09;&#xff0c;如果ssl升级出现不兼容&#xff0c;就可…
阅读更多...
Java实现B树

Java实现B树

1.介绍 B树是一种自平衡的搜索树数据结构&#xff0c;常用于数据库和文件系统中的索引结构。它具有以下好处和功能&#xff1a; 高效的查找操作&#xff1a;B树的特点是每个节点可以存储多个关键字&#xff0c;并且保持有序。通过在节点上进行二分查找&#xff0c;可以快速定位…
阅读更多...
260. 只出现一次的数字 III

260. 只出现一次的数字 III

给你一个整数数组 nums&#xff0c;其中恰好有两个元素只出现一次&#xff0c;其余所有元素均出现两次。 找出只出现一次的那两个元素。你可以按 任意顺序 返回答案。 你必须设计并实现线性时间复杂度的算法且仅使用常量额外空间来解决此问题。 示例 1&#xff1a; 输入&…
阅读更多...
计算机基础知识32

计算机基础知识32

Socket抽象层(socket编程) # Socket是在应用层和传输层之间的一个抽象层&#xff0c;它把TCP/IP层复杂的操作抽象为几个简单 的接口供应用层调用已实现进程在网络中通信 socket () 对象 bind () 函数来绑定 listen () 监听&#xff0c;等别人电话 accept&#xff08;&#…
阅读更多...
AI电销机器人好不好用关键是什么？

AI电销机器人好不好用关键是什么？

影响AI电销机器人是否好用的两个因素分别是&#xff0c;识别系统以及线路。 有很多电销企业都想找一个好用的AI电销机器人&#xff0c;可是什么样的机器人才是好用的机器人呢?有哪些因素会影响AI电销机器人好不好用呢? 添加图片注释&#xff0c;不超过 140 字&#xff08;可选…
阅读更多...
qt中json类

qt中json类

目录 QJsonValue QJsonObject QJsonArray QJsonDocument 案例&#xff1a; Qt 5.0开始提供了对Json的支持&#xff0c;我们可以直接使用Qt提供的Json类进行数据的组织和解析&#xff0c;下面介绍4个常用的类。 QJsonValue 该类封装了JSON支持的数据类型。 布尔类型&#xf…
阅读更多...
【Power BI】Power BI 入门指南：版本、下载和报表创建的步骤

【Power BI】Power BI 入门指南：版本、下载和报表创建的步骤

文章目录 一、前言二、了解 Power BI 版本三、下载 Power BI Desktop四、如何开始使用 Power BI Desktop五、在 Power BI Desktop 中创建报表六、文末总结 一、前言 Power BI 是微软于 2013 年推出的产品&#xff0c;为一款商业智能与数据可视化工具。它通过引人注目的视觉效果…
阅读更多...
[Linux 基础] Linux编辑器Vim，你值得拥有

[Linux 基础] Linux编辑器Vim，你值得拥有

文章目录 1、Linux 软件包管理器 yum1.1 什么是软件包1.2 如何安装软件1.3 如何卸载软件 2、vim的使用2.1 vim的安装和配置2.2 vim的基本概念2.3 vim的基本操作 3、vim正常模式命令集4、vim注释与去注释5、Liunx编辑器-gcc/g使用5.1 如何使用gcc编译c程序5.2 gcc的翻译过程5.2.…
阅读更多...
Python-pyecharts和pandas库

Python-pyecharts和pandas库

目录 pyecharts库 pandas库 示例1 示例2 pyecharts库 pyecharts是一个基于Python的交互式数据可视化库&#xff0c;旨在帮助用户轻松地创建各种类型的图表和可视化效果。该库是在Echarts开源项目的基础上开发的&#xff0c;Echarts是一款由百度开发的优秀的数据可视化工具。…
阅读更多...
计算机网络基础（三）：IPv4编址方式、子网划分、IPv4通信的建立与验证及ICMP协议

计算机网络基础（三）：IPv4编址方式、子网划分、IPv4通信的建立与验证及ICMP协议

**IPv4地址是一个32位长的二进制数。**而这个32位二进制数又通常会表示为4个用点隔开的十进制数。那么&#xff0c;这个32位二进制数要如何通过4个十进制数表示出来呢&#xff1f; 我们在配置IPv4地址时&#xff0c;同时配置的“掩码”又有何用途&#xff1f; 1.IPv4编址方式…
阅读更多...
第 367 场 LeetCode 周赛题解

第 367 场 LeetCode 周赛题解

A 找出满足差值条件的下标 I 模拟 class Solution { public:vector<int> findIndices(vector<int> &nums, int indexDifference, int valueDifference) {int n nums.size();for (int i 0; i < n; i)for (int j 0; j < i; j)if (i - j > indexDiffe…
阅读更多...
软件测试的调用接口怎么调用，逻辑是什么？

软件测试的调用接口怎么调用，逻辑是什么？

一、什么是接口测试&#xff1f; 接口测试是测试系统组件之间接口的测试。接口主要用于检测外部系统和内部子系统之间的交互点。测试的重点是检查数据交换、传输、控制和管理过程&#xff0c;以及系统之间的相互逻辑依赖。 二、为什么要做接口测试&#xff1f; 在淘宝系统的历…
阅读更多...
Go编程：使用 Colly 库下载Reddit网站的图像

Go编程：使用 Colly 库下载Reddit网站的图像

概述 Reddit是一个社交新闻网站&#xff0c;用户可以发布各种主题的内容&#xff0c;包括图片。本文将介绍如何使用Go语言和Colly库编写一个简单的爬虫程序&#xff0c;从Reddit网站上下载指定主题的图片&#xff0c;并保存到本地文件夹中。为了避免被目标网站反爬&#xff0c…
阅读更多...
C++入门篇(3)---引用

C++入门篇(3)---引用

1.引用 你有没有被人起过外号?比如身边的朋友,喊他的时候不会叫他的全名,像我很好的朋友,我一般都喜欢叫他"阿威",而不会去称呼全名.我叫他"阿威",他还是他没有什么问题. 这里新登场的引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&am…
阅读更多...
数据结构---二叉树

数据结构---二叉树

树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 树形结构中&#xff0c;子树之间不能有交集&#xff0c;…
阅读更多...
1.Vue-在独立页面实现Vue的增删改查

1.Vue-在独立页面实现Vue的增删改查

题记 在独立页面实现Vue的增删改查&#xff0c;以下是具体的代码&#xff0c;和操作流程。 编写index.html页面 index.html文件如下&#xff1a; <!DOCTYPE html> <html> <head><title>Vue CRUD Example</title><!--在线导入vue文件-->&l…
阅读更多...
如何在自动化测试中使用MitmProxy获取数据返回？

如何在自动化测试中使用MitmProxy获取数据返回？

背景介绍 当我们在接口或UI自动化项目中&#xff0c;常常会出现这种现象——明明是正常请求&#xff0c;却无法获取到想要的数据返回。 比如&#xff1a; 场景A&#xff1a;页面是动态数据&#xff0c;第一次进入页面获取到的数据&#xff0c;和下次进入页面获取到的数据完全…
阅读更多...
ASEMI整流桥GBJ2510参数：拆析其关键性能特点

ASEMI整流桥GBJ2510参数：拆析其关键性能特点

编辑-Z 在众多的电力电子元件中&#xff0c;GBJ2510整流桥以其高效能和可靠性赢得了工业领域的广泛认可。这款设备是在电力系统、直流电源等一系列设备中不可或缺的组件。本文将详细反析GBJ2510整流桥参数的关键性能特点&#xff0c;以帮助用户更加全面地理解和使用这种电子设…
阅读更多...
Blender：制作一个变形动画

Blender：制作一个变形动画

就是一个球逐渐地变为一个立方体 首先创建一个球和一个立方体 然后把两个物体放在一起&#xff0c;放缩球&#xff0c;让球包含立方体 之后选中球&#xff0c;为其添加修改器&#xff0c;缩裹 在这里选择缩裹对象为立方体 然后在应用下拉箭头中选择“应用为形态键” 下一步选中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023