前言
小程序应用生命周期
App(Object object)
注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
参数
Object object
小程序页面生命周期
Page(Object object)
注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件
处理函数等。
参数
页面
页面配置
app.json
"pages": [ "pages/demo01/demo01", "pages/index/index", "pages/logs/logs" ],
添加一行 “pages/demo01/demo01” 放第一行就默认为首页,然后文件夹会自动创建相应文件。
onLoad
经常用作异步加载数据,页面显示用;
onHide
链接组件
onPullDownRefresh:
先全局设置允许下拉刷新:
"window": { "enablePullDownRefresh": true //下拉刷新启用 },
onReachBottom
下拉到页面底部时触发
小技巧
view{$}*100 可以复制100个view标签
onShareAppMessage
用户点击右上角转发时触发
onPageScroll
页面滚动时触发
onResize
页面旋转时触发
在手机启用屏幕旋转
“window”: {
“pageOrientation”: “auto”
},
页面跳转
Navigator
跳转到Index页面
方法一 可返回
<navigator url="/pages/index/index" open-type="navigate">navigate</navigator>
方法二 原地销毁 不可返回 会调用到onUnload
<navigator url="/pages/index/index" open-type="redirect">redirect</navigator>
ViewThread和AppServiceThread交互图
小程序全局配置app.json
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
完整配置项说明请参考小程序全局配置
以下是一个包含了部分常用配置选项的 app.json :
{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/index", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }
Permission
小程序接口权限相关设置
获取地理位置信息
window
背景样式
"backgroundTextStyle": "dark",
导航栏颜色
"navigationBarBackgroundColor": "#fff",
标题
"navigationBarTitleText": "Weixin",
允许下拉刷新
app.json
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle": "black", "enablePullDownRefresh": true //下拉刷新启用 },
tabBar
"tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "主页", "iconPath": "icon/_home.png", "selectedIconPath": "icon/home.png" }, { "pagePath": "pages/demo01/demo01", "text": "demo01", "iconPath": "icon/_home.png", "selectedIconPath": "icon/home.png" } ], "color":"#0000FF",//文本颜色 "selectedColor":"#4B0082",//选中时文本颜色 "backgroundColor":"#00BFFF",//背景颜色 "borderStyle":"white",//边框样式 "position":"bottom"//默认是底部,top时类似Tab },
onTabItemTap
点击Tab时触发
onTabItemTap:function(){ console.log("onTabItemTap"); }
小程序页面配置
为某个页面配置相关属性
页面/index.json
{ "usingComponents": {}, "navigationBarBackgroundColor": "#7B6800",//背景颜色 "navigationBarTitleText": "首页",//导航栏标题 "enablePullDownRefresh": true //允许下拉刷新 }
sitemap配置
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
微信现已开放小程序内搜索,开发者可以通过 sitemap.json
配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。
{ "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 => 不被索引
- 其他页面都会被索引