微信小程序开发
一,小程序基础知识
1.了解:
2.介绍:
主体文件 又称小程序全局文件,顾名思义,全局文件能够作用于整个小程序,影响到小程序的每个页面,且主体文件必须放到项目的根目录下,主要由三部分组成:
文件名 | 作用 | 是否必须 |
---|---|---|
app.js | 小程序入口文件 | 必须 |
app.json | 小程序的全局配置 | 必须 |
app.wxss | 小程序的全局样式 | 非必须 |
页面文件 是每个页面所需的文件,小程序页面文件都存放在 pages 目录下,一个页面一个文件夹,每个页面通常由四个文件组成,每个文件只对当前页面有效:
文件名 | 作用 | 是否必须 |
---|---|---|
.js | 页面逻辑 | 必须 |
.wxml | 页面结构 | 必须 |
.wxss | 页面样式 | 非必须 |
.json | 页面配置 | 非必须 |
📌 注意事项:
-
页面文件,wxss、json 文件能够覆盖主体文件中的样式和配置
-
强烈建议:页面文件夹名称和页面文件名称要保持一致 感叹号
新建小程序文件和文件夹作用清单 :
├─pages ➡ 小程序页面存放目录
│
│ ├─index ➡ index 文件夹代表是 index 页面所需的文件
│ │ index.js ➡ index 页面逻辑
│ │ index.json ➡ index 页面配置
│ │ index.wxml ➡ index 页面结构
│ │ index.wxss ➡ index 页面样式
│ .eslintrc.js ➡ Eslint 配置文件
│ app.js ➡ 小程序入口,即打开小程序首页执行的项目
│ app.json ➡ 小程序的全局配置
│ app.wxss ➡ 小程序的全局样式
│ project.config.json ➡ 小程序开发者工具配置
│ project.private.config.json
│ sitemap.json ➡ 小程序搜索优化
3.如何调试小程序
在进行项目开发的时候,不可避免的需要进行调试,那么如何调试小程序呢 ?
📌 注意事项:
微信开发者工具缓存非常严重❗❗❗❗
如果发现代码和预期不一样,先点击编译❗
编译后还是没有达到预期的效果,就需要清除缓存❗ 甚至重启项目才可以❗
4. 如何新建页面
第一种方式:
-
在 pages 目录上 点击右键
新建文件夹
,输入页面目录的名称,例如:list -
在 list 目录上 点击右键
点击 page
,输入页面文件的名称,例如:list
📌 注意事项:
在输入页面文件名称的时候,不要输入后缀名 ❗
新建页面成功以后,会在 app.json 的 pages 选项中新增页面路径
第二种方式:
在 app.json 的 pages 选项中,新增页面路径即可
在新增页面目录以后,会自动在 pages 目录下生成页面文件