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

---

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

• 初始化第一个微信小程序

  1. 项目结构：

  project_root.png

  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
     

---