【微信小程序】6天精准入门（第2天：小程序的视图层、逻辑层、事件系统及页面生命周期）

一、视图层 View

1、什么是视图层

  • 框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
  • 将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
  • WXML(WeiXin Markup language) 用于描述页面的结构。
  • WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
  • WXSS(WeiXin Style Sheet) 用于描述页面的样式。
  • 组件(Component)是视图的基本组成单元。

2、wxml

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。更多语法参考官网WXML | 微信开放文档。

2.1、数据绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({data: {message: 'Hello!页面一'}
})

2.2、列表渲染

<!-- 列表渲染1 -->
<view wx:for="{{array}}"> {{item}} </view>
<!-- 列表渲染2 -->
<view wx:for="{{array2}}">编号：{{item.id}}; 姓名：{{item.name}} </view>
// page.js
Page({data: {array: [1, 2, 3, 4, 5],array2: [{id:1,name:'王德法'},{id:2,name:'王老五'},{id:3,name:'西门庆'}]}
})

2.3、条件渲染

<!-- 条件渲染 -->
<view wx:if="{{view == '1'}}"> 我是1 </view>
<view wx:elif="{{view == '2'}}"> 我是2 </view>
<view wx:else="{{view == '3'}}"> 我是3</view>
// page.js
Page({data: {view: 2}
})

2.4、模板

<!-- 模板 -->
<template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template><template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({data: {staffA: {firstName: '1-1', lastName: '傻逼'},staffB: {firstName: '1-2', lastName: '二比'},staffC: {firstName: '1-3', lastName: '流弊'}}
})

很多的内容可以参考官网数据绑定、列表渲染、条件渲染、模板、引用

3、wxss

3.1、尺寸单位

  • rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

【注意】 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况，可以用 iPhone6 作为视觉稿的标准。

3.2、样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {padding:15px;
}

3.3、内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};" />
  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />

3.4、选择器

目前支持的选择器有：

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容
::beforeview::before在 view 组件前边插入内容

3.5、全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

4、WXS

WXS（WeiXin Script）是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本，丰富模板的数据预处理能力。另外， WXS 还可以用来编写简单的 WXS 事件响应函数。

从语法上看， WXS 类似于有少量限制的 JavaScript 。要完整了解 WXS 语法，请参考WXS 语法参考。

更多的内容查看官网WXS | 微信开放文档

5、事件系统

5.1、什么是事件

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息，如 id, dataset, touches。

5.2、事件的使用方式

  • 在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<!-- 事件系统 -->
<view id="tapTest" data-id="1" data-name="Weixin" bindtap="tapName"> Click me! </view>
  • 在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({tapName: function(event) {console.log(event)}
})

更多的事件系统请查看官网开发文档-视图层-事件系统

二、tabBar--配置小程序--全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

完整配置项说明请参考小程序全局配置

以下是一个包含了部分常用配置选项的 app.json ：

{"pages":["pages/index/index","pages/demo1/demo1","pages/demo2/demo2","pages/demo3/demo3","pages/demo4/demo4","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#00f","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"}, {"pagePath": "pages/demo1/demo1","text": "内容"}, {"pagePath": "pages/demo2/demo2","text": "我的"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

三、逻辑层

1、介绍

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发 JavaScript 代码的运行环境以及微信小程序的特有功能。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：

  • 增加 App 和 Page 方法，进行程序注册和页面注册。
  • 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
  • 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
  • 提供模块化能力，每个页面有独立的作用域。

注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。


 

2、页面路由

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

2.1、页面栈

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

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

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

2.2、路由方式

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

路由方式触发时机路由前页面路由后页面
初始化小程序打开的第一个页面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()

2.3、注意事项

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

2.4、实践

        我们利用的路由方式：打开新页面和Tab切换来进行实践；

        在第一个页面wxml里面添加一个按钮，并且添加方法。

<!-- 路由方式 -->
<button bindtap="A2B">A--B</button>
<button bindtap="A2C">A--C</button>

在js里面编写方法;【注意】记得查看注释，一些问题也会在里面。

// pages/demo1/demo1.js
Page({tapName: function(event) {console.log(event)},A2B: function() {// tab切换wx.switchTab({url: '/pages/demo2/demo2',})// 工具页面不能用navigateTo进行跳转 ---会报错// wx.navigateTo({//   url: '/pages/demo2/demo2',// })console.log()},A2C: function() {// navigateTo跳转--跳转下方没有选项卡wx.navigateTo({url: '/pages/demo3/demo3',})}
})

3、页面的生命周期

我们查看一下官网的开发文档给我的一个图

我们每次新建的项目里面都会有一个js文件，每个js文件里面都会有以下生命周期的方法

/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log('1.onLoad')},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log('1.onReady')},/*** 生命周期函数--监听页面显示*/onShow() {console.log('1.onShow')},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log('1.onHide')},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log('1.onUnload')},

我们在每个测试的页面进行同样的方法打印测试

跳转子菜单的情况

  • 一级跳一级
  • 一级跳二级
  • 二级跳二级
  • 二级跳一级：通常情况下不能进行跳转，当时可以利用路由的方式。
  • 页面隔代跳：A > B > C > D > A

我们可以根据以下图可以查看，更多的需要自己进行测试

需要自己进行测试可以查看上面的路由方式

2.2、路由方式

总结：

  1. 一级不会销毁
  2. 二级层级深跳到层级低的会销毁
  3. 二级层级深跳到层级高的只会隐藏
  4. 隔代中间所有页面会进行销毁

发现就到这里！感谢大家在评论区讨论！！！

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

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

相关文章

实验四：回溯算法的设计与分析

实验四：回溯算法的设计与分析

某不知名学校大二算法课实验报告 题目来自力扣 第一题&#xff1a;幂集 力扣题目链接&#xff1a;幂集 题目描述&#xff1a; 幂集。编写一种方法&#xff0c;返回某集合的所有子集。集合中不包含重复的元素。 说明&#xff1a;解集不能包含重复的子集。 示例: 输入&#xf…
阅读更多...
Leetcode刷题详解——长度最小的子数组

Leetcode刷题详解——长度最小的子数组

1. 题目链接&#xff1a;209. 长度最小的子数组 2. 题目描述&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度**。**如果不…
阅读更多...
Tang Capital宣布收购纳斯达克上市公司Rain Oncology100%股权

Tang Capital宣布收购纳斯达克上市公司Rain Oncology100%股权

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;纳斯达克上市公司Rain Oncology(Rain)宣布近期已收到Tang Capital Partners旗下的子公司Concentra Biosciences以每股1.25美元的现金收购要约。 这家临床阶段微型市值癌症治疗药物开发商的股价在消…
阅读更多...
apache shiro安全框架反序列化漏洞

apache shiro安全框架反序列化漏洞

shiro是开源安全框架&#xff0c;它干净利落地处理身份认证&#xff0c;授权&#xff0c;企业会话管理和加密。 参见文章&#xff1a;百度安全验证 用linux搭建一个环境 配置下源vi /etc/apt/sources.list 源如果是kali官方的有时候会下载不了&#xff0c;改成中科大的源 更…
阅读更多...
【Proteus仿真】【51单片机】电蒸锅温度控制系统

【Proteus仿真】【51单片机】电蒸锅温度控制系统

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用LCD1602液晶、按键开关、蜂鸣器、DS18B20温度传感器&#xff0c;液位传感器、继电器控制加热保温装置等。 主要功能&#xff1a; 系统运行后&#…
阅读更多...
英国人工智能公司【TitanML】完成280万美元融资

英国人工智能公司【TitanML】完成280万美元融资

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于英国伦敦的人工智能公司【TitanML】近期宣布已完成280万美元种子轮融资&#xff0c;该公司的产品允许机器学习团队部署大型语言模型(llm)。 本轮融资由Octopus Ventures领投&#xff0c;还…
阅读更多...
Python文件共享+cpolar内网穿透：轻松实现公网访问

Python文件共享+cpolar内网穿透：轻松实现公网访问

文章目录 1.前言2.本地文件服务器搭建2.1.Python的安装和设置2.2.cpolar的安装和注册 3.本地文件服务器的发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 数据共享作为和连接作为互联网的基础应用&#xff0c;不仅在商业和办公场景有广泛的应用&#…
阅读更多...
进程的虚拟地址空间

进程的虚拟地址空间

一、 对于C/C程序员&#xff0c;我们看到的程序中的地址&#xff0c;都不是物理地址&#xff0c;而是操作系统映射的虚拟地址/线性地址&#xff0c;每一个进程都映射了同样结构的虚拟地址空间&#xff0c;让进程以为自己在独享内存资源&#xff0c;下图是以Linux下32位操作系统…
阅读更多...
spark stream入门案例：netcat准实时处理wordCount（scala 编程）

spark stream入门案例：netcat准实时处理wordCount（scala 编程）

目录 案例需求 代码 结果 解析 案例需求&#xff1a; 使用netcat工具向9999端口不断的发送数据&#xff0c;通过SparkStreaming读取端口数据并统计不同单词出现的次数 -- 1. Spark从socket中获取数据&#xff1a;一行一行的获取 -- 2. Driver程序执行时&#xff0c…
阅读更多...
Lock使用及效率分析(C#)

Lock使用及效率分析(C#)

针对无Lock、Lock、ReadWriterLock、ReadWriterLockSlim四种方式&#xff0c;测试在连续写的情况下&#xff0c;读取的效率&#xff08;原子操作Interlocked由于使用针对int,double等修改的地方特别多&#xff0c;而且使用范围受限&#xff0c;所以本文章没有测试&#xff09; …
阅读更多...
C/C++笔试易错与高频题型图解知识点（二）—— C++部分（持续更新中）

C/C++笔试易错与高频题型图解知识点（二）—— C++部分（持续更新中）

目录 1.构造函数初始化列表 1.1 构造函数初始化列表与函数体内初始化区别 1.2 必须在初始化列表初始化的成员 2 引用&引用与指针的区别 2.1 引用初始化以后不能被改变&#xff0c;指针可以改变所指的对象 2.2 引用和指针的区别 3 构造函数与析构函数系列题 3.1构造函数与析…
阅读更多...
【LeetCode热题100】--287.寻找重复数

【LeetCode热题100】--287.寻找重复数

287.寻找重复数 方法&#xff1a;使用快慢指针 使用环形链表II的方法解题&#xff08;142.环形链表II&#xff09;&#xff0c;使用 142 题的思想来解决此题的关键是要理解如何将输入的数组看作为链表。 首先明确前提&#xff0c;整数的数组 nums 中的数字范围是 [1,n]。考虑一…
阅读更多...
【Qt控件之QDialogButtonBox】概述及使用

【Qt控件之QDialogButtonBox】概述及使用

概述 QDialogButtonBox类是一个小部件&#xff0c;它以适合当前小部件样式的布局呈现按钮。 对话框和消息框通常以符合该台界面指南的布局呈现按钮。不同的平台会有不同的对话框布局。QDialogButtonBox允许发人员向其添加按钮&#xff0c;并将自使用用户的桌面环境所适合的布局…
阅读更多...
数据结构--堆

数据结构--堆

一. 堆 1. 堆的概念 堆&#xff08;heap&#xff09;&#xff1a;一种有特殊用途的数据结构——用来在一组变化频繁&#xff08;发生增删查改的频率较高&#xff09;的数据集中查找最值。 堆在物理层面上&#xff0c;表现为一组连续的数组区间&#xff1a;long[] array &…
阅读更多...
MySQl_2

MySQl_2

目录 函数 一.字符串函数 二.数值函数 三.日期函数 四.流程控制函数 约束 多表查询 多表关系 一.内连接 二.外连接 三.自连接 四.联合查询 五.子查询 标量子查询 列子查询 行子查询 表子查询 函数 一.字符串函数 二.数值函数 SELECT LPAD(FLOOR(RAND()*1000000),…
阅读更多...
二叉树与递归的相爱相杀

二叉树与递归的相爱相杀

数据结构之二叉树 一、基于二叉树的基础操作1.二叉树的构建2.二叉树的遍历①前序遍历&#xff08;深度遍历&#xff09;②中序遍历③后序遍历④层序遍历判断一棵二叉树是否是完全二叉树&#xff08;基于层序遍历的思想&#xff09; 3.二叉树的数量问题①求二叉树结点个数②求二…
阅读更多...
PixMIM论文笔记

PixMIM论文笔记

论文名称&#xff1a;PixMIM: Rethinking Pixel Reconstruction in Masked Image Modeling 发表时间&#xff1a;2023 年 3 月 4 日 作者及组织&#xff1a;上海人工智能实验室、西蒙菲莎大学、香港中文大学 GitHub&#xff1a;https://github.com/open-mmlab/mmselfsup/tree/d…
阅读更多...
transformer_01

transformer_01

一、传统RNN存在的问题 1.序列前序太长&#xff0c;每个xi要记住前面的特征&#xff0c;而且一直在学&#xff0c;没有忘记&#xff0c;可能特征不能学的太好 2.串行&#xff0c;层越多越慢&#xff0c;难以堆叠很多层&#xff1b; 3.只能看到过去&#xff0c;不能看到未来 搞…
阅读更多...
什么是NetApp的DQP和如何安装DQP？

什么是NetApp的DQP和如何安装DQP？

首先看看什么是DQP&#xff0c;DQPDisk Qualification Package&#xff0c;文字翻译就是磁盘验证包。按照NetApp的最佳实践&#xff0c;要定期升级DQP包&#xff0c;保证对最新磁盘和磁盘扩展柜的兼容。 本文主要介绍7-mode下如何升级DQP&#xff0c;至于cluster mode另外文章…
阅读更多...
Linux Zabbix企业级监控平台+cpolar实现远程访问

Linux Zabbix企业级监控平台+cpolar实现远程访问

文章目录 前言1. Linux 局域网访问Zabbix2. Linux 安装cpolar3. 配置Zabbix公网访问地址4. 公网远程访问Zabbix5. 固定Zabbix公网地址 前言 Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。能监视各种网络参数&#xff0c;保证服务器系…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023