文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序--小程序框架

2023-10-20 08:42

关注

目录

前言:

 一.框架基本介绍

1.整体结构:

2.页面结构:

3.生命周期:

4.事件系统:

5.数据绑定:

6.组件系统:

7.API:

8.路由:

9.模块化:

10.全局配置:

二.视图层详解

1.WXML(WeiXin Markup Language):

1.1 列表渲染

1.2条件渲染

1.3 模板

2.WXSS(WeiXin Style Sheet):

3.数据绑定:

5.事件绑定:

6.全局样式和局部样式:

三.逻辑层详解

1.小程序生命周期

2.App(Object object)

参数

3.页面跳转

1.一级跳二级

2.二级跳一级

3.二级跳二级


前言:

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXMLWXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

 一.框架基本介绍

1.整体结构

小程序框架遵循一种组织结构,包括app.jsonapp.jsapp.wxss等文件。这些文件用于定义小程序的全局配置、全局逻辑和全局样式。

2.页面结构

小程序的页面由四个文件组成,分别是.json(配置文件)、.js(逻辑文件)、.wxml(模板文件)和.wxss(样式文件)。这些文件协同工作来定义页面的结构、逻辑和样式。

3.生命周期

微信小程序框架定义了一系列生命周期函数,包括onLoadonReadyonShowonHideonUnload等。这些函数用于管理页面的初始化、显示和隐藏等生命周期事件。

4.事件系统

框架提供了事件系统,支持事件绑定和处理,以实现用户交互和数据传递。

5.数据绑定

微信小程序支持双向数据绑定,开发者可以使用{{}}语法将页面上的数据与JavaScript中的数据关联,实现数据的动态展示和更新。

6.组件系统

小程序框架提供了一系列基本组件,如

 Click me! 

通过在xxx.js 中定义方法进行点击触发

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

在页面上进行点击并展示控制台信息

6.全局样式和局部样式

WXSS支持全局样式和局部样式,可以在app.wxss中定义全局样式,也可以在页面的样式文件中定义局部样式。

三.逻辑层详解

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

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

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

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

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

1.小程序生命周期

        

2.App(Object object)

注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。

参数

Object object

属性类型默认值必填说明最低版本
onLaunchfunction生命周期回调——监听小程序初始化。
onShowfunction生命周期回调——监听小程序启动或切前台。
onHidefunction生命周期回调——监听小程序切后台。  
onErrorfunction错误监听函数。
onPageNotFoundfunction页面不存在监听函数。1.9.90
onUnhandledRejectionfunction未处理的 Promise 拒绝事件监听函数。2.10.0
onThemeChangefunction监听系统主题变化2.11.0
其他any开发者可以添加任意的函数或数据变量到 Object 参数中,用 this 可以访问

onLaunch(Object object)

小程序初始化完成时触发,全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。

参数:与 wx.getLaunchOptionsSync 一致

onShow(Object object)

小程序启动,或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。

参数:与 wx.onAppShow 一致

onHide()

小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。

onError(String error)

小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。

参数:与 wx.onError 一致

onPageNotFound(Object object)

基础库 1.9.90 开始支持,低版本需做兼容处理

小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound

3.页面跳转

依次为先后执行的方法

1.一级跳二级

a->b

a:onload,onshow,onready

b:a先onHide b onload,onshow,onready

2.二级跳一级

a->c

a.onHide,c.onload,onshow,onready

c->a

c.onload,onshow

3.二级跳二级

c->d

c.onHide,d.onload,onshow,onready

d->c

d.unonload,c.onshow

c->b

c.unonload,b.onshow

小结:

一级不会销毁

二级层级深跳到层级低的会销毁

二级层级低跳到层级高的只会隐藏

隔代跳转中间所有的页面会进行销毁

今天的分享到这里就结束了,感谢各位大大的观看,各位大大的三连是博主更新的动力,感谢谢谢谢谢谢谢谢谢各位的支持!!!!! 

来源地址:https://blog.csdn.net/weixin_73320743/article/details/133857693

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯