微信小程序开发（一）文件类型基础讲解

@微信小程序-起步-官方文档

初始化第一个微信小程序

1. 项目结构：

2. 文件基础类型分析

   .json 后缀的 JSON 配置文件
   .wxml 后缀的 WXML 模板文件
   .wxss 后缀的 WXSS 样式文件
   .js 后缀的 JS 脚本逻辑文件
   

   a.根目录app.json

        概述：
        小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
        pages
        用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
        window
        用于设置小程序的状态栏、导航条、标题、窗口背景色。
        tabBar
        如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
        networkTimeout
        各类网络请求的超时时间，单位均为毫秒。
        debug
        可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。
        functionalPages
        基础库 2.1.0 开始支持，低版本需做[兼容处理]
        启用[插件功能页]时，插件所有者小程序需要设置其 `functionalPages` 为 `true`。
        subpackages
        微信客户端 6.6.0 ，基础库 1.7.3 及以上版本支持
        启用[分包加载]时，声明项目分包结构。
        写成 subPackages 也支持。                
        workers       
        使用 Worker处理多线程任务时，设置 `Worker` 代码放置的目录
        requiredBackgroundModes
        申明需要后台运行的能力，类型为数组。目前支持以下项目
        plugins
        基础库 1.9.6 开始支持，低版本需做[兼容处理]
        声明小程序需要使用的[插件]
        preloadRule
        基础库 2.3.0 开始支持，低版本需做[兼容处理]
        声明[分包预下载]的规则。
        resizable
        在 iPad 上运行的小程序可以设置支持[屏幕旋转]
        navigateToMiniProgramAppIdList
        当小程序需要使用 [wx.navigateToMiniProgram]、接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。
   

   b.工具配置 project.config.json

        通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
   
        考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
   

   c.页面配置 page.json

          每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
   
          页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
   

   d.wxml 微信特有的html

            区别：
              1.特有的标签语法，view,button,text等
              2.类似vue的wx-逻辑语法，及类似es6字符串模板语法
   

   e.wxss 微信特有的css

            区别：
              1.新增尺度单位rpx
              2.全局css及页面css，css单文件作用域
   

   f.微信小程序逻辑交互

            区别：
              1.新增的事件机制
              2.丰富的小程序api