支付宝小程序基础架构

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"
})
上一篇下一篇

猜你喜欢

热点阅读