支付宝小程序基础架构
2018-12-03 本文已影响10人
轩辕夜空
app的三种文件类型与路径配置管理
app.js (必) 全局脚本 全局常量
app.acss (可选)全局样式
app.json (必)项目配置
页面路径配置
对象结构
app.json:{
pages:[
"页面1",
"页面2"
]
}
每个使用到的页面必须要配置
小程序app的整体生命周期和原理
onLaunch -> 项目初始化完成后触发 只触发一次
onShow -> 页面展示时触发
onHide -> 页面隐藏时触发
onError -> 页面出错时触发
单页面的生命周期与原理
onLoad -> 页面加载时执行 每个页面执行一次
onReady -> 页面初次渲染完成执行 每个页面执行一次
onShow -> 页面展示时触发
onHide -> 页面隐藏时触发
onUnload -> 页面卸载时执行
onTitleClick -> 标题被点击
onReachBottom -> 页面触底事件
onPullDownRefresh -> 下拉刷新触发
onShareAppMessage -> 分享时触发 需要返回内容
onShareAppMessage(){
return{
title:'测试',
desc:'描述',
path:'pages/index/index'
}
}
开启下拉刷新 对应页面的json中
"PullRefresh":true
全局对象和全局样式
getApp() ->app对象
配置标题栏和导航栏
全局标题配置:
window:{
"defaultTitle":"测试",
"titleBarColor":'#ffffff'
}
导航组件与api 页面跳转与tab切换
tab选项卡
"tabBar": {
"textColor" : "字体颜色",
'selectedColor" : '选中颜色"
"backgroundColor" : "底色'
"items": [
{
"pagePath": " pages/index/index",
"name": "首页",
"icon" :“未选中图标",
' activeIcon" :“选中后图标'
}
}
导航组件
navigate 跳转保留旧页面
redirect 跳转销毁旧页面
navigateBack 页面返回
switchTab 跳转到tabBar页面
导航api
navigateTo({
url:"/pages/index/index"
})