小程序框架语法详解以及页面生命周期的代码预演

news2024/12/25 22:07:24

目录

一、框架简介

二、视图层

2.1 简介

2.2 WXML语法演示

2.2.1 数据绑定

2.2.2 列表渲染

2.2.3 条件渲染

2.2.4 模板

2.3 事件系统

2.4 页面一级菜单展示及切换

2.5 a页面跳b页面界面内部按钮演示

2.6 a页面跳c页面(不在一级菜单内的页面)

三、页面生命周期

3.1 详解

3.2 图解

3.3 代码预演

3.3.1 一级跳一级

3.3.2 一级跳二级

3.3.3 二级跳二级

3.3.4 页面隔代跳转

3.4 代码预演结果总结

四、收获


一、框架简介

微信小程序框架是一种开发小程序的基础结构,它提供了一组规范和工具,用于构建、管理和运行微信小程序。微信小程序框架的主要作用是简化小程序开发过程,提供一种结构化的方式来组织代码,使开发者能够更轻松地创建小程序应用。以下是关于微信小程序框架的一些重要信息:

  1. 基本架构:微信小程序框架通常由三个主要部分组成:

    • 逻辑层:这是小程序的核心,用于处理小程序的业务逻辑。逻辑层使用JavaScript编写,并包括页面逻辑、网络请求、数据处理等。
    • 视图层:视图层负责渲染小程序的界面,通常使用WXML(类似于HTML)和WXSS(类似于CSS)来定义页面结构和样式。
    • 配置:小程序的全局配置,包括小程序的名称、页面路径、tabBar等信息。
  2. 双向绑定:微信小程序框架支持数据的双向绑定,这意味着数据的变化会自动更新到页面上,而页面上的操作也可以反馈到数据模型中。这有助于实现实时的界面更新。

  3. 事件处理:框架提供了丰富的事件处理机制,允许开发者为页面元素绑定事件处理函数,例如点击事件、输入事件等。

  4. 小程序生命周期:框架定义了小程序的生命周期,包括onLoad、onShow、onReady、onHide、onUnload等生命周期函数,开发者可以在这些函数中执行特定的操作。

  5. 模块化开发:微信小程序框架支持模块化开发,允许开发者将代码划分为模块,提高了代码的可维护性和重用性。

  6. 网络请求:框架提供了内置的网络请求API,用于与服务器通信,获取数据并更新页面。

  7. 本地存储:小程序框架允许开发者使用本地存储功能,将数据保存在用户的设备上,以提高小程序的性能和用户体验。

  8. 第三方库支持:微信小程序框架支持使用第三方JavaScript库,以扩展小程序的功能和效率。

  9. 跨平台开发:微信小程序框架可以在不同平台上运行,包括iOS、Android和Web,这使得开发者可以更轻松地跨平台开发应用。

总的来说,微信小程序框架为开发者提供了一种方便、高效的方式来创建小程序应用。开发者可以使用框架提供的工具和规范来管理小程序的结构和功能,从而快速开发出具备良好用户体验的小程序应用。

二、视图层

2.1 简介

微信小程序框架的视图层是小程序应用的界面渲染部分,负责展示用户界面和处理用户交互。以下是有关微信小程序框架视图层的简介:

  1. WXML(WeiXin Markup Language):WXML是一种类似于HTML的标记语言,用于定义小程序的页面结构。与HTML不同,WXML更加精简,包含少量标签和属性,专注于描述页面的结构。在WXML中,你可以定义视图元素、组件、数据绑定等。

  2. WXSS(WeiXin Style Sheet):WXSS是一种类似于CSS的样式定义语言,用于控制小程序页面的样式。你可以在WXSS中定义样式规则,包括颜色、字体、布局等,然后将这些规则应用于WXML中的元素。微信小程序框架支持类似CSS的选择器,使样式定义更灵活。

  3. 组件:微信小程序框架提供了一系列内置组件,如viewtextbuttonimage等,用于构建页面元素。除了内置组件,你还可以创建自定义组件,以便在不同页面中重复使用相同的功能或界面元素。

  4. 数据绑定:视图层支持数据绑定,这意味着你可以将数据绑定到页面上,实现数据的动态展示。通过使用双花括号{{}},你可以将页面的元素和数据模型关联起来。当数据模型中的数据发生变化时,页面会自动更新以反映这些变化。

  5. 事件处理:你可以在视图层中定义事件处理函数,以响应用户的交互操作,如点击事件、触摸事件等。事件处理函数通常使用bindcatch前缀来绑定到相应的组件上。

  6. 模板和条件渲染:微信小程序框架支持模板的使用,你可以将一组相同结构的元素封装为一个模板,并在不同位置引用它们,提高代码的重用性。另外,你可以使用条件渲染来控制在不同条件下渲染不同的内容。

  7. 页面栈管理:微信小程序框架维护了一个页面栈,允许你在不同页面之间进行导航。你可以通过wx.navigateTowx.redirectTo等API来管理页面栈,实现页面之间的切换和导航。

  8. 动画效果:视图层支持添加动画效果,通过wx.createAnimation和动画API来实现元素的平移、旋转、缩放等动画效果,增强用户体验。

总的来说,微信小程序框架的视图层提供了丰富的工具和功能,用于构建小程序的用户界面,实现数据展示、用户交互和界面美化。通过合理使用WXML、WXSS、组件和事件处理,开发者可以创建各种类型的小程序应用,从简单的信息展示页面到复杂的交互应用。

2.2 WXML语法演示

在进行代码演示前我们先新建四个今天要用的新页面,在昨天的代码上加上新的代码,如下:

 "pages/a/a",
    "pages/b/b",
    "pages/c/c",
    "pages/d/d",

紧接着开发工具会自动生成目录,如下:

2.2.1 数据绑定

在a.wxml文件中加入以下代码,如下:

<!--pages/a/a.wxml-->
<view>{{message}}</view>

然后在a.js中data下加入message代码,如下:

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

模拟器展示效果如下:

2.2.2 列表渲染

在a.wxml中加入以下代码,如下:

<view wx:for="{{array}}"> {{item}} </view>

在a.js中加入以下代码,如下:

array:[1,2,3,4,5],

模拟器展示效果如下:

但是我们写小程序一般在数组中放的都是对象,那么代码应该如下:

在a.js加入:

users: [{ id: 1, name: '刘三金' }, { id: 2, name: '疯翰林' }, { id: 3, name: '丧表锅' }]

在a.wxml加入:

<view wx:for="{{users}}" wx:key="id">用户编号:{{item.id}};用户姓名:{{item.name}};</view>

模拟器展示效果如下:

2.2.3 条件渲染

在a.wxml中加入以下代码,如下:

<!--wxml-->
<view wx:if="{{view == '1'}}"> "生命如同骑自行车,想要保持平衡就得不断前进。" — 阿尔伯特·爱因斯坦 </view>
<view wx:elif="{{view == '2'}}"> "行动胜过千言万语。" — 狄奥尼修斯 </view>
<view wx:else="{{view == '3'}}"> "时刻保持好奇心,保持学习的态度。" — 斯蒂芬·霍金 </view>

在a.js中data代码块下加入view,如下:

view:3

条件渲染演示效果如下:

2.2.4 模板

在a.wxml中加入以下代码,如下:

<!--wxml-->
<template name="staffName">
  <view>
    炙热沙城II: {{firstName}}, 炼狱小镇: {{lastName}}
  </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

在a.js中data代码块下加入以下代码,如下:

 staffA: {firstName: 'B1', lastName: '锅炉房'},
    staffB: {firstName: 'XBOX', lastName: '旋梯'},
    staffC: {firstName: '沙地', lastName: '连接'}

模拟器演示效果如下:

2.3 事件系统

事件使用:首先在a.wxml中加入以下代码:

<view id="tapTest" data-hi="找不到我吧" data-meetingSteate="1" bindtap="tapName"> 点我!!! </view>

然后在a.js中加入:

 tapName: function(event) {
    console.log(event)
  },

模拟器效果展示如下:

那么当我们想拿到data-hi以及data-meetingSteate中的值时,我们可以进行以下操作:

在tapName代码块下加入:

console.log(event.target.dataset);

模拟器展示效果如下:

2.4 页面一级菜单展示及切换

参考微信开发文档,全局配置进行代码优化,如下:

在app.json中加入以下代码,如下:

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/a/a",
      "text": "a页面"
    }, {
      "pagePath": "pages/b/b",
      "text": "b页面"
    }]
  },

然后把主页面挪到所有页面最上方,如下:

紧接着我们通过模拟器观看效果,如下:

这样我们的小程序页面一级菜单及切换就完成了。 那么假如我们现在还有一个c页面,并不在一级菜单栏中,又该如何跳转呢?这就牵扯到生命周期了,下面听博主娓娓道来。

2.5 a页面跳b页面界面内部按钮演示

在a.wxml中加入以下代码:

<button bindtap="atob">a页面跳b页面</button>

在a.js中加入以下代码:

atob:function() {
    wx.switchTab({
      url: '/pages/b/b',
    })
  },

然后保存重新编译代码打开模拟器查看演示效果,如下:

2.6 a页面跳c页面(不在一级菜单内的页面)

在a.wxml中加入按钮代码如下:

<button bindtap="atoc">a页面跳c页面</button>

在a.js中加入以下代码,如下:

 atoc:function() {
   wx.navigateTo({
     url: '/pages/c/c',
   })
  },

模拟器展示如下:

接下来就是生命周期的理解了。

三、页面生命周期

3.1 详解

微信小程序的逻辑层生命周期是指在小程序的运行过程中,逻辑层(JavaScript 文件)中的不同生命周期函数被调用的顺序。这些生命周期函数允许你在不同的时刻执行特定的操作,以响应小程序的生命周期事件。以下是微信小程序逻辑层的主要生命周期函数及其调用顺序:

  1. onAppLaunch(options):当小程序初始化启动时调用,只在小程序第一次启动时触发。

  2. onLaunch(options):当小程序初始化启动时调用,包括首次进入小程序和后台切前台。

  3. onShow(options):当小程序启动,或从后台切前台时调用,可以获得进入小程序的路径、场景值等信息。

  4. onHide():当小程序从前台切入后台时调用。

  5. onError(error):当小程序发生脚本错误或 API 调用失败时调用,可以用于监测和上报错误。

  6. onPageNotFound(options):当小程序页面不存在时触发,可以用于自定义页面不存在时的行为。

  7. onUnhandledRejection:当 Promise 被 reject 且没有错误处理函数时,会触发此函数。

  8. onThemeChange:当系统主题变化时,触发此函数。

除了上述的生命周期函数,逻辑层还可以定义页面级别的生命周期函数,这些函数通常在对应的页面文件中定义。例如:

  1. onLoad(options):在页面加载时触发,可以获得页面跳转时传递的参数。

  2. onShow():当页面显示时触发。

  3. onReady():当页面初次渲染完成时触发,表示页面已经准备就绪。

  4. onHide():当页面从前台切入后台时触发。

  5. onUnload():当页面被销毁时触发,如页面被关闭或切换到其他页面。

这些生命周期函数允许你在不同的时机执行代码,以实现特定的功能和逻辑。理解这些生命周期函数的调用顺序对于开发小程序非常重要,因为它们决定了何时执行特定的操作,如数据加载、页面渲染、事件绑定等。

3.2 图解

官方图解生命周期:

3.3 代码预演

页面跳转的几种情况罗列:

  1. 一级跳一级
  2. 一级跳二级
  3. 二级跳二级
  4. 二级跳一级(通过js的路由方式去跳转页面)
  5. 页面隔代跳转 (即从a-b-c-d-a,从a页面跳到b页面依次跳转最后跳到d页面,然后从d页面直接跳转回a页面,这种情况下b页面跟c页面的数据到底会不会丢失?)

然后我们把四个界面的js页面中生命周期函数用console.log打印出来,如下:

 /**
   * 生命周期函数--监听页面加载
   */
  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");
  },

3.3.1 一级跳一级

具体操作如下:

可以看到我们一级菜单跳一级菜单出发了三个生命周期函数,分别是:

index—>a

a.onLoad,a.onShow,a.onReady

a—>b

a.onHide,b.onLoad,b.onShow,b.onReady

3.3.2 一级跳二级

具体效果如下:

a—>c(一级跳二级)

a.onHide,c.onLoad,c.onShow,c.onReady

c—>a(二级返回一级)

c.onUnload,a.onShow

3.3.3 二级跳二级

为了演示需求,我们需要在二级菜单(即c页面添加按钮进行跳转),添加的代码如下:

在c.wxml中加入以下代码:

<button bindtap="ctod">c页面跳d页面</button>
<button bindtap="ctob">c页面跳b页面</button>

在c.js中加入以下代码,如下:

 ctod:function() {
    wx.navigateTo({
      url: '/pages/d/d',
    })
  },
  ctob:function() {
   wx.switchTab({
     url: '/pages/b/b',
   })
  },

添加完之后我们就可以进行代码预演了,模拟器演示如下:

c—>d

c.onHide,d.onLoad,d.onShow,d.onReady

d—>c

d.onUnload,c.onShow

c—>a

c.onUnload,a.onShow

3.3.4 页面隔代跳转

模拟器代码预演操作如下:

a—>c—>d—>a

d.onUnload,c.onUnload,a.onShow

3.4 代码预演结果总结

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

四、收获

学习小程序框架页面生命周期是非常重要的,因为它们决定了小程序页面在不同阶段执行的操作。页面生命周期函数允许你在不同的时间点执行特定的逻辑,以确保你的小程序页面能够按照预期工作。

以下是一些关于小程序页面生命周期的收获:

通过充分理解这些生命周期函数,你可以更好地掌握小程序页面的开发和控制页面的行为。你可以在不同的生命周期函数中执行不同的操作,确保页面能够响应用户的操作和事件,以提供更好的用户体验。同时,你还可以利用生命周期函数来处理资源管理和性能优化,以确保小程序的流畅运行。


最后小程序框架语法详解以及页面生命周期的代码预演就到这里,祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

 

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

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

相关文章

基于SpringBoot的在线小说阅读平台系统

基于SpringBoot的在线小说阅读平台系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 个人中心 登录界面 管理员界面 摘要 基于Spring Boot的在线小说阅读…

【M1-Java】讲讲 StringBuffer和StringBuilder区别

StringBuffer和StringBuilder区别 开头&#xff1a;首先&#xff0c;StringBuffer和StringBuilder都是用于存储或者修改拼接字符串的&#xff0c;与String类似。 来源:都继承AbstractStringBuilder类。初始容量为16的字符串缓冲区。 字符修改上的区别: ①和 String 类不同的…

安全测试概述和用例设计

一、安全测试概述 定义&#xff1a;安全测试是在软件产品开发基本完成时&#xff0c;验证产品是否符合安全需求定义和产品质量标准的过程。 概念&#xff1a;安全测试是检查系统对非法侵入渗透的防范能力。 准则&#xff1a;理论上来讲&#xff0c;只要有足够的时间和资源&a…

Java中,对象一定在堆中分配吗?

在我们的日常编程实践中&#xff0c;我们经常会遇到各种类型的对象&#xff0c;比如字符串、列表、自定义类等等。这些对象在内存中是如何存储的呢&#xff1f; 你可能会毫不犹豫地回答&#xff1a;“在堆中&#xff01;”如果你这样回答了&#xff0c;那你大部分情况下是正确…

深入理解Scrapy

Scrapy是什么 An open source and collaborative framework for extracting the data you need from websites. In a fast, simple, yet extensible way. Scrapy是适用于Python的一个快速、简单、功能强大的web爬虫框架&#xff0c;通常用于抓取web站点并从页面中提取结构化的数…

开源六轴机械臂myCobot 280末端执行器实用案例解析

Intrduction 大家好&#xff0c;今天这篇文章的主要内容是讲解以及使用一些myCobot 280 的配件&#xff0c;来了解这些末端执行器都能够完成哪些功能&#xff0c;从而帮助大家能够正确的选择一款适合的配件来进行使用。 本文中主要介绍4款常用的机械臂的末端执行器。 Product m…

安防监控系统EasyCVR视频汇聚平台设备树收藏按钮的细节优化

视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#…

使用allure如何生成自动化测试报告 ?一文详解allure的使用 。

网上介绍allure报告的很多 &#xff0c;但个人总感觉还是不够整体 &#xff0c;不够详细 &#xff0c;所看到的都是局部 。故本人花了些时间 &#xff0c;将这个allure详细的整理了一遍 。整体且涉及每个细节 。 1.allure介绍 它是一个生成HTML测试报告的工具包 使用java开发…

14.6 Socket 应用结构体传输

当在套接字编程中传输结构体时&#xff0c;可以将结构体序列化为字符串&#xff08;即把结构体的所有成员打包成一个字符串&#xff09;&#xff0c;然后将字符串通过套接字传输到对端&#xff0c;接收方可以将字符串解析为结构体&#xff0c;然后使用其中的成员数据。这种方法…

如何提高企业工作微信的管理效率?

微信作为一款拥有数亿用户的软件&#xff0c;其使用频率在全国范围内居高不下。随着企业的不断发展&#xff0c;微信在工作中的应用也变得越来越广泛。为了更好地服务客户并提升业务效益&#xff0c;企业通常会为新入职员工配置工作微信以便于业务沟通和客户服务。然而&#xf…

推荐系统离线评估方法和评估指标,以及在推荐服务器内部实现A/B测试和解决A/B测试资源紧张的方法。还介绍了如何在TensorFlow中进行模型离线评估实践。

文章目录 &#x1f31f; 离线评估&#xff1a;常用的推荐系统离线评估方法有哪些&#xff1f;&#x1f34a; 1. RMSE/MSE&#x1f34a; 2. MAE&#x1f34a; 3. Precision/Recall/F1-score&#x1f34a; 4. Coverage&#x1f34a; 5. Personalization&#x1f34a; 6. AUC &…

ChatGPT当导购员!全球最大超市,全面应用生成式AI

全球最大连锁超市沃尔玛&#xff08;Walmart&#xff09;在官网宣布&#xff0c;将在电商平台试用3款生成式AI&#xff0c;帮助用户改善购物体验提升效率。 据悉&#xff0c;沃尔玛使用了一种类ChatGPT的产品&#xff0c;可根据文本提示自动生成购物建议、搜索建议和评论摘要等…

客流人数管理新趋势:景区客流采集分析系统的功能特点

随着旅游业的蓬勃发展&#xff0c;越来越多的人选择前往景区进行休闲和旅游。然而&#xff0c;人流量的增加也给景区管理带来了一系列的挑战。为了更好地管理和运营景区&#xff0c;景区客流采集分析系统应运而生。 一、案例展示 二、产品卖点 该系统利用先进的人工智能算法和…

今天面了一个来华为要求月薪23K,明显感觉他背了很多面试题...

最近有朋友去华为面试&#xff0c;面试前后进行了20天左右&#xff0c;包含4轮电话面试、1轮笔试、1轮主管视频面试、1轮hr视频面试。 据他所说&#xff0c;80%的人都会栽在第一轮面试&#xff0c;要不是他面试前做足准备&#xff0c;估计都坚持不完后面几轮面试。 其实&…

IDEA初始配置

1. 详细设置 安装完IDEA之后的简单配置。 1.1 如何打开详细配置界面 1、显示工具栏 2、选择详细配置菜单或按钮 1.2 系统设置 1、默认启动项目配置 启动IDEA时&#xff0c;默认自动打开上次开发的项目&#xff1f;还是自己选择&#xff1f; 如果去掉Reopen projects on …

ABB REM615 REM611 人工智能和机器学习

ABB REM615 REM611 人工智能和机器学习 自从围绕ChatGPT的炒作开始&#xff0c;每个人都在谈论生成性AI。德国人工智能公司Aleph Alpha的ChatGPT、DALL-E或Luminous等系统今天已经能够支持文本写作、编程和设计。 Aleph Alpha在汉诺威工业博览会上更进一步:该公司将与惠普公司…

许战海战略文库|2023,小鹏危矣!蔚小理之江湖点评

摘要&#xff1a;“性价比”与“主流化”之路的竞争关键是产业链整体优势,中国拥有新能源产业链优势的整车企业,只有比亚迪和长城汽车。 1 月 18 日&#xff0c;何小鹏在小鹏汽车内部喊出“如果不破&#xff0c;小鹏只是早死和晚死的区别。要么跟大家一起足够精彩&#xff0c;要…

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

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

过关斩将法:验证输入的用户信息:

输入用户名、密码、邮箱、如果信息录入正确&#xff0c;则提示注册成功&#xff0c;否则生成异常&#xff1a; 要求&#xff1a; 用户名长度为2或3或4密码的长度为6&#xff0c;要求全是数字 提示&#xff1a;可以自行设计isDigital方法&#xff0c;否则排版则乱邮箱中包含和…

Steam余额红锁的原因,及红锁后申诉办法

安全的余额一般是通过充值卡充值获得&#xff0c;再加上交易手续费再转卖给你。一般便宜不到哪去。 但你别以为余额是安全的&#xff0c;就万事大吉了。照样有被红锁的可能性&#xff0c;比如这三种&#xff1a; 1、Steam市场巡查机制&#xff0c;红锁 平台的巡查机制和原理…