新建一个小程序以及项目的结构

布满荆棘的人生 2024-03-24 11:00 63阅读 0赞

### 创建一个自己的小程序 ###

#### 1、进入程序，点击+号 ####

![在这里插入图片描述][bf74fcd0e0eb4816bbaaddb477adb8f0.png]

#### 2、不使用云服务的模式，选JS模版 ####

![在这里插入图片描述][31a76e792fa44e7d88e988149aa419d8.png]

#### 3、效果 ####

![在这里插入图片描述][2a87d4ea5f6d4b50ac66a48f341b4f19.png]

#### 4、查看页面的方式 ####

##### 查看左边的模拟器 #####

![在这里插入图片描述][60b203470b0244c389199236207732f9.png]

##### 通过手机微信预览 #####

使用手机扫，可以在手机查看  
![在这里插入图片描述][9b3b5f2bdfae42eeacd7a7ae9c1ec797.png]

### 项目结构 ###

#### 1、项目的基本组成结构 ####

*  ① pages 用来存放所有小程序的页面
 *  ② utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
 *  ③ app.js 小程序项目的入口文件
 *  ④ app.json 小程序项目的全局配置文件
 *  ⑤ app.wxss 小程序项目的全局样式文件
 *  ⑥ project.config.json 项目的配置文件
 *  ⑦ sitemap.json 用来配置小程序及其页面是否允许被微信索引  
    ![在这里插入图片描述][1b29b2793bcd4d45ac0e170ef0d8451e.png]

#### 2、小程序页面的组成部分 ####

小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在，如图所示：

其中，每个页面由 4 个基本文件组成，它们分别是：

*  ① .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
 *  ② .json 文件（当前页面的配置文件，配置窗口的外观、表现等）
 *  ③ .wxml 文件（页面的模板结构文件）
 *  ④ .wxss 文件（当前页面的样式表文件）  
    ![在这里插入图片描述][e00d4828483a4b34876bd48b1fa805d1.png]

#### 3、JSON 配置文件 ####

##### 3.1、JSON 配置文件的作用 #####

JSON 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现。小程序项目中也不例外：通过不同的 .json 配置文件，可以对小程序项目进行不同级别的配置。

小程序项目中有 4 种 json 配置文件，分别是：

*  ① 项目根目录中的 app.json 配置文件
 *  ② 项目根目录中的 project.config.json 配置文件
 *  ③ 项目根目录中的 sitemap.json 配置文件
 *  ④ 每个页面文件夹中的 .json 配置文件

##### 3.2、app.json 文件 #####

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。

Demo 项目里边的 app.json 配置内容如下：  
![在这里插入图片描述][f3cf0aed956c4f72ae3c9f8cfc4ae7a1.png]

简单了解下这 4 个配置项的作用：

*  ① pages：用来记录当前小程序所有页面的路径
 *  ② window：全局定义小程序所有页面的背景色、文字颜色等
 *  ③ style：全局定义小程序组件所使用的样式版本
 *  ④ sitemapLocation：用来指明 sitemap.json 的位置

##### 3.3、project.config.json 文件 #####

project.config.json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如：

*  setting 中保存了编译相关的配置
 *  projectname 中保存的是项目名称
 *  appid 中保存的是小程序的账号 ID

##### 3.4、sitemap.json 文件 #####

微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引。

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。  
![在这里插入图片描述][f4c9e3e5fcfe4461a998a94ffedba804.png]  
注意：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 为 false。

##### 3.5、 页面的 .json 配置文件 #####

小程序中的每一个页面，可以使用 .json 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json 的 window 中相同的配置项。

例如：将头部背景色改为蓝色  
![在这里插入图片描述][c8462273edcf4d039fd195464f6f432c.png]

##### 3.6、 新建小程序页面 #####

只需要在 app.json -> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件，如图所示：  
![在这里插入图片描述][a721d51589474923bac034954cd39c95.png]

##### 3.7、修改项目首页 #####

只需要调整 app.json -> pages 数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染，如图所示：  
![在这里插入图片描述][7cae21152c324a42b6863d2364f4ae61.png]

#### 4、WXML 模板 ####

##### 4.1、什么是 WXML #####

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。

##### 4.2、 WXML 和 HTML 的区别 #####

① 标签名称不同

*  HTML （div, span, img, a）
 *  WXML（view, text, image, navigator）

② 属性节点不同

③ 提供了类似于 Vue 中的模板语法

*  数据绑定
 *  列表渲染
 *  条件渲染

#### 5、WXSS 样式 ####

##### 5.1、什么是 WXSS #####

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。

##### 5.2、WXSS 和 CSS 的区别 #####

① 新增了 rpx 尺寸单位

*  CSS 中需要手动进行像素单位换算，例如 rem
 *  WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算

② 提供了全局的样式和局部样式

*  项目根目录中的 app.wxss 会作用于所有小程序页面
 *  局部页面的 .wxss 样式仅对当前页面生效

③ WXSS 仅支持部分 CSS 选择器

*  .class 和 \#id
 *  element
 *  并集选择器、后代选择器
 *  ::after 和 ::before 等伪类选择器

#### 6、JS 逻辑交互 ####

##### 6.1、小程序中的 .js 文件 #####

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作。例如：响应用户的点击、获取用户的位置等等。

##### 6.2、小程序中的 JS 文件分为三大类 #####

分别是：  
① app.js

*  是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序

② 页面的 .js 文件

*  是页面的入口文件，通过调用 Page() 函数来创建并运行页面

③ 普通的 .js 文件

*  是普通的功能模块文件，用来封装公共的函数或属性供页面使用

结束！！！！

--------------------

该用什么言语来安慰此时如此糟糕的自己。

[bf74fcd0e0eb4816bbaaddb477adb8f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/09f8b463f7fe43ddac385568b457dcf6.png
[31a76e792fa44e7d88e988149aa419d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7ce1d73a46034863b30d3ec007ffc1c8.png
[2a87d4ea5f6d4b50ac66a48f341b4f19.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c2a115f8a0d849e2aa50e24e9f9b66dd.png
[60b203470b0244c389199236207732f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/6d459975bd9243a394daff4a412eb746.png
[9b3b5f2bdfae42eeacd7a7ae9c1ec797.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/207a8fb4a5f04d85bf9e8b219db13dca.png
[1b29b2793bcd4d45ac0e170ef0d8451e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/4eb4f128a3c64057a9c6633958c6c3b8.png
[e00d4828483a4b34876bd48b1fa805d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/3fd9b03ec92c4328a9b7f7026b575206.png
[f3cf0aed956c4f72ae3c9f8cfc4ae7a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c655d040aaef49cda5d3f0bf272981b6.png
[f4c9e3e5fcfe4461a998a94ffedba804.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c913b72c13a143b7a44c9b2245d01968.png
[c8462273edcf4d039fd195464f6f432c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/5dfc951b2647412cadeb9e0a6a2dd9d9.png
[a721d51589474923bac034954cd39c95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a71aeea52b4340ab966cd47f184b9193.png
[7cae21152c324a42b6863d2364f4ae61.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/b01ce5abe1f44d64a249b8c04f39dd61.png