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

news2024/11/18 14:48:39

一、视图层 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.coloradmin.cn/o/1099554.html

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

相关文章

【每日一题】倍数求和

【每日一题】倍数求和

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;一次遍历 其他语言cpython3 写在最后 Tag 【一次遍历】【数组】【2023-10-17】 题目来源 2652. 倍数求和 题目解读 找出 [1. n] 范围内可以被 3、5、7 整除的所有整数之和。 解题思路 方法一&#xff1a;一次遍历 …
阅读更多...
字符串排序程序

字符串排序程序

字符串排序程序&#xff0c;对一个字符串中的数值进行从小到大的排序 例如排序前给定的字符串为" 20 78 9 -7 88 36 29" 排序后&#xff1a; -7 9 20 29 36 78 88 要求使用包装类对数值类型的字符串转换成整型进行排序。 public class StringSort {public static vo…
阅读更多...
【MySQL】MySQL的安装

【MySQL】MySQL的安装

MySQL安装路径&#xff1a;MySQL 安装MySQL 1、都是选择红框 2、选择社区版 3、 4、 5、确保安装路径中没有中文字符&#xff0c;否则可能会出现问题 &#xff1b; 以上操作之后就会生成这个&#xff0c;再双击它&#xff1b; 6、点击next&#xff0c;也许每个人进入的界面不…
阅读更多...
ICMP协议(二)

ICMP协议(二)

一 ping工作原理 ① 为什么ping不通 "ping不通分为两类" 1) 请求没有到目标服务器2) 请求到了目标服务器,但是没有回包 "常见原因" 1、对方关机/ip不存在备注&#xff1a; ping同网段不存在的ip地址2、网段不同,通过路由也无法找到3、防火墙 [安全组…
阅读更多...
Springboot结合Mockito写单元测试实践和原理

Springboot结合Mockito写单元测试实践和原理

文章目录 前言一、使用最佳实践使用场景SpyBean失效场景解决Mock失效的问题避免FactoryBean的实现方式使用MockBean&#xff0c;但是要指定name 个人推荐 二、原理1. MockBean2.SpyBean方法调用 总结 前言 相信看我博客的都是javaer&#xff0c;工作中一般都是使用Springboot框…
阅读更多...
分类算法-逻辑回归与二分类

分类算法-逻辑回归与二分类

1、逻辑回归的应用场景 广告点击率是否为垃圾邮件是否患病金融诈骗虚假账号 看到上面的例子&#xff0c;我们可以发现其中的特点&#xff0c;那就是都属于两个类别之间的判断。逻辑回归就是解决二分类问题的利器。 2、 逻辑回归的原理 2.1 输入 逻辑回归的输入就是一个线性…
阅读更多...
Flutter 知识集锦 | 监听与通知 ChangeNotifier

Flutter 知识集锦 | 监听与通知 ChangeNotifier

theme: cyanosis 1. 数据的提供者与消费者 今天想要和大家好好聊聊 ChangeNotifier 这个东西&#xff0c;从名字上来看它由 change(改变) 和 Notifier(通知器) 构成。打个比方&#xff1a; 有三个铁粉跟我说: "你发新文章的时候跟我说一声"。 之后我发布文章后&…
阅读更多...
基于nodejs+vue网课学习平台

基于nodejs+vue网课学习平台

各功能简要描述如下: 1个人信息管理:包括对学生用户、老师和管理员的信息进行录入、修改&#xff0c;以及老师信息的审核等 2在库课程查询:用于学生用户查询相关课程的功能 3在库老师查询:用于学生用户查询相关老师教学的所有课程的功能。 4在库学校查询:用于学生用户查询相关学…
阅读更多...
怎么把flac音频变为mp3？

怎么把flac音频变为mp3？

怎么把flac音频变为mp3&#xff1f;FLAC音频格式在许多平台和应用程序中都得到支持和应用。FLAC音频格式被广泛支持和应用。许多平台、设备和应用程序都支持FLAC格式&#xff0c;如Windows、macOS和Linux操作系统、各种音乐播放器软件、智能手机和平板电脑、在线音乐平台和流媒…
阅读更多...
Kaggle - LLM Science Exam（三）：Wikipedia RAG

Kaggle - LLM Science Exam（三）：Wikipedia RAG

文章目录 一、赛事概述1.1 OpenBookQA Dataset1.2 比赛背景1.3 评估方法和代码要求1.4 比赛数据集1.5 优秀notebook 二、 [EDA, Data gathering] LLM-SE ~ Wiki STEM | 1k DS2.1 Data overview2.2 Data gathering 三、如何高效收集数据3.1 概述3.2 与训练数据关联的维基百科类别…
阅读更多...
Q-learning如何与ABC等一些元启发式算法能够结合在一起？

Q-learning如何与ABC等一些元启发式算法能够结合在一起？

1、出现的问题 Q-learning能和元启发式算法&#xff08;如ABC、PSO、GA、SSA等&#xff09;结合在一起&#xff0c;实现工作流调度问题&#xff1f; Q-learning和ABC (Artificial Bee Colony) 等元启发式算法可以结合在一起以解决特定类型的问题。Q-learning是一种强化学习算法…
阅读更多...
http代理有什么好处，怎么通过http代理服务安全上网呢？

http代理有什么好处，怎么通过http代理服务安全上网呢？

通过http代理上网是一种常见的网络代理方式。http代理是指通过代理服务器进行网络连接&#xff0c;以实现隐藏自己的真实IP地址、保护个人隐私等目的。下面我们将介绍通过http代理上网的好处以及如何使用http代理服务来安全上网。 一、通过http代理上网的好处 1. 保护个人隐私 …
阅读更多...
LabVIEW建立生产者消费者

LabVIEW建立生产者消费者

LabVIEW建立生产者消费者 生产者/消费者设计模式由并行循环组成&#xff0c;这些循环分为两类&#xff1a;生产者循环和消费者循环。生产者循环和消费者循环间的通信可以使用队列或通道连线来实现。 队列 LabVIEW内置的队列操作VI可在函数选板>>数据通信>>队列操…
阅读更多...
Stable Diffusion绘画

Stable Diffusion绘画

正向提示词&#xff1a; 1girl, brown hair, multicolored hair, green eyes, maid, maid headdress, maid apron, cherry blossoms, sunbeam, wallpaper, 一个女孩&#xff0c;棕色头发&#xff0c;五彩头发&#xff0c;绿色眼睛&#xff0c;女仆&#xff0c;女仆头饰&#xf…
阅读更多...
一个字符串模式匹配开源库

一个字符串模式匹配开源库

1 简介 theFuzz 是一个用于模糊字符串匹配和相似度计算的强大工具。它可以帮助我们在处理文本数据时进行模糊匹配和字符串比较&#xff0c;例如拼写纠正、字符串相似度计算和模糊搜索等。 2 基本原理 theFuzz 库的基本原理是使用不同的算法来计算字符串之间的相似度。其中最常用…
阅读更多...
医疗机器人技术研究现状

医疗机器人技术研究现状

医疗机器人技术是近年来快速发展的领域&#xff0c;它在医疗领域的应用已经取得了显著的成果。本文对医疗机器人技术的研究现状进行了综述&#xff0c;包括机器人手术、康复机器人、辅助诊断和治疗机器人等方面的研究进展。同时&#xff0c;本文还对医疗机器人技术的挑战和未来…
阅读更多...
【python高级】设计模式、类工厂、对象工厂

【python高级】设计模式、类工厂、对象工厂

一、说明 最近试着读Design pattern&#xff0c; 不过有些概念实在太抽象了&#xff0c; 整理一下自己所学抽象工厂的精神&#xff0c;就是要有abstract class&#xff08;not implement&#xff09;&#xff0c;而所有不同种类的对象&#xff0c;都是继承这个abstract class&a…
阅读更多...
Ubuntu 环境配置 Minecraft 基岩版服务器

Ubuntu 环境配置 Minecraft 基岩版服务器

文章目录 Part 1 搭建服务器Part 2 配置服务器Part 3 管理服务器一、手动备份服务器二、手动恢复服务器备份三、升级服务器 Part 1 搭建服务器 更新软件包信息 sudo apt-get update sudo apt-get upgrade安装所需工具 sudo apt-get vim sudo apt-get install zip sudo apt-g…
阅读更多...
数字孪生在制造运行管理（MOM）的七大应用场景

数字孪生在制造运行管理（MOM）的七大应用场景

数字经济时代&#xff0c;数字孪生作为实现各行各业智能化、数字化的重要手段之一&#xff0c;受到了各方的广泛重视。随着各项关键使能技术的不断发展&#xff0c;数字孪生的应用价值有望得到进一步释放。这些关键使能技术包括建模、渲染、仿真、物联网、虚拟调试、可视化等&a…
阅读更多...
《机器人学导论》——探究未来世界的奇妙之旅

《机器人学导论》——探究未来世界的奇妙之旅

你是否感到生活变得越来越便利、智能&#xff1f;是的&#xff0c;这些都与机器人技术的发展密不可分。而想要更深入地了解机器人技术&#xff0c;一本好的书籍是必不可少的。那么&#xff0c;今天作者要向大家推荐的就是这样一本优秀的机器人学大作——《机器人学导论》。 《…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023