百度360必应搜狗淘宝本站头条
分布式事务框架shiro框架java日志框架框架图cad怎么画框架
当前位置：网站首页 > 技术文章 > 正文

微信小程序开发入门之框架结构（微信小程序开发的框架）

ccwgpt 2024-10-01 07:58 36 浏览 0 评论

上一篇简单介绍了小程序的特性以及部分功能的预览，没看过的点击文章下面的相关链接。

本文旨在介绍微信小程序的框架结构，对官方文档的解读。

首先明白一点，小程序基本开发基于MVC，即模型，视图，控制器，模型层在这里表现的不是很明显，大部分时候都以全局变量（或页面局部变量）的形式存在，一般存在与控制器中。视图在此为.wxml文件所表示的，它将控制器得到的数据和wxml文件进行组合，渲染。而视图与控制器的交互可通过绑定事件的形式触发控制器各个函数的执行，大部分事件会传递目标节点对象作为参数。数据交互可通过能传递值的组件或响应绑定事件来解决。下面分部分介绍开发方法。

新建项目，首先会建立小程序主控制逻辑与配置文件，其中包括 app.js (控制小程序逻辑，响应生命周期回掉函数操作，全局变量的定义等), app.json(小程序窗口，特性配置等，像下拉刷新，导航栏配置，tabBar等。) , app.wxss (样式配置)。

app.json文件配置：

遵循json文件格式规范，通过配置此文件可以设置小程序的特性。文件如下图：

  • pages（数组）：用于配置小程序页面文件，添加新的页面，必需配置此属性。

  • window ：用于配置小程序窗口特性，包括背景颜色，风格，导航栏，是否启用下拉刷新等。

window属性中可通过tabs配置tabBar，如下示例：

各个属性含义如下：

App.js文件说明：

此文件用于注册小程序，使用方法App()，接收object参数，初始化小程序，如下图：

其中onLaunch，onShow，onHide用于响应生命周期回掉，也可自定义全局变量及方法。

object参数说明：

属性类型描述触发时机
onLaunchFunction生命周期函数--监听小程序初始化当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShowFunction生命周期函数--监听小程序显示当小程序启动，或从后台进入前台显示，会触发 onShow
onHideFunction生命周期函数--监听小程序隐藏当小程序从前台进入后台，会触发 onHide
其他Any开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

注册页面

如果说上面的只是对整个小程序的配置注册，这里的具体的页面操作才是和用户交互的真正载体，每个页面都可单独存放一个文件夹，方便管理，同时WAService会将此文件夹中的页面样式文件进行渲染。每个页面都由js文件进行控制，wxml进行布局，wxss就是样式设置了。用于响应生命周期方法有onLoad(监听页面加载)，onReady(监听页面初次渲染完成)，onShow(监听页面显示)，onHide(监听页面隐藏)，onUnload(监听页面卸载)，示例如下：

其中data为页面初始数据，也是视图绑定数据的来源，视图中的变量都会从data的值中找到相对应的进行替换。程序中可通过this.data访问到data中的值，但不直接设置，因为需要通知更新视图中的数据，如自行直接设置，则视图数据与此设置过的数据就不一致了，这里可以通过this.setData()方法进行设置，接受object对象。还有一个方法onPullDownRefreash，用于监听页面的下拉刷新操作，可用于更新数据，wx.stopPullDownRefresh()停止刷新动画。

视图层

即wxml文件的相关操作，WXML（WeiXin Markup Language）是框架设计的一套标签语言，与html/xml有极大相似性。

以上仅简单介绍，详情查看文档。

相关推荐

滨州维修服务部“一区一策”强服务

今年以来，胜利油田地面工程维修中心滨州维修服务部探索实施“一区一策”服务模式，持续拓展新技术应用场景，以优质的服务、先进的技术，助力解决管理区各类维修难题。服务部坚持问题导向，常态化对服务范围内的13...

谷歌A2A协议和MCP协议有什么区别?A2A和MCP的差异是什么?

在人工智能的快速发展中，如何实现AI模型与外部系统的高效协作成为关键问题。谷歌主导的A2A协议（Agent-to-AgentProtocol）和Anthropic公司提出的MCP协议(ModelC...

谷歌大脑用架构搜索发现更好的特征金字塔结构，超越Mask-RCNN等

【新智元导读】谷歌大脑的研究人员发表最新成果，他们采用神经结构搜索发现了一种新的特征金字塔结构NAS-FPN，可实现比MaskR-CNN、FPN、SSD更快更好的目标检测。目前用于目标检测的最先...

一文彻底搞懂谷歌的Agent2Agent(A2A)协议

前段时间，相信大家都被谷歌发布的Agent2Agent开源协议刷屏了，简称A2A。谷歌官方也表示，A2A是在MCP之后的补充，也就是MCP可以强化大模型/Agent的能力，但每个大模型/Agent互为...

谷歌提出创新神经记忆架构，突破Transformer长上下文限制

让AI模型拥有人类的记忆能力一直是学界关注的重要课题。传统的深度学习模型虽然在许多任务上取得了显著成效，但在处理需要长期记忆的任务时往往力不从心。就像人类可以轻松记住数天前看过的文章重点，但目前的...

不懂设计?AI助力，人人都能成为UI设计师!

最近公司UI资源十分紧张，急需要通过AI来解决UI人员不足问题，我在网上发现了几款AI应用非常适合用来进行UI设计。以下是一些目前非常流行且功能强大的工具，它们能够提高UI设计效率，并帮助设计师创造出...

速来!手把手教你用AI完成UI界面设计

晨星技术说晨星技术小课堂第二季谭同学-联想晨星用户体验设计师-【晨星小课堂】讲师通过简单、清晰的语言描述就能够用几十秒自动生成一组可编辑的UI界面，AIGC对于UI设计师而言已经逐步发展成了帮助我们...

「分享」一端录制，多端使用的便捷 UI 自动化测试工具，开源

一、项目介绍Recorder是一款UI录制和回归测试工具，用于录制浏览器页面UI的操作。通过UIRecorder的录制功能，可以在自测的同时，完成测试过程的录制，生成JavaScr...

APP自动化测试系列之Appium介绍及运行原理

在面试APP自动化时，有的面试官可能会问Appium的运行原理，以下介绍Appium运行原理。Appium介绍Appium概念Appium是一个开源测试自动化框架，可用于原生，混合和移动Web应用程序...

【推荐】一个基于 SpringBoot 框架开发的 OA 办公自动化系统

如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍oasys是一个基于springboot框架开发的OA办公自动化系统，旨在提高组织的日常运作和管理...

自动化实践之:从UI到接口，Playwright给你全包了!

作者：京东保险宋阳1背景在车险系统中，对接保司的数量众多。每当系统有新功能迭代后，基本上各个保司的报价流程都需要进行回归测试。由于保司数量多，回归测试的场景也会变得重复而繁琐，给测试团队带来了巨大的...

销帮帮CRM移动端UI自动化测试实践:Playwright的落地与应用

实施背景销帮帮自2015年成立以来，移动端UI自动化测试的落地举步维艰，移动端的UI自动化测试一直以来都未取得良好的落地。然而移动互联网时代，怎样落地移动端的UI自动化测试以快速稳定进行移动端的端到端...

编写自动化框架不知道该如何记录日志吗?3个方法打包呈现给你。

目录结构1.loguru介绍1.1什么是日志？程序运行过程中，难免会遇到各种报错。如果这种报错是在本地发现的，你还可以进行debug。但是如果程序已经上线了，你就不能使用debug方式了...

聊聊Python自动化脚本部署服务器全流程(详细)

来源：AirPython作者：星安果1.前言大家好，我是安果！日常编写的Python自动化程序，如果在本地运行稳定后，就可以考虑将它部署到服务器，结合定时任务完全解放双手但是，由于自动化程序与平...

「干货分享」推荐5个可以让你事半功倍的Python自动化脚本

作者：俊欣来源：关于数据分析与可视化相信大家都听说自动化流水线、自动化办公等专业术语，在尽量少的人工干预的情况下，机器就可以根据固定的程序指令来完成任务，大大提高了工作效率。今天小编来为大家介绍几个P...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表