微信小程序结构说明

微信小程序结构说明

            小程序框架提供了自己的视图层描述语言wxml和wxss以及JavaScript,并在视图层和逻辑层之间提供了数据传输和事件系统,让开发者专注数据与逻辑

      1、小程序文件结构和传统web文件结构进行对比

结构 传统web  微信小程序
结构 HTML WXML
样式   CSS WXSS
逻辑 JavaScript JavaScript
配置 json

                通过上面对比可以看出,传统的web是三个文件结构,而微信是四个

        2、基本的项目目录结构

            

        3、小程序配置文件

                小程序应用程序包括最基本的两个配置文件,一种是全局的配置文件app.json和页面自己的page.json

        4、全局配置文件app.json

                里面包括了小程序的页面路径、界面表现、网络延迟时间、底部tab等,普通快速启动项目里面的app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

                pages:用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录

                window:定义小程序所有页面的顶部背景颜色,文字颜色定义等

        5、利用app.json新建页面

               第一步写完之后,会自动帮你创建好页面,如果想将新加的页面变成首页,仅需放到最前面就ok

                 

        6、app.json中window属性

            

        7、app.json中tabBar属性

                    

        8、page.json属性

                            

        9、sitemap.json文件