2.1小程序的基本目录结构
主体文件
微信小程序的主体部分由3 个文件组成,这3个文件必须放在项目的主目录中,负责程序的整体配置,它们的名称是固定的。
app.js 小程序逻辑文件,主要用来注册小程序全局实例。在编译时,
app.js 文件会和其他页面的逻辑文件打包成一个 JavaScript 文件。该文件在项目中不可缺少。app.json 小程序公共设置文件,配置小程序全局设置。该文件在项目中不可缺少
app.wxss小程序主样式表文件,类似HTML的css 文件。在主样式表文件中设置样式在其他页面文件中同样有效。该文件在项目中不是必需的。
页面文件
小程序通常是由多个页面组成的,每个页面包含 4 个文件,同一页面的这4 个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时,小程序会根据app.json设置的路径找到相对应的资源进行数据绑定。
.js文件页面逻辑文件,在该文件中编写 JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
.wxss 文件页面样式表文件,用于定义本页面中用到的各类样式表。当页面中有样式表文件时,文件中的样式规则会层叠覆盖 app.wxss 中的样式规则:否则,直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少
.json 文件 页面配置文件。该文件在页面中不可缺少
2.2小程序的开发框架
2.2.1视图层
MINA框架的视图层由WXML与WXSS编写,由组件来进行展示。对干微信小程序而视图层就是所有wxml文件与wxss文件的集合:wxm文件用于播述页面的结构言、wxss文件用于描述页面的样式
微信小程序在逻辑层将数据进行处理后发送给视图层展现出来,同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层,而数据展现是以组件来进行的组件是视图的基本组成单元.
2.2.2逻辑层
逻辑层用于处理事务逻辑。对于微信小程序而言,逻辑层就是所有.j脚本文件的集合微信小程序在逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈
微信小程序开发框架的逻辑层是采用JavaScript 编写的。在JavaScript 的基础上,微信队做了适当修改,以便提高开发小程序的效率。主要修改包括:
(1)增加 app()和 Page() 方法,进行程序和页面的注册
(2)提供丰富的API,如扫一扫、支付等微信特有的能力(3)每个页面有独立的作用域,并提供模块化能力。逻辑层就是通过各个页面的.js 脚本文件来实现的。由于小程序并非运行在浏览器中所以JavaScript在 Web 中的一些功能在小程序中无法使用,如document、window等开发者开发编写的所有代码最终会被打包成独立的JavaScript 文件,并在小程序启动的时候运行,直到小程序被销毁。
2.2.3数据层
1,页面临时数相成绩存
在 Page《)中,使用 etDatn 数将数从逻发选到,受财意thisdat 的值
setData()函数的参数接收一个对象,以(key,value)的形式表示将h对应的值改变成 value。
2.文件存储《本地存储)
使用数据API接口,如下;
获取本地数据缓存wxgetStorage
设置本地数据缓存wx. setStorage
清理本地数据级存。wxclearStorage
3.网络存储与调用
上传或下载文件API接口,如下:
wxrequest发起网络请求
wxuploadFile上传文件。
wxdownloadFile 下载文件
调用URL的API接口,如下:
wxnavigateTo新窗口打开页面
wx.redirectTo 原窗口打开页面
2.3创建小程序页面
2.3.1创建第一个页面文件
创建第一个页面
继续在项目主目录下创建一个pages目录,在pages目录下创建新建一个index目录,并在index目录下新建index.js,index.json,index.wxml,index.wxss空文件.
此时,系统仍然提示错误信息。假设,我们的目的是页面能显示“欢迎学习小程序,现大梦想”。首先,打开index.wxml文件,输入“欢迎学习小程序,实现大梦想”。然后告诉系统这个文件的名称及所处路径。因此,打开项目配置文件app.json,输人如下代码
这段代码将imdex页面注册到小程序中,这个对象的第一属性pe8es接受了二个数组该数组的每一项是一个字符串,该字符串由“路径”+“文件名”组成,不包含扩展名.
2.3.2创建了一个页面文件
2.4配置文件
小程序的配置文件按其作用范围可以分为全局配置文件(appjson)和页面配置文件(*.json)。全局配置文件作用于整个小程序,页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级,因此,当全局配置文件与页面配置文件有相同配置项时,页面配置文件会覆盖全局配置文件中的相同配置项内容。
2.4.1全局配置文件
小程序的全局配置保存在全局配置文件(ppjon)中,使用全局配置文件来配置页面文件(pes)的路径、设置窗口(wmdm)表现、设定网络请求的超时时间值(newOkTmEOU)以及配置多个切换页(mha)等。表2-2列出子各全局院置项的相关描述.
2.5逻辑层文件
项目逻辑文件app.js中可以通过 A函数注册小程序生p()tApp()获取。已注册局方法,的小程序实例可以在其也页面逻辑文件中通过g小程序的生命周期函数、用App()函数参数为 Object,用于指定用于注册一个小程序法,其参数如表2-7户自定义属性和所示。![](https://i-blog.csdnimg.cn/blog_migrate/d803ea5c16df42a088ebe53191f2e663.jpeg)
冒泡事件wxss常用属性