小程序概念和准备

小程序的特点

• 无需下载，即用即走(实际是有下载的，只是用户几乎感知不到)
• 逻辑相对简单
• 使用频率相对较低
• 性能需求相对较低

小程序开发准备

• 1. 申请小程序账号(appid)
• 2. 下载并安装微信开发者工具

小程序快捷键查看

• 开发中，我们经常要使用快捷键，那么小程序都有哪些快捷键呢？我们可以把鼠标光标放入代码区域后点击F1,就可以看到所有的快捷键
  image.png

小程序常用操作

• 当我们写好代码要运行的时候，除了点击编译按钮之外，我们点击ctrl+s按钮也会自动帮我们编译
• 如果想看项目配置信息和状态，有两种方式，一种是编辑器最上边工具栏里的设置->项目设置,还有一种就是点击右上角详情
  image.png

小程序的目录结构

• pages下的每个文件夹都对应的是一个页面，而每个文件夹下会有4个文件。

1. js文件是页面的逻辑----对应web页面的js

2. json文件是相关的配置----对应web页面的json，页面中的json文件不是必须的，但是如果有这个文件，就不能为空，否则会报错，比如我们可以写一个空对象

3. wxml文件是页面的骨架架构----对应web页面的html

4. wxss文件是页面的样式----对应web页面的css

   
   image.png

• utils文件夹，主要用来存放共用JS，比如我们常用的时间格式化的函数。

  
  image.png

• 根目录下的这三个文件是属于应用程序的文件。注意，这里是没有wxml文件的。页面可以有多个，但是作为应用程序级别的文件的这3个文件是唯一的。
  app.js是应用程序级别的逻辑
  app.json是应用程序级别的配置
  app.wxss是应用程序级别的全局样式

  
  image.png

• 项目配置文件project.config.json
  小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，在工具上做的任何配置都会写入到这个文件，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

• sitemap.json
  小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json，则默认为所有页面都允许被索引

样式文件和配置文件优先级，遵循的是就近原则

• 比如同时给text配置color样式。如果pages下的wxss和app.wxss里都配置了，那么会优先取pages下的wxss的color.
• 同样的道理，我在app.json配置了navigationBarBackgroundColor的颜色，也在页面的json里配置了navigationBarBackgroundColor的颜色，会优先使用页面的json配置
• 小程序目录结构是相对自由的，上边说的结构只是项目初始化时官方推荐的结构，比如pages的名称，也是可以更改的。pages下的文件夹，也并不是一定要有4个文件，多写个JS文件也没什么不可。