2.1 小程序的基本目录结构
pages:包含所有页面文件;
utils:工具包
app.js:小程序逻辑文件,主要用来注册小程序全局实例
app.jsomn:小程序公共设置文件,配置小程序全局设置
app.wxss:小程序主要样式表文件
index.js:页面逻辑文件
index.wxml:页面结构文件
index.wxss:页面样式文件
index.json:页面配置文件
2.2 小程序的开发框架
视图层:是所有.wxml文件于.wxss文件的集合:.wxml文件用于描述页面的结构;.wxss文件用于描述页面的样式。
逻辑层:用于处理事务逻辑。
数据层:在逻辑上包括页面临时数据或缓存,文件存储(本地存储)和网络存储于调用。
2.3 创建小程序
第一步,删除index文件夹(pages目录里),
第二步,点击pages文件,在文件右上新建新建文件夹(英文命名,例如dong),分别新建 dong .js dong.json dong.wxml dong.wxss 等文件
第三步,删除原先pages,替换成现在用的"pages/dong/dong",页面文件。
第四步 分别编辑并保存dong .js dong.json dong.wxml dong.wxss,代码如下:
dong .js:
Page({
})
dong.json :
{
}
dong.wxml :
星空白
dong.wxss:css样式
完成以上步骤,在工具栏点击编译,即完成。
运行效果图:
2.4 配置文件
2.4.1全局配置文件
1.0 pages配置项:pages配置项是必选项
{
"pages": [
"pages/dong/dong",
"pages/logs/logs"
]
}
2.0 window配置项:
配置代码:
"window":{
"navigationBarBackgroundColor":"#fff",
"navigationBarTextStyle":"black",
"navigationBarTitleText": "微信小程序",
"backgroundColor": "#ccc",
"backgroundTextStyle":"light"
}
3.0 tabBar配置
tabbar中lis选项
配置代码:
"tabBar": {
"color": "#666666",
"selectedColor": "#ff0000",
"borderStyle":"black",
"backgroundColor": "#fffffff",
"list": [
{
"pagePath":"pages/dong/dong",
"iconPath": "img/1.jpg",
"selectedIconPath": "img/2.jpg",
"text": "日志"
},
{
"pagePath":"pages/logs/logs",
"iconPath": "img/1.jpg",
"selectedIconPath": "img/2.jpg",
"text": "新闻"
}
]
},
"networkTimeout": {
"request":20000,
"connectSocket":20000,
"uploadfile":20000,
"downloadFile":20000
}
4.0 networktimeeout配置项:
2.5 逻辑层文件
2.5.1 项目逻辑文件:
2.5.2 页面逻辑文件件:
2.6 页面结构文件
2.6.1数据绑定
运算:
<view>爱好:{{object.hobby}}</view>
<view>算数运算:{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{age==30 ? 'happy':'sad'}}</view>
<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==40}}"></view>
<view wx:else>-1</view>
2.6.4 模板
定义模板:
<template name="stu">
<view wx:for="{{students}}">
<text>姓名:{{item.nickname}}</text>
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>
</template
调用模板:
<template is="stu" data="{{students}}"></template>
最终运行效果图:
2.7 页面样式文件
页面样式文件 (WXSS)