大家好，欢迎来到IT知识分享网。
2.1.1主体文件：
微信小程序的主体部分由三个文件组成
app.js:小程序逻辑文件，主要用来注册小程序全局实例。
app.json:小程序公共设置文件，配置小程序全局设置。
app.wxss:小程序主样式表文件，类似HTML的，CSS文件。
project.config.json:文件是式项目配置文件。
pages:目录中保存着一个页面的相关文件。
2.1.2页面文件：
index：.js文件：页面逻辑文件，在该文件中编写javaScript代码控制页面的逻辑。
.wxml文件:页面结构文件，用于设计页面的布局，数据绑定。
.wxss文件:页面样式文件，拥有定义本页面用到的各种各样式表。
.json文件:页面配置文件。该文件在页面中不可缺少。
2.2小程序开发框架
2.2.1视图层：MINA框架的视图层是由WXML与WXSS编写，有组件来进行展示。
.WXML文件用于描述页面的结构；WXSS文件用于描述页面样式。
2.2.2逻辑层：用于处理事务逻辑。逻辑层将数据进行出来后发送给视图层，同时接受视图层的事件反馈。
2.2.3数据层：
数据层在逻辑上包括页面临时数据或缓存，文件储存（本地储存）和网络储存与调用。
1、页面临时数据或缓存
在Page() 中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值。
setData()函数的参数接收一个对象，以(key,value)的形式表示将key 在thi. data中对应的值改变成value。
2.文件存储 (本地存储)
2.3创建小程序页面
2.3.1创建第一个页面文件
继续在项目主目录下新建一个pages目录,在pages目录下新建一个index(随便取一个英文名)目录，并在index目录下新建index.js, index.json，index.wxml, index.wxss空文件。（如图下：）
首先打开kk.wxml文件，输入“欢迎学习小程序”因此打开项目配置文件app.json
打开kk.json文件输入如下代码：
{
}
打开kk.js文件输入 如下代码：
page（{
}）
2.4配置文件
小程序的配置文件按其作用范围可分为全局配置文件（app.json）和页面配置文件（*.json）。
2.4.4全局配置文件
小程序的全局配置保存在全局配置文件（app.json）中使全局配置文件来配置页面文件（pages）的路径。设置窗口（window）表现，设定网络请求API的超时时间值（networkTimeout）以及配置多个切换页（tabBar）等。
全局配置项
配置项及其描述
1.pages配置项
pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages配置项是必填项。
（1）数组的第一项用于设定小程序的初始页面。
（2）在小程序中新增或减少页面时，都需要对数组进行修改。
（3）文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js,.json,.wxml和.wxss文件进行整合数据绑定。
{
“pages”:[
“pages/news/news”,
“pages/index/index”
]
}
2.window配置项
window配置项负责设置小程序状态栏，导航条，标题，窗口背景色等系统样式。
window配置项及其描述
3.tabBar配置项
当需要在小程序顶部或底部设置菜单栏时，可以通过配置tabBar品质项来实现。
tabBar配置项及其描述
app.json 运行配置
{
“pages”: [
“pages/kk/kk”,
“pages/logs/logs”
],
“window”: {
“navigationBarTextStyle”:”black”,
“navigationBarTitleText”: “weixin”,
“navigationBarBackgroundColor”: “#ffffff”
},
“tabBar”: {
“list”:[{
“pagePath”:”pages/kk/kk”,
“iconPath”:”pages/images/hh.jpg”,
“selectedIconPath”:”pages/images/ws.jpg”,
“text”:”日志”
},
{
“pagePath”:”pages/logs/logs”,
“iconPath”:”pages/images/ii.jpg”,
“selectedIconPath”:”pages/images/xx.jpg”,
“text”:”新闻”
}]
},
“style”: “v2”,
“componentFramework”: “glass-easel”,
“lazyCodeLoading”: “requiredComponents”
}
运行结果
其中，list（列表）接受数组值，数组中的每一项也都是一个对象。
tabBar中list选项
4.networkTimeout配置项
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。
netwoekTimeout配置项
5.debug配置项
debug配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册，路由，数据更新，事件触发等调试信息将以info的形式输出到Console（控制台）面板上。
2.4.2页面配置文件
页面配置文件（*.json）只能本页面窗口表现，而且只能设置window配置项的内容。
{“navigationBarBackgroundColor”:”#ffffff”,
“backgroundColor”: “#eeeeee”，
“backgroundTextStyle”: “light” }
2.5逻辑文件
小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件。
2.5.1项目逻辑文件
当启动小程序时，首先会触发生命周期函数onLanch和onShow方法让，然后通过app.json的属性注册相应的页面，最后跟据默认路径加载首页。
项目逻辑文件配置项
2.5.2页面逻辑文件
页面逻辑文件配置项
1.设置初始数据
2.定义当前页面的生命周期函数
数据初始，数据绑定及运行效果图
2.6页面结构文件
页面结构文件(wxml)是框架设计的一套类似HTML的标签语言，结合基础组件，事件系统，可以建构出页面的结构，即.wxml文件。
2.6.1数据绑定
1.简单绑定
简单绑定是指使用大括号（{
{}}）,可以作用于内容，组件属性，控制属性等的输出。
2.运算
主要有算术运算，逻辑运算，三元运算，字符串运算
2.6.2条件数据绑定
1.wx：if条件数据绑定
wx：if条件数据绑定是指使用wx：if这个属性来判断是否数据绑定当前组件。
2.block wx:if 条件数据绑定
当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx：if属性。
2.6.3列表数据绑定
列表数据绑定用于将列表中的各项数据进行重复数据绑定。
2.6.4模板
1.定义模板
2.调用模板
2.6.5引用页面文件
1.import方式
如果要引用的文件中定义了模板代码，则需要用import方式引用
2.include方式
include方式可以将原文件中除模板之外的其他代码全部引入，相当于将源文件中的代码全部复制到include所在位置。
2.6.6页面事件
1.定义事件函数在.js文件中定义函数来实现相关功能事件响应后执行事件处理代码。
2.调用事件调用事件也称为注册事件。
3.冒泡事件
4.非冒泡事件
2.7页面样式文件
1.尺寸单位
由于css原有尺寸单位在不同尺寸的屏幕中得不到很好的呈现，在系统绑定中rpx会按比例转换成px。
2.样式导入
为了便于管理wxss文件，我们可以将样式存放在不同的文件中.
3.选择器
4.wxss常用属性
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/140348.html
