目录
一 小程序的基本目录结构
pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含.wxml .wxss .js .json 文件分别用于表达页面结构文件，页面样式文件，页面逻辑文件和页面配置文件，按照规定，同一个页面文件的4个文件必须具有相同的路径和文件名。
utils: 目录用来存放一些公共的文件，当某个页面需要用到 us. 函数时，可以将其引人后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目录用来存放。
主体文件（utils）
app.js ：小程序逻辑文件，主要用来注册小序全局实例。在编译时，app. js 文件会程序的整体配置，它们的名称是固定的。和其他页面的逻辑文件打包成一个JavaScript 文件。该文件在项目中不可缺少。
app.json ：小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。
app.wxss ：小程序主样式表文件，类似HTML的cs文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。
页面文件（pages）
小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4 个文件必具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到相对应的资源进行数据绑定。
.wxml文件：页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
.wxss文件：页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖 app.wxss 中的样式规则;否则，直接使用
.json文件: 页面配置文件。该文件在页面中不可缺少。
.js文件：页面逻辑文件，在该文件中编写 JavaScript 代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
二 小程序的开发框架
视图层：将数据进行处理后发送给视图层展现出来，同时接受视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现出来是以组件来进行的。
逻辑层：用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
数据层：在逻辑上包括页面临时数据或缓存，文件存储和网络存储与调用。
三 创建小程序页面
在pages文件夹下面创建一个新文件夹并命名然后右键文件夹创建Pages即可，然后去app.json里面配置"pages/name/name"，然后页面就创建完成。
四 配置文件
1.pages配置项
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/q/q"
]配置pages文件时需要注意以下3点：
(1)数组的第一项用于设定小程序的初始页面。
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json.wxml和.wxss文件进行整合数据绑定。
2.window配置项
在app.json配置如下：
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信小程序",
"navigationBarBackgroundColor": "#6495ed",
"backgroundColor": "#ccc",
"backgroundTextStyle": "light"
}3.tabBar配置项
在list里面的数据属性如下：
在app.json文件中的配置如下：
"tabBar": {
"color": "ffc0cb",
"selectedColor": "ff0000",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/news/news",
"text": "首页",
"iconPath": "images/h.png",
"selectedIconPath": "images/a.png"
},
{
"pagePath": "pages/nb/nb",
"text": "购物",
"iconPath": "images/e.png",
"selectedIconPath": "images/p.png"
}
]
}配置完成后效果如图：
4.networkTimeout配置项
为了提高网络响应效率，开发者可以在app.json中配置使用下列在超时设置：
{
"networkTimeout":{
"request":20000,
"connectSocket":20000,
"uploadFile":20000,
"downloadFile":20000
}
}5.debug配置项
debug配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console(控制台)面板上。
五 逻辑层文件
配置以下可以实现效果：
App({
onLaunch(){
console.log("小程序初始化");
},
onShow(){
console.log("小程序启动");
},
onHide(){
console.log("小程序隐藏");
}
})效果如下：
页面逻辑文件配置项
六 页面结构文件
1.数据的绑定
在创建的pages文件的.js文件里面配置
data: {
name:"lkw",
age:50,
num:20,
brithday:[{year:1998},{moth:11},{date:18}],
object:{hobby:'Component'}
}然后去.wxml配置
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日</view>
<view>爱好:{{object.hobby}}</view>运行效果如下：
2.条件数据绑定
wx:if条件数据的绑定
下面是判断age是否大于40的，如果大于40，输出1，如果等于40，输出2，否则输出3。
<view wx:if="{{age<40}}">1</view>
<view wx:elif="{{age==40}}">2</view>
<view wx:else>3</view>
3.列表数据绑定
去.js配置下列代码 定义一个student数组定义名字，身高，体重。
student:[
{
nickname:"Tom",sg:170,tz:150
},
{
nickname:"TMD",sg:160,tz:90
}
]然后去.wxml配置绑定数据
<view wx:for="{{student}}">
<text>姓名:{{item.nickname}}</text>
<text>年龄:{{item.nl}}</text>
<text>身高：{{item.sg}}</text>
</view>运行效果如下：
4.模板
1.定义模板
<template name="模板名">相关组件代码
</template>2.调用模板
<template is="模板名称" data=="{{传入的数据}}/>模板的使用
<template name="stu">
<view wx:for="{{student}}">
<text>姓名:{{item.nickname}}</text>
<text>年龄:{{item.nl}}</text>
<text>身高：{{item.sg}}</text>
</view>
</template>
<template is="stu" data="{{student}}"></template>5.页面事件
事件分冒泡事件和非冒泡事件两大类型
■冒泡事件：冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
■非冒泡事件： 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。
七 页面样式文件
wxss常用属性
3136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
