微信公众号开发

小程序的结构

本文主要是介绍小程序的结构,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

小程序结构目录

小程序文件结构和传统web对比

传统web 微信小程序
结构 HTML WXML
样式 CSS WXSS
逻辑 JavaScript JavaScript
配置 json
  • 通过以上对比,传统web是三层结构,而微信小程序是四层结构,多了一层配置文件。

基本的项目目录

小程序配置文件

  • 一个小程序应用程序会包括基本的两种配置文件:
    • 全局的 app.json
    • 局部的(页面自己的)page.json
  • 注:配置文件中不能出现注释

全局配置 app.json

  • app.json 是当前小程序的全局配置,包括了小程序所有页面路径、界面表现、网络超时时间、底部 tab 等。
{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#D8322E",
        "navigationBarTitleText": "小微祝福",
        "navigationBarTextStyle": "white"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json",
    "lazyCodeLoading": "requiredComponents"
}
  • pages 属性:用于描述当前小程序所有页面路径。
    • 这是为了让微信客户端知道当前你的小程序页面定义在了哪个目录。
    • 路径的最后不用添加后缀名,会自动补全。
    • 如果写的路径没有对应的文件夹,会自动帮你创建文件
  • window 属性:定义小程序所有的公共样式。
  • style 属性:指定使用升级后的weui样式
  • sitemapLocation 属性:指明 sitemap.json 的位置

局部配置(页面配置)

  • 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。
  • 页面中配置项在当前页面会覆盖 app.jsonwindow 中相同的配置项。

sitemap (了解即可)

  • 小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引。
这篇关于小程序的结构的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!