03.小程序代码结构简介

• 那么在我们刚刚下载和安装完微信开发者工具之后,我们一起来打开这个工具,我们需要去进行微信的扫码登陆,在登录之后,我们可以看到这样的一个界面,左下角有我们微信账号的一个头像,我们也可以去切换我们的一个账号

  
  
  image.png
  
  
  image.png

• 这个界面,我们去创建两种项目,一种是小程序的项目,另一种是公众号网页的项目,这里我们选择去创建一个小程序的项目,点击创建小程序项目

  
  
  image.png

• 点击创建小程序项目

  
  
  image.png
• 我们来到了第二个界面,这个界面需要我们去输入三种信息.第一种是我们的一个项目目录,第二个是APPID,第三个是我们的一个项目名称,项目目录这里我们就一般填入我们小程序项目的一个根目录;APPID是我们之前申请的一个微信小程序账号的APPID,项目名称这里我们可以填入我们自己想要输入的一个项目名,那么如果我们项目目录填入一个空目录会怎么样呢?

• 微信开发者工具会检测到如果我们填入的是一个空的目录,它会出现一个快速启动的模板的一个选项,我们可以通过这个选项来快速地在我们本地创建一个微信小程序的项目

  
  
  image.png

• 我们在输入完信息点击确定后,我们来到了这样的一个界面,这个是我们微信开发者工具的一个功能界面

  
  
  image.png

• 我们在上面看得微信开发者工具,它上面有一个工具栏,下面有我们的一个模拟器,还有代码编辑器以及我们的一个调试器,微信开发者工具主要就分为这四个模块,后面我们在创建微信小程序项目的时候,会对这四个模块进行一个详细的了解

  
  
  image.png

• 上手第一个小程序--小程序代码结构与基本配置,我们刚刚创建的小程序,它的一个目录结构和代码结构是怎么样的

  
  
  image.png
  
  
  image.png
• 帮我们注册一个微信小程序,然后帮我们配置微信小程序它的一个全局的配置信息,以及帮我们去设置一下微信小程序它的一个全局样式,还有我们一个project.config.json的文件,这个文件的作用就是保存.我们的微信开发者工具的配置信息,因为我们大家平常在使用一个工具的时候,都会针对各自的喜好,去做一些个性化的设置,例如界面的颜色,编译的配置等等,但是我们换了另一台电脑,重新安装这个工具的时候,往往还需要自己去重新配置,考虑到这一点,微信小程序的开发者工具会帮我们在每一个项目的根目录下生成一个这样的文件,当我们重新安装工具,或者换电脑的时候.我们只需要把我们这个项目的代码导入进去,开发者工具就可以自动地去帮我们恢复这个项目的个性化设置
• 那么,app.js 主要就是帮我们的微信小程序去注册一个这样的微信小程序应用,
• 然后 app.json 就是帮我们去进行一个微信小程序的一个全局配置,包括我们的一些网络请求的超时时间,还有我们一些窗口的表现,还有我们各个页面的一个注册的路径,
• 然后app.wxss 这个文件呢是帮我们去设置我们微信小程序全局的一个样式那么我们看到这个目录结构下还有两个文件夹
• pages里面存放的是我们微信小程序,所有的一个小程序页面,每个小程序页面,我们最多是由四个文件组成,分别是js文件,json文件,wxml文件和wxss文件,js文件是帮我们去处理微信小程序页面的逻辑和一些数据交互
• json文件呢是帮我们去配置,微信小程序页面的一个配置信息
• wxml文件呢是用来去帮我们展示我们小程序页面的一些元素和内容
• wxss文件是帮我们去设置我们这些小程序页面,这些元素的一个样式
• 下面util.js的文件,主要一般我们会存放的是一些工具的函数,可以达到我们代码复用的一个目的

上面就是我们这个小程序应用的一个简单的代码结构