微信小程序开发 目录结构

从课程中的总结了微信小程序开发工具的一些基础信息，其目录结构的信息

微信小程序的目录结构主要包括以下几个部分，这些部分共同构成了小程序的基础框架和页面展示。以上就是一个微信小程序的基本目录结构。在实际开发中，开发者可以根据项目需求进行适当的调整和扩展。小程序的所有页面都存放在。

小程序包含一个描述整体程序的app和多个描述各自页面的page以及一个提供公共方法的工具类uril。 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： 文件 必需 作用 app.js 是 小程序逻辑 app.json 是 小程序公共配置 app.wxss 否 小程序公共样式表 一个小程序页面由四个文件组成，分别是： 文件类型 必需 作用 js 是 页面逻辑 wxml 是 ...

我们在这个部位进行定义我们的页面，小程序的一个页面由四个文件组成：js类型文件、wxss类型文件、json类型文件、wxml类型文件，我们创建文件会新建一个文件夹，右键新建Page，会自动创建四个文件，并把文件路径放入app.json中注册。包含了所有小程序的页面，也就是我们创建定义一个页面我们必须要在这个pages数组中进行注册，否则无法显示该页面（与vue的路由组件比较相似）app.js是小程序逻辑，app.json是小程序配置，app.wxss是小程序公共样式表。：是页面的必须成分，作用是页面结构；

开发前准备 小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。 小程序开发前准备： ①申请账号 ②安装开发工具 申请账号 开发小程序之前需要先注册一个小程序账号，通过这个帐号你就可以管理你的小程序。 账号申请： 进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。 网址：https://mp.weixin.qq.com ...

微信小程序的宿主环境就是微信App本身，和系统一个道理比如华为的Harmony ,苹果的ios,然后绝大多数手机的Android系统，安卓的应用无法在ios上面运行，反之也是一样，即宿主环境是程序运行所必须的依赖环境，离开宿主环境的软件没有任何意义（跑都跑不起来）。注意：页面中的.wxss文件的样式会覆盖掉app.wxss文件的样式，同样页面中的.json文件也会将全局配置文件app.json文件的window中相同的配置项覆盖掉。.js 文件，（页面的脚本文件，存放页面的数据，事件处理函数等）

微信小程序 - 项目目录说明

微信小程序的目录结构较为简洁，但包含了多个重要的文件和文件夹，帮助开发者管理不同的资源和功能。project：存放微信小程序的主要代码和资源。：存放所有的依赖包和库（如果使用了 npm）。：项目的配置文件，包含了项目的基本信息、依赖等。README.md：项目的说明文件，介绍项目的基本情况。接下来，我们会详细介绍每个文件和目录的作用及其具体使用方法。

setData()函数的参数接收一个对象，以（key,value）的形式表示将key在this. data中对应的值改变成Value；在Page（）中，使用setData函数将数据从逻辑层发送视图层，同时改变对应的this,data的值；选好你自己想要的模板，（一般我们是使用：JS模板），选好后单击”确认“注意：我们的页面文件是创建在”pages“下的（小伙伴们别创建错了！逻辑层就是所有的 .js脚本文件的集合。注意：logs:是日志文件，自带的文件。点开它会发现里面就会有 4个文件。

pages目录中有两个子目录，分别是index和logs，每个子目录中保存着一个页面相关文件。通常，一个页面包含4个不同扩展名（.wxml、.wxss、.js和.json)的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。

微信小程序的主体部分由三个文件组成app.js:小程序逻辑文件，主要用来注册小程序全局实例。app.json:小程序公共设置文件，配置小程序全局设置。app.wxss:小程序主样式表文件，类似HTML的，CSS文件。project.config.json:文件是式项目配置文件。pages:目录中保存着一个页面的相关文件。index：.js文件：页面逻辑文件，在该文件中编写javaScript代码控制页面的逻辑。.wxml文件:页面结构文件，用于设计页面的布局，数据绑定。

通常，一个页面包含4个不同扩展名(.wxml、.wxss、.js和.json)的文件。单击wer文件，再点击 加号创建4个文件（wer.js、wer.json、wer.wxml、wer.scss）并在wer文件夹中的.js、.wxml、.jsom文件编写代码。对于微信小程序面言，视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构;index.wxml:页面结构文件，用于设计页面的布局、数据绑定等。app.wxss:小程序主样式表文件，类似HTML的.css文件。

使用npm 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 首先我们需要初始化项目包，可以看到项目根目录生成了包配置文件package.json 使用vant-ui 通过 npm 安装 npm i @vant/weapp -S --production npm install --production 构建 npm 包 打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建.