上一篇讲了创建helloWord项目，这一篇介绍小程序框架基础。
1.项目的目录结构
参考官方文档介绍 总结如图
2.小程序应用生命周期
参考官方文档 里面介绍了 在小程序全局入口文件app.js 中指定了小程序的生命周期回调等。
2.1 onLaunch() 监听小程序初始化
看我们生成的初始项目
它定义了一个onLaunch() 监听小程序初始化，方法。我们增加一行打印控制台日志查看，当我们重新编译时发现控制台已经打印 "onLaunch: 监听小程序初始化"
console.log("onLaunch: 监听小程序初始化")
2.2 onShow() 监听小程序启动或切前台
增加onShow（）生命周期方法测试
onShow(){
console.log("onShow: 监听小程序启动或切前台")
},
发现监听小程序启动时已经打印了。接着测试切前台
右键工具栏图标管理勾选切后台
发现日志已经打印
2.3 onHide() 监听小程序切后台
增加onHide（）生命周期方法测试
onHide(){
console.log("onHide: 监听小程序切后台")
},
2.4 onError() 错误监听函数。
增加onError（）生命周期方法测试,这个有错误参数
onError(error){
console.log("onError: 错误监听函数 ---> "+error)
},增加错误代码测试
另外几个就暂时不测试了，后面遇到对应的场景再测试。
3.小程序页面生命周期
不仅小程序有生命周期，小程序的页面也是有页面生命周期的,见图。
新建testPage测试页面
3.1 data 是页面第一次渲染使用的初始数据。
<!--pages/testPage/testPage.wxml-->
<text>{{testInfo}}</text>
/**
* 页面的初始数据
*/
data: {
testInfo: '测试小程序的页面生命周期--------------> data页面的初始数据'
},
效果
3.2 onLoad(Object query)页面加载时触发
参数说明：query打开当前页面路径中的参数测试
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log("onLoad: 生命周期函数--监听页面加载"+options)
},
3.3 ### onShow()页面显示/切入前台时触发。
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log("onShow:监听页面显示,切入前台时触发。")
},
3.4 onReady()页面初次渲染完成时触发
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log("onReady:监听页面初次渲染完成。")
},
3.5onHide()页面隐藏/切入后台时触发
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
console.log("onHide:监听页面隐藏。")
},
增加跳转测试
<!--pages/testPage/testPage.wxml-->
<text>{{testInfo}}</text>
<navigator url="/pages/index/index" open-type="navigate">跳转index</navigator>
点击跳转index后发现控制台打印了onHide:监听页面隐藏。
3.6onUnload()页面卸载时触发
增加redirect（关闭当前页面，跳转到应用内的某个页面）类型测试
<navigator url="/pages/index/index" open-type="redirect">跳转index-redirect</navigator>
3.7 onPullDownRefresh()监听用户下拉动作
需要在app.json的window选项中或页面配置中开启enablePullDownRefresh
"enablePullDownRefresh":true
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log("onUnload:监听用户下拉动作。")
},
编译进行下拉测试
3.8 onPullDownRefresh()监听用户上拉触底事件
/**
* 页面上拉触底事件的处理函数 监听用户上拉触底事件
*/
onReachBottom() {
console.log("onUnload:监听用户上拉触底事件。")
},
页面创建
编译测试
3.9 onPullDownRefresh()用户点击右上角分享
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
console.log("onShareAppMessage:用户点击右上角分享。")
}
编译测试
4.小程序全局配置app.json (常用属性)
额，简单看一几个常见的属性吧，其他属性后面用到了再说。全局配置
4.1 entryPagePath 小程序默认启动首页
未设置默认首页时，默认pages的第一个为首页。
现在我们设置 index为首页。
"entryPagePath":"pages/index/index",
测试
4.2 window用于设置小程序的状态栏、导航条、标题、窗口背景色。
简单试几个：
4.2.1 backgroundTextStyle（下拉 loading 的样式，仅支持 dark / light）属性，我们修改为 dark
效果
4.2.2 navigationBarBackgroundColor 导航栏背景颜色，我们修改为 99ff66
参考十六进制颜色对照表
测试
4.2.3 navigationBarTitleText （导航栏标题文字内容） 我们修改为 微信小程序学习
4.2.4 tabBar 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
设置自动提示
回车可以看到list属性
官文属性介绍：
测试,其中图标可以在阿里巴巴矢量图标库中下载
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icon/shouye.png",
"selectedIconPath": "icon/shouyefill.png"
},
{
"pagePath": "pages/classification/classification",
"text": "分类",
"iconPath": "icon/fenlei.png",
"selectedIconPath": "icon/fenlei_1.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "icon/gouwuche.png",
"selectedIconPath": "icon/gouwuchefill.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "icon/wode.png",
"selectedIconPath": "icon/wode-wode.png"
}]
详细属性
4.3页面监听 由tabBar引出 页面生命周期方法 onTabItemTap(Object object)
点击 tab 时触发
在分类页面增加 onTabItemTap 方法
/**
* 点击 tab 时触发
*/
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
测试
5.小程序页面配置
除了全局的app.json配置，对于小程序的每一个页面，可以单独的配置属性。对于每个页面的属性是继承app.json配置的，但是如果每个页面也定义了自己的属性则会覆盖app.json配置的属性。
如：在“分类”页面上修改：
{
"usingComponents": {},
"navigationBarTitleText": "微信小程序学习-分类",
"navigationBarBackgroundColor": "#ffccff"
}测试：可以看出导航栏标题文字内容、导航栏背景颜色已经修改
6.sitemap配置
参考官文
根据规则属性，设置是否可以被搜索到，以及被搜索到的条件。
配置示例
示例1
{
"rules":[{
"action": "allow",
"page": "path/to/page",
"params": ["a", "b"],
"matching": "exact"
}, {
"action": "disallow",
"page": "path/to/page"
}]
}
- `path/to/page?a=1&b=2` => 优先索引
- `path/to/page` => 不被索引
- `path/to/page?a=1` => 不被索引
- `path/to/page?a=1&b=2&c=3` => 不被索引
- 其他页面都会被索引
下一篇:WXML:小程序版HTML
