上一篇讲了创建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:监听用户上拉触底事件。") }, 复制代码
页面创建
view{$}*100 复制100个view标签 复制代码
编译测试
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 切换时显示的对应页面。
设置自动提示
官文属性介绍:
测试,其中图标可以在阿里巴巴矢量图标库中下载
"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