微信小程序开发（二）小程序代码结构

代码结构

打开开发者工具，可以看到小程序项目和公众号网页项目两个选项，我们选择小程序项目，填写完项目目录、APPID、项目名称就进入开发工具主页了。

1. 代码结构与基本配置

   app.js      帮助我们注册一个微信小程序应用
   
   app.json    帮助我们进行微信小程序的全局配置，包括网络请求的超时时间、窗口的路径、各个页面的注册路径
   
   app.wxss    帮助我们设置微信小程序的一个全局的样式
   
   project.config.json     由开发者工具帮我们在根目录下生成，保存微信开发者工具的配置信息，方便大家进行自己的一些个性化设置
   
   pages   文件夹，里面存放的是微信小程序里所有的页面，便于管理。每个小程序页面最多由四个文件组成js文件(帮我们处理微信小程序页面的逻辑和一些数据交互)、json文件(微信小程序页面的配置信息)、wxml文件(帮我们展示微信小程序页面的一些元素和内容)、wxss文件(帮我们设置微信小程序页面元素的样式)
   
   utils   一般存放的是一些工具的函数，达到代码复用的目的
   

2. 配置文件介绍（包括app.json全局配置文件和页面配置文件）

   app.json可以配置项
   
   Pages：注册我们微信小程序的所有页面
   
   tabBar：小程序如果是多tab的页面，通过tabBar的配置项来制定我们tab栏的表现
   
   networkTimeout:设置各个网络请求的一个超时时间
   
   debug:开启debug模式在开发者工具的控制台打印我们需要的信息
   
   navigationStyle:导航栏的样式
   
   page页面的json可以配置项
   
   disableScroll:设置页面是否开启滚动
   
   两者都可以配置的项
   
   navigationBarBackgroundColor:设置导航栏的背景色
   
   navigationBarTextStyle:设置导航栏的文字样式
   
   navigationBarTitleText:设置导航栏的标题文字
   
   backgroundColor:设置窗体的背景颜色
   
   backgroundTextStyle:设置窗体下拉时的一个文字样式
   
   onReachBottomDistance:
   
   enablePullDownRefresh:设置微信小程序或单个页面下拉刷新时的一个表现
   
   如果小程序的全局配置和单个页面的window的一些配置项重复了，那么页面的配置项会覆盖全局配置项。
   

   3. 开发工具的内容
      页面左侧包括模拟器、编辑器、调试器

      编译:我们可以自己设置自己需要的一些编译场景

      预览功能:可以让本地代码在真机上预览

      远程调试功能:通过网络连接让我们手机运行的小程序进行一个调试

      切后台:帮我们快速切到不同的场景值

      清缓存:可以清除开发者工具和设备的一些文件缓存，数据缓存，网络缓存等

      上传：帮助我们把本地代码上传到管理后台，然后默认设置为我们的一个开发版本（小程序的版本包括预览、开发、体验、审核、线上五个版本，）

      测试功能：微信给我们随机分配4-8中机型，测试小程序页面的首屏加载时间，CPU占比等

      腾讯云：帮助我们构建一个小程序的开发和线上环境

      调试器：包括console控制台打印模块、sources模块会列出我们小程序页面所有脚本文件、network面板展示各个网络请求的状态信息以及请求资源的一个响应数据等、storage面板是当我们在小程序里调用wx.setStorege和wx.setStorageSync这个函数设置我们的缓存的时候，我们在这里可以动态的修改这些缓存数据、AppData是小程序页面上真实展示的一个数据、wxml面板展示了小程序页面的各个组件元素，并且可以对元素进行一个样式的修改、sensor面板是我们的一个地理位置信息和设备旋转角度的展示