微信小程序开发系列 (二) :微信小程序的单步调试和控制器实现步骤概述(二)

简介: 本系列的前一篇文章:微信小程序开发系列 (一) :开发环境搭建和微信小程序的视图设计与开发, 我们介绍了微信小程序的开发环境搭建,并且从一个 Hello World 级别的例子,了解了微信小程序 MVC 架构中 View 即视图层的设计基础知识。

微信小程序的控制器实现

严格意义上说,按照微信小程序官方文档里介绍的,微信小程序实际采取的是 React 和 Vue 的 MVMM 的设计思路,MVVM 是 Model-View-ViewModel 的简写,本质上是 MVC 模式的改进版。MVVM 架构中,View 的状态和行为被抽象化,从而将视图 UI 和业务逻辑分开。


简单来说就是不要再让 JavaScript 直接操控 DOM,JavaScript 只需要管理状态,然后再通过一种模板语法来描述状态和界面结构的关系即可。


下面我们来逐行分析 index.js 的代码:

//获取应用实例
const app = getApp();

getApp是微信框架的方法,返回当前小程序的应用实例。通常情况下这是微信小程序控制器执行的第一行代码:

image.png

这个应用实例的创建是在我们小程序控制器的访问范围之外由微信框架创建的,然后直接在getApp 函数里返回创建好的 app 实例:

25.png

为什么这个 app 实例如此重要,以至于放到控制器的第一行代码来创建呢?我们直接在调试器里输入 app 然后回车,能看到这个 app 对象里包含了 globalData 这个属性和很多有用的方法。

26.png

有了 app 实例后,下一步需要创建的就是 Page 实例了。这个实例代表当前小程序页面,通过构造函数 Page 进行创建。

我们同样可以在微信小程序调试器里输入 Page 然后回车查看这个构造函数的源代码,

27.png

或者直接单步调试进去学习。下图就是 Page 构造函数单步执行的情况,输入参数 e 为一个Json 对象:

28.png

这个输入参数 e 包含的内容有:

  • 我们控制器 index.js 里实现的一个 json 对象,名称为 data(作为当前微信小程序页面的数据模型,即 MVC 中的 M),如下图红色下划线所示。
  • 我们控制器 index.js 里实现的三个 JavaScript 函数,用于响应小程序上用户点击事件。

29.png总结一下,任何微信小程序,其控制器的逻辑只有两步:

  • 调用微信小程序框架提供的标准函数 getApp, 获得一个小程序实例。
  • 调用微信小程序页面构造函数 Page,初始化页面实例。我们在控制器内主要的编码逻辑,主要集中在传入这个 Page 构造函数的输入参数,即一个 JSON 对象。


而这个 JSON 对象包含的属性也只有两类:

  • 第一类是另一个 JSON 对象,作为 MVC 中的 M,即数据模型。这个 JSON 数据模型的字段被绑定到微信小程序视图的某个 UI 元素,比如 Text, Image 的对应属性,这样就自动把数据模型里的字段显示到 UI 上了。
  • 第二类是我们自己开发的 JavaScript 函数,用于响应微信小程序的用户输入,比如视图上的按钮点击事件等等。

本系列的下一篇文章会详细介绍如何用 JavaScript 函数响应微信小程序的用户点击事件。


总结

单步调试技术是程序员学习几乎任何一门技术时都必须掌握的基本技能。本文首先介绍了在微信开发者工具里进行微信小程序单步调试的步骤,接着继本教程前一系列学习了微信小程序视图设计后,继续学习微信小程序的控制器实现。


本教程前一步骤的文章:微信小程序开发系列 (一) :开发环境搭建和微信小程序的视图设计与开发。


目录
相关文章
|
19天前
|
iOS开发 开发者
iOS微信分享配置universal links步骤
iOS微信分享配置universal links步骤
242 58
ly~
|
6天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
38 6
|
6天前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
6天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
20天前
|
存储 移动开发 监控
微信支付开发避坑指南
【9月更文挑战第11天】在进行微信支付开发时,需遵循官方文档,确保权限和参数配置正确。开发中应注重安全,验证用户输入,合理安排接口调用顺序,并处理异常。上线后需实时监控支付状态,定期检查配置,关注安全更新,确保系统稳定运行。
|
26天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
6天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
2月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
下一篇
无影云桌面