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

初始化第一个微信小程序

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