1:了解迷你程序的目录结构
在目录结构中,我们分别分为两个子目录
两个:目录的解释
该目录分别包含两个子目录,分别包含一个相关页面,并且一个页面通常包含4个具有扩展名的文件(WXML,WXSS,JS,JSON),用于分别表示页面结构文件。 ,页面逻辑文件,页面样式文件和页面配置文件以及同一页面的配置文件必须具有相同的道路和文件名称
目录通常用于存储一些公共设备。 JS文件,需要时。使用JS功能时,您可以直接介绍它们以使用它们。
三:主题文件的解释和页面文件解释主题文件:
微信迷你计划的主要部分由三个文件组成,即受到批评。那是app.js app.json和app.wxss。他们的名字是固定的,他们的功能是
app.js:的逻辑文件,用于注册的全局真实列,此文件在项目中是必不可少的
app.json:配置全局设置的的公共设置文件是必不可少的,
app.wxss:的主要样式表文件类似于HTML CSS文件,而不是必要的文件
页面文件的解释:
迷你程序的页面文件通常由多个页面组成。美国页面包含4个文件。 4个文件必须具有相同的路径和文件名。当启动或重定向Mini程序时,将根据设定路径找到相应的资源。执行数据绑定
.js文件页面逻辑文件此文件在每个小程序中都是必不可少的
.wxml文件页结构文件,用于页面结构布局,数据绑定等。此文件在Mini程序中是必不可少的。
。
.json文件页面配置配件,此文件在页面中是必不可少的
四:迷你计划开发框架
小程序的开发框架显示在图中:
它分为三个部分:视图层,逻辑层和系统层
1:视图层的概念:MINA框架的视图层由WXML和WXSS编写,并且由组件显示。对于微信小程序,视图层是所有.wxml文件和.wxss文件的集合:.wxml文件用于描述页面的结构:WXSS文件用于描述页面样式。
微信小程序在逻辑层上处理数据,然后将其发送到视图层以显示它,并从视图层接收事件提要。视图层以给定样式显示数据,并将时间回到逻辑层,而数据显示为组件。
2:逻辑层的概念:逻辑层用于处理事务逻辑。对于微信小程序,逻辑层是所有.js脚本文件的集合。微信小程序处理逻辑层的数据并将其发送到视图层。同时,它接受了视图层的事件反馈。微信系开发框架的逻辑层采用书面。在此基础上,微信团队进行了适当的修改,以提高开发迷你计划的效率。主要修改包括:
逻辑层2.2.2
(1)添加#pp()和page()方法注册程序和页面
这。
你
(2)提供丰富的API,例如扫描,付款和其他特定于微信的功能
(3)每个页面都有独立的范围,并提供模块化功能。
逻辑层是通过每个页面的JS脚本文件实现的。由于在浏览器中没有运行,因此网络中的某些功能不能在中使用,例如
开发人员编写的所有代码最终都将被打包到单独的文件中,并在启动小程序时运行,直到小程序被销毁为止。
三:系统层的概念:数据层逻辑上包括页面临时数据或缓存,本地存储和网络存储以及调用
五:创建迷你程序页面的步骤
在开发人员工具中创建一个新项目,在主目录中创建一个新目录,在其中创建一个新闻目录,然后创建四个空文件:news.js news.json news.wxml news.
在每个文件夹中输入所需的代码
2:完成文件配置
的全局配置保存在全局配置文件(app.json)中。全局配置文件用于配置页面文件()的路径,设置()表示,设置网络请求AP()的超时值并配置多个配置。切换页面()等
2.3.1创建页面文件
1。根据项目主目录的新目录创建一个新目录。并在目录中创建新的空文件。
目录如下:
2。打开.wxml文件,输入要输出的文本并复制文件的名称和路径
3。打开app.json文件并输入复制的路径和文件名(“此代码将页面登录到”)
4。打开.json文件并输入代码(只需添加一对“ {}”)
5。打开.js文件并输入代码(“只需参考页面方法,以确保.js不是空的。”)
项目中每个文件的代码内容如下:
文件名代码内容
app.js空
app.json {“”:[“ //”]}
app.wxss空
.js page({})
.json {}
.wxml
配置全局文章
它可用于配置文件的路径,设置窗口表示,设置网络请求API的超时值并配置多个交换页面。
以下是每个全局配置项目的相关描述:
全局配置文件内容结构如下:
//设置页面路径;
“”:[],
//设置默认页面窗口性能
“”:[],
设置底部选项卡的性能
“”:{},
//设置网络请求API的超时值
“”:{},
//设置是否启用模式
“”:
两个:配置项目
配置项目负责设置系统样式,例如Mini 状态栏,导航栏,标题,窗口颜色等。
配置参考表:
三:配置项目
当您需要在程序的底部或顶部设置菜单栏时,可以配置配置项目以实现
配置参考表如下:
其中列表(列表)接收数组值,而数组中的每个项目都是对象
描述如下:
四:配置文章
中各种网络请求API的超时值只能通过配置项统一设置,并且不能单独设置。
配置参考表如下:
如图所示运行代码:
{ "pages": [ "pages/news/news", "pages/logs/logs" ], "window": { "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle":"black", "navigationBarTitleText": "小程序window功能演示", "backgroundColor": "#ccc", "backgroundTextStyle":"light" }, "tabBar": { "color": "#666666", "selectedColor": "#ff0000", "borderStyle":"black", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/logs/logs", "iconPath": "images/news1.png", "selectedIconPath": "images/news2.png", "text": "首页" }, { "pagePath": "pages/news/news", "iconPath": "images/news1.png", "selectedIconPath": "images/news2.png", "text": "新闻" } ] }, "style": "v2", "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }
操作结果显示在图中
六:页面逻辑文件
页面逻辑文件的主要功能是:设置初始数据;定义当前页面的生命周期函数;定义事件处理功能等。每个页面都有一个相应的逻辑文件,该文件在引擎中运行。
参数表显示在图中:
1:设置初始数据:
1。设置初始数据集初始数据是第一个数据绑定到页面。对象数据将以JSON的形式从逻辑层传输到视图层(1S对象简化光谱)。因此,数据必须以可以转换为JSON的格式(字符串,数字,布尔值,对象,数组)。
视图层可以通过WXML绑定数据。
数据初始化,数据绑定和操作效果如图2-12所示
2。定义当前页面的生命周期函数
在页面()函数的参数中,您可以定义当前页面的生命周期函数。页面的生命周期函数主要是,,,,。
页面加载功能。加载页面时调用此功能。页面只会被调用一次。
该函数的参数可以从WX获得。和WX。
该页面显示功能。显示页面时调用此功能。每次打开页面时,都会调用它。页面数据绑定功能。当页面的初始数据绑定完成后,调用此功能。页面只能调用一次,这意味着该页面已准备就绪并可以与视图层进行交互。
页面隐藏功能。当页面被隐藏时以及在小程序底部执行选项卡开关时,该功能是调用的。
页面卸载功能。当页面卸载,执行或操作时,该功能被调用。
该代码如图所示:
姓名 :{{name}} 年龄 :{{age}} 出生日期: {{birthday[0].year}}年 {{birthday[1].month}}月 {{birthday[2].date}}日 爱好 : {{object.hobby}}
代码的运行结果如图所示:
七:页结构文件
页面的结构文件(WXML)是由框架设计的一组类似于HTML的标签语言。它具有数据绑定,条件数据绑定,列表数据绑定,模板,参考页面文件和页面事件德语功能。
1:迷你程序的数据绑定使用语法包装变量或操作规则
1。简单绑定将变量与双括号({{}})
演示代码如下:
2。操作
您可以在{{}}中执行一些简单的操作(主要是算术操作,逻辑操作,三元操作,字符串操作等),这些操作均应由操作规则计算
计算规则如图所示:
两个:有条件数据的结合
条件数据结合是为了确定当前组件是否基于结合表达式的逻辑值绑定。