01 小程序开发工具介绍

本项目为样例DEMO，项目地址：https://github.com/Jack-WangZhe/Young-Blood-Competition-Mini-Program

一.小程序开发工具

1.微信开发工具介绍

• 快捷键command+p打开快速搜索文件功能
• 快捷键command+e搜索最近打开的文件
• 按F1可以查看对应的快捷键
• 可以通过选项栏中的设置 -> 设置对应快捷键内容

二.小程序基础知识

1.小程序文件类型

• 样式
  • wxss -> css
• 骨架
  • wxml -> html
• 业务
  • js -> js
• 配置
  • json

2.小程序组织方式

• 组织结构（组件式编程思想）
  • app.json全局配置文件
  • app.wxss
  • app.js全局JS文件
  • project.config.json小程序环境配置文件【可以没有】
  • Page
    • wxml
    • wxss
    • js逻辑控制文件
    • json页面配置文件【可以没有】
    • component1
      • wxml
      • wxss
      • js逻辑控制文件
      • json页面配置文件【可以没有】
    • component2
  • Page…

3.初始化小程序

• 按流程新建小程序

• 当在pages下新建目录命名为classic，在classic目录下创建pages时会生成js/json/wxml/wxss文件，且会将此pages注册到app.json文件中

  {
    "pages": [
      "pages/classic/classic"
    ]
  }
  

• 此时页面显示的内容就是classic.wxml文件里的内容

• 配置文档参见：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

4.框架json配置项

• pages
  • 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
  • 数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改
• window
  • 用于设置小程序的状态栏、导航条、标题、窗口背景色
  • 详细内容参见文档即可
  • 注：当希望设置占用到手机屏幕顶端的样式时，可以通过设置navigationStyle为custom将样式从最上方进行设置，但右上角胶囊按钮仍会保留
  • 上拉和下拉时都会有对应的背景内容是通过backgroundColor属性控制的，对于IOS来说可以设置下拉时上方显示的颜色backgroundColorTop和上拉时下方显示的颜色backgroundColorBottom
  • 可以通过enablePullDownRefresh启用下拉刷新等

5.组件

• 视图容器
  • cover-image
  • cover-view
  • movable-area
  • movable-view
  • scroll-view
  • swiper
  • swiper-item
  • view
• 组件wxml跟html很相近，只不过小程序提供了一些专门的组件（view等等），我们也可以自己定义对应的组件