小程序的基本目录结构
主页文件
app.js:小程序逻辑页面,主要用来注册小程序全局实例。
app.json:小程序公共配置文件,配置小程序全局设置。
app.wxss:小程序主样式表文件,类似的HTML的.CSS文件。
页面文件
.js文件:页面逻辑文件,在该文件中编写JavaScript代码控制页面的逻辑。
.wxml:页面结构文件,用于设计页面的布局、数据绑定等。
.wxss:页面样式表文件,用于定义本页面中用到的各类样式表。
.json:页面配置文件,该文件在页面中不可缺少。
小程序的开发框架
视图层
MINA框架的视图层由WXML与WXSS 编写,由组件来进行展示,.wxml文件用于描述页面的结构; .wxss文件用于描述页面的样式。
逻辑层
逻辑层用于处理事务逻辑。<br><br>微信小程序开发框架的逻辑层是采用javaScrict编写的。 在javaScrict的基础上, 微信团队做了适当修改, 以便提高开发小程序的效率。 主要修改包括:<br><br>(1) 增加app()和Page()方法, 进行程序和页面的注册。<br><br>(2) 提供丰富的API, 如扫一扫、支付等微信特有的能力。<br><br>(3) 每个页面有独立的作用域, 并提供模块化能力。<br>
数据层
数据层在逻辑上包括页面临时数据或缓存文件存储(本地存储)和网络存储与调用。
页面临时数据或缓存
网络存储与调用
wx.request: 发起网络请求<br> wx.uploadFile: 上传文件<br>wx.downloadFile: 下载文件<br>调用URL的API接口,如下:<br> wx.navigateTo :新窗口打开页面<br> wx.redirectTo: 原窗口打开页面
文件存储
wx.getStorage:获取本地数据缓存<br><br> wx.setStorage:设置本地数据缓存<br> wx.clearStorage:清理本地数据缓存
配置文件
全局配置文件
小程序的全局配置保存在全局配置文件(app.json) 中, 使用全局配置文件来配置页面文件(pages) 的路径、设置窗口(window) 表现、设定网络请求API 的超时时间值(netwoekTimeout) 以及配置多个切换页(tabBar) 等。
pages
设置Pages配置时要注意以下三点:<br><br>(1)数组的第一项用于设定小程序的初始页面<br><br>(2)在小程序新准则或减少页面时,都需要对数组进行修改<br><br>(3)文件名不需要写文件扩展名
window
widow配置项负责设置小程序状态栏、导航栏、窗口背景等系统样式
taBar
当需要在程序顶部或底部设置菜单栏时,可以通过taBar配置项来实现
networkTimeout
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项统一设置,不能单独在API中设置,显示颜色就近原则。
debug
用于开发者工具的调试模式,默认为false.
页面配置文件
页面配置文件(*.json) 只能设置本页面的窗口表现, 而且只能设置window配置项的内容。 在配置页面配置文件后, 页面中的window配置值将覆盖全局配置文件(app.json) 中的配置值。
逻辑层文件
项目逻辑文件
项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法, 已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
页面逻辑文件
页面逻辑文件的主要功能有: 设置初始数据; 定义当前页面的生命周期函数; 定义事件处理函数等。 每个页面文件都有一个相应的逻辑文件, 逻辑文件是运行在纯javaScrict引擎中。 因此, 在逻辑文件中不能使用浏览器提供的特有对象(document、window) 及通过操作DOM改变页面, 只能采用数据绑定和事件响应来实现。<br>
页面结构文件
数据绑定
简单绑定是指使用双大括号({{}})将变量包起来, 在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。
条件数据绑定
概念:条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。
列表数据绑定
概念:列表数据绑定用于将列表中的各项数据进行重复数据绑定。
模板
概念:在小程序中, 如果要经常使用几个组件的组合(如“登录” 选项), 通常把这几个组件结合定义为一个模板, 以后在需要的文件中直接使用这个模板。
引用页面文件
在WXML文件中, 不仅可以引用模板文件, 还可以引用普通的页面文件。 WXML 提供了两种方式来引用其他页面文件。
页面事件
简单来说, 小程序中的事件是用户的一种行为或通信方式。 在页面文件中, 通过定义事件来完成页面与用户之间的交互, 同时通过事件来实现视图层与逻辑层的通信。 我们可以将事件绑定到组件上, 当达到触发条件时, 事件就会执行逻辑层中对应的事件处理函数。
页面样式文件
尺寸单位
由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现,WXSS在此基础上增加了尺寸单位rps (respnesivepixel)。 WXSS规定屏幕宽度为750rps, 在系统数据绑定过程中rpx会按比例转化为px。
样式导入
为了便于管理WXSS文件, 我们可以将样式存放于不同的文件中。 如果需要在某个文件中引用另一个样式文件, 使用@import语句导入即可
选择器
目前,WXSS 仅支持CSS中常用的选择器, 如.class、#id、element、beforee、aftert等。
常用属性