vue小程序框架(小程序框架)

上一篇文章简要介绍了小程序的特性和一些功能的预览。 如果你没有看过,请点击文章下面的相关链接。

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

首先,小程序的基本开发基于MVC,模型、视图、控制器、模型层在这里表现得不太明确,大部分情况下作为全局变量(或页面局部变量)存在,一般存在于控制器中视图由. wxml文件表示,将控制器获取的数据和wxml文件结合起来进行渲染。 视图和控制器的交互以绑定事件的形式触发控制器的每个函数的执行,大多数事件将目标节点对象作为参数传递。 数据交互可以通过响应传递值的组件或绑定事件来解决。 部分介绍开发方法。

在创建新项目时,首先会创建小程序的主要控制逻辑和配置文件。 其中包括app.js (控制applet的逻辑、根据生命周期返回函数操作、全局变量定义等)、app.json (应用程序) applet窗口和特性排列。 例如,下拉式刷新、导航栏排列和tabBar。app.wxss (样式配置)。

配置app.json文件:

根据json文件格式的规范,可以通过设置此文件来设置applet的特性。 如下图所示的文件:

必须设置此属性,才能配置pages (数组) applet的页面文件或添加新页面。

窗口:用于设置applet的窗口特性,包括背景颜色、样式、导航栏和是否启用下拉菜单更新。

在window属性中,可以使用tabs设置tabBar,如下例所示:

每个属性的含义如下:

App.js文件说明:

该文件用于注册小程序,接收方法App ()、object参数和初始化小程序。 下图:

其中,onLaunch、onShow和onHide用于响应生命周期的回退,还可以自定义全局变量和方法。

对象参数说明:

属性类型说明触发时间onLaunchFunction生命周期函数—侦听器小程序初始化小程序完成后, onLaunch (仅全局触发一次) onShowFunction生命周期函数)侦听器小程序在启动小程序时,或从后台进入后台显示。 启动onShowonHideFunction生命周期函数—听到小程序隐藏的小程序从后台进入后,onHide的其他Any开发人员可以将任意函数和数据添加到Object参数中通过this可以访问前台、后台定义。 如果用户单击左上角将其关闭,或按设备上的Home键离开微信,则小程序不会直接被销毁,而是在进入前台重新进入微信、重新打开小程序时,也不会从后台退出

只有在小程序进入后台一段时间后,或者系统资源被过度消耗时,才会实际销毁。

注册页面

上面只是整个小程序的配置注册,这里的具体页面操作是用户交互的真正载体,每个页面都存储在单独的文件夹中,便于管理,同时WAService渲染该文件夹中的页面样式文件。 每个页面由js文件控制,wxml布局,wxss样式设置。 响应生命周期的方法有“加载”、“就绪”、“启动”、“侦听程序”和“未加载”。 示例如下所示。

其中,data是页面初始数据,也是视图绑定数据的源,视图中的变量通过从data的值中查找相应的变量来替换。 程序可以通过this.data访问data的值,但不直接设定。 由于需要通知更新视图中的数据,因此如果直接设置,则在此处设置的数据将不匹配。 可以在此处使用this.setData ()方法进行设置,以接受object对象。 另外,还有一种方法叫做onPullDownRefreash。 它可以接收页面的下拉刷新操作,并用于更新数据。 wx.stopPullDownRefresh ()将停止刷新动画。

视图层

也就是说,这是关于wxml文件的操作。 WEixin标记语言(WML )是框架设计的一组标记语言,与html/xml非常相似。

以上只是简单介绍,详情请参阅文档。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注