自己的微信小程序学习笔记——小程序开发工具的使用及项目文件说明

Posted 2022-04-11 小小河神纠结多

系列文章目录

---

文章目录

• 系列文章目录
• 一、小程序开发工具的设置
• 二、文件夹说明
• • 1.完整文件结构
  • 2.页面文件夹的文件说明
  • 3.重点文件说明

---

一、小程序开发工具的设置

1. 快捷键设置及查看：
   

2. 项目设置
   勾选不校验合法域名

二、文件夹说明

├─components ————>组件文件夹
├─images ————>图片文件夹
└─pages ————>页面文件夹
    ├─base ————>第一个页面
    └─cloud ————>第二个页面

1.完整文件结构

│  app.js
│  app.json
│  app.wxss
│  envList.js
│  sitemap.json
│
├─components
│  └─cloudTipModal
│          index.js
│          index.json
│          index.wxml
│          index.wxss
│
├─images
│      arrow.svg
│      cloud_Control.png
│      cloud_Control_def.png
│      database.png
│      database_def.png
│
└─pages
    ├─base
    │      base.js
    │      base.json
    │      base.wxml
    │      base.wxss
    │
    └─cloud
            cloud.js
            cloud.json
            cloud.wxml
            cloud.wxss

2.页面文件夹的文件说明

每个页面文件中都有四个文件，而它们的名称通常与它们所在的文件夹名称相同。例如：

└─pages
    ├─base
         base.js
         base.json
         base.wxml
         base.wxss

其中：

• base.js: 逻辑文件，可理解为要实现的功能，主要负责页面交互
• base.json: 配置文件，配置状态栏文字，背景颜色等
• base.wxml: 页面架构
• base.wxss: 页面样式文件，字体，颜色等

3.重点文件说明

       每个小程序，都有一个不可或缺文件app.js、app.json及app.wxss，它们相当于C语言中的main.c，是主程序执行的入口，一般在工程的第一层目录中。它们的作用和上一节说的文件类型相同。

切记：

• 这三个文件的名字是不能改的
• app 文件属于全局文件，它们的功能作用于所有页面，但是会被单独页面配置所覆盖，例如base.json内的配置会覆盖app.json文件的相同配置