1.小程序的基本目录结构
在微信小程序的基本目录结构中,项目主目录下有2个子目录和4个文件
在主目录中,3个以app开头的文件是微信小程序框架的描述文件,是应用程序级别的文件.
1.1主体文件
微信小程序的主体部分由3个文件组成,这3个文件必须放在项目的主目录中,负责小程序的整体配置,它们的名称是固定的。
app.js小程序逻辑文件,主要用来注册小程序全局实例。
app. jon小程序公共设置文件, 配置小程序全局设置。
app. wxss小程序主样式表文件,类似HTML的. ess文件。
1.2页面文件
小程序通常是由多个页面组成的,每个页面包含4个文件,同一页面的这4个文件必须具有相同的路径有文件名。当小程序被启动或小程序内的页面进行跳转时,小程序会根据app. json设置的路径找到相对应的资源进行数据绑定。
js 文件页面逻辑文件,在该文件中编写JasScpcp代码控制页面的逻辑。
wxml 文件页面结构文件, 用于设计页面的布局、数据绑定等,类似HTML页面中的.html文件
wxss 文件页面样式表文件,用于定义本页面中用到的各类样式表。
json 文件页面配置文件。该文件在页面中不可缺少。
2.小程序的开发框架
小程序MINA框架将整个系统划分为视图层和逻辑层。视图层(View)由框架设计的标签语言WXML ( WeiXin Markup Language)和用于描述WXML组件样式的wXSS ( WeiXin
Style Sheets)组成,它们的关系就像HTML和CSs的关系。逻辑层( App Service)是MINA
框架的服务中心,由微信客户端启用异步线程单独加载运行。
2.1视图层
MINA框架的视图层由WXML与WXSS编写,由组件来进行展示。
2.2逻辑层
逻辑层用于处理事务逻辑。
2.3数据层
数据层在逻辑上包括页面临时数据或缓存,文件存储和网络存储与调用。
3.创建小程序页面
3.1创建第一个页面
4.配置文件
4.1全局配置文件
小程字的全局配置保存在全局配置文件中,使用全局配置文件来配置页面文件(pages) 的路径、设置窗口(window) 表现、设定网络请求API的超时时间值( networkTimeout)以及配置多个切换页(tabBar) 等。
1.pages配置项
pages配置项接受一个数组,用力啊指定小程序由哪些页面组成,数组的每一项都是字符串,代表对应页面的“路径”+“文件名”。pages配置项是必填项。
2.window配置项
window配置项负责设置小程序状态栏,导航条,标题,窗口背景色等系统样式。
3.tabbar配置项
当需要在程序顶部或底部设置菜单栏时,可以通过配置tabbar配置项来实现。
tabbar配置代码
{
"pages": [
"pages/xcx/xcx",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信小程序",
"navigationBarBackgroundColor": "#fff"
},
"tabBar":{
"color":"#666666",
"selectedColor":"#ff0000",
"borderStyle":"black",
"backgroundColor":"#ffffff",
"list":[
{
"pagePath":"pages/xcx/xcx",
"iconPath":"images/HZ.jpg",
"selectedIconPath":"images/OIP-C.jpg",
"text":"首页"
},
{
"pagePath":"pages/logs/logs",
"iconPath":"images/OIP-C.jpg",
"selectedIconPath":"images/HZ.jpg",
"text":"新闻"
}
]
},
"style": "v2",
"componentFramework": "glass-easel",
"lazyCodeLoading": "requiredComponents"
}
运行结果
4networktimeout配置项
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统-一设置,不能在API中单独设置。
5debug配置项
debug配置项用于开启开发者工具的调试模式,默认为false。开启后,页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console(控制台)面板上。
5.逻辑层文件
5.1项目逻辑文件
项目逻辑文件app. js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法,已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
5.2页面逻辑文件
页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。
1.设置初始数据
设置初始数据是对页面的第一一次数据绑定。对象data将会以JSON(JavascriptObjectNo-tation, JS 对象简谱)的形式由逻辑层传至视图层。
2.定义当前页面的生命周期函数
在Page()函数的参数中,可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow 、onReady 、onHide 、onUnload 。
onLoad页面加载函数。当页面加载完成后调用该函数。-.个页面只会调用一次。该函数的参数可以获取wx. navigateTo和wx. redireetTo及< navigator/ >中的query。
onShow页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只
会调用一次,代表页面已经准备就绪,可以和视图层进行交互。
onHide 页面隐藏函数。 当页面隐藏时及当navigateTo 或小程序底 部进行tab切换时、调用该函数。
onUnload 页面卸载函数。 当页面卸载、进行navigateBack成redirectTo操作时,调用该雨数。
js代码
Page({
//页面的初始数据
data:{
name:'lwk',//字符串
age:30, //数字
birthday:[{year:1988},{month:11},{date:18}],//数组
object:{hobby:'computer'},.2 //对象
students:
}
})
wxml代码
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].dote}}日
</view>
<view>爱好:{{object.hobby}}</view>
运行结果
6.页面结构文件
6.1数据绑定
小程序在进行页面数据绑定时,框架会将WXML文件与逻辑文件中的data进行动态绑定,在页面中显示data中的数据。
6.2条件数据绑定
条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。
6.3列表数据绑定
列表数据绑定绑定用于将列表中的各项数据进行重复数据绑定
6.4模板
在小程序中,如果要经常使用儿个组件的组合(如“登录”选项),通常把这几个组件结合定义为一个模板,以后在需要的文件中直接使用这个模板。
6.5引用页面文件
在wxml文件中,不仅可以引用模板文件,还可以引用普通的页面文件。
6.6页面事件
简单来说,小程序中的事件是用户的一种行为或通信方式。