dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 478|回复: 0

[Html/Css] 小程序的页面层级结构

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3987

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3987

    发表于 2020-3-17 20:15:26 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    新建项目以后,可以看到官方的种子项目
    这是首页

    1.png

    点击头像可以跳转到另一个页面

    2.png

    目录结构

    3.png

    wxml类似于html,wxss类似于css,.json通常用来做配置(可以没有)

    应用程序级别文件

    4.png

    app.js 应用程序级别的逻辑
    app.json 应用程序级别的配置
    app.wxss 应用程序级别的全局样式

    就近原则:
    在app.wxss里设置
    [CSS] 纯文本查看 复制代码
    text{[/font][/color][/align]  color:lightblue;
    }


    在index.wxss里设置
    [CSS] 纯文本查看 复制代码
    text{
      color:pink;
    }

    最终页面显示粉色

    5.png

    json配置文件也遵循就近原则

    project.config.json 是小程序自动生成的,一般来说不需要去管理和改动
    utils/util.js 帮助类文件,里面有一些功能性的函数

    当然,这目录结构是官方推荐的目录结构,也不是一定要遵循的
    这是一个简单的种子项目,有时并不能满足复杂的项目需求,可以根据实际情况修改目录结构

    小程序的页面层级结构

    6.png


    小程序历史版本曾经对层级做过限制,随着版本更替也许会有不同的限制,也可能不做限制
    但还是建议层级不要超过5层,层级太多非常影响用户体验;而且会导致小程序体积变大(一般限制是2M,但后期可能会调整)
    如果因为某些原因小程序体积确实超出,可以使用【分包加载】

    7.png








    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-4-26 23:13 , Processed in 0.150066 second(s), 36 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表