美文网首页
支付宝小程序基础架构

支付宝小程序基础架构

作者: 轩辕夜空 | 来源:发表于2018-12-03 16:16 被阅读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"
    })
    

    相关文章

      网友评论

          本文标题:支付宝小程序基础架构

          本文链接:https://www.haomeiwen.com/subject/rhrycqtx.html