微信小程序开发工具的目录结构

1、四个基本文件（由四个文件最终编译成一个完整页面）

1 .js文件：页面脚本文件，存放页面数据、事件处理函数等。——处理用户操作

app.js文件：整个项目的入口文件，通过调用App（）函数启动项目。
页面.js文件：页面入口文件，调用Page（）函数，创建并运行页面。
普通.js文件：普通功能模块文件，用来封装公共的函数或属性供页面使用。

2 .json文件：当前页面配置文件，配置窗口的外观、表现等。

3 .wxml文件：页面的模板结构文件。（WXML模板类网页HTML）

4 .wxss文件：当前页面的样式表文件。（WXSS：一套样式语言，用于描述WXML局部或全局的组件样式，类网页CSS）

2、一个项目的基本目录结构

pages：【文件夹】存放所有小程序的页面
- index文件—首页文件
- logs文件—日志文件
utils：【文件夹】用来存放工具性质模块[如：格式化时间的自定义模块]
app.js:项目入口文件
app.json:项目全局配置文件
- pages——页面路径[在此输入“pages/list/list”则工具自动创建新页面、替换其中数组的顺序可修改项目的首页]
- window——全局定义所有页面样式
- style——全局定义小程序组件所使用的样本
- sitemapLocation——指明sitemap.json的位置

app.wxss:项目全局样式文件
project.config.json:项目的配置文件
- setting——保存编译相关的配置【与右侧的本地设置同步】
- project name——项目名称 ≠ 小程序名称
- appid——小程序账号ID

sitemap.json:用来配置小程序及其页面是否允许被微信索引[利用“allow”或“disallow”配置当前页面是否被微信搜索]

3、宿主环境（IOS、Android）小程序是依托手机微信，小程序宿主环境包含以下四大类：

1.通信模型

通信主体：渲染层（WXML、WXSS）、逻辑层（JS脚本）

通信模型：渲染层与逻辑层之间通信、逻辑层与第三方服务器之间通信

2.运行机制

启动过程：

小程序代码包本地下载——>解析app.json文件——>执行app.js入口文件，调用App（）函数创建小程序实例——>渲染小程序首页——>启动完成

页面渲染过程：

加载解析页面.json文件——>加载页面的.WXML和.WXSS——>执行页面.js文件，调用Page（）函数创建页面实例——>完成渲染

3.组件（官方分为九大类组件）

视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问

4.API

事件监听API：以on开头，用来监听某些事件触发。
同步API：以Sync结尾，其执行结果可以通过函数返回值直接获取，若执行出错会抛出异常。
异步API：类似于jQuery中$.ajax(options)函数，需要通过success、fail、complete接收调用结果。

微信小程序开发工具的目录结构相关推荐

微信小程序开发工具项目创建步骤
账号申请后台小程序信息完善安装开发工具IDE 小程序项目搭建项目编译真机预览调试小程序开发前准备: ①申请账号 ②安装开发工具账号申请进入小程序注册页根据指引填写信息和提交相应的资料, ...
微信小程序开发工具npm用不了，报错“npm不是内部或外部命令,也不是可运行的程序”
微信小程序开发工具npm用不了,报"npm不是内部或外部命令,也不是可运行的程序"错时. 1.首先查看是否下载了Node.js.如果没有下载下载一个,最新版本的已经添加了环境变量, ...
@所有人，官网下载的微信小程序开发工具安装后黑屏咋办？
@所有人,官网下载的微信小程序开发工具安装后黑屏咋办? 一直这样,重复安装也是这样欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使 ...
微信小程序开发工具介绍及安装（中）
小程序开发工具的安装方法微信小程序开发工具的安装方法相对简单,并且适用于多个操作系统平台.以下是关于Windows.macOS和Linux三个平台上安装微信小程序开发工具的步骤和注意事项的详细介绍. ...
微信小程序开发工具介绍及安装（下）
开发工具的基本功能介绍微信小程序开发工具是一款强大的集成开发环境(IDE),旨在帮助开发者更便捷地创建.调试和发布微信小程序.它提供了丰富的功能和工具集,下面将对微信小程序开发工具的基本功能进行详细 ...
【微信小程序入门到精通】— 微信小程序开发工具的安装
目录前言一.注册小程序账号二.安装开发环境 2.1 微信小程序开发工具介绍 2.1 安装微信开发者工具总结前言微信小程序在我们日常使用中已经占据很大一部分了,此专栏是专门为了微信小程序学习 ...
微信小程序开发工具清除授权缓存/文件缓存/登录缓存等等
今天2.19.3.25 在开发微信小程序时,作为测试号想清除授权缓存,一直没有找到方法, 最后无意中看到了解决方法微信小程序开发工具清除授权缓存/文件缓存/登录缓存等等.完美解决
微信小程序开发工具中快捷键
微信小程序开发工具表面上是没有更多的样式类的工具,例如缩进.隐藏代码什么的. 现在总结一下小程序开发工具常用的一些快捷键: 格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 ...
最新版本微信小程序开发工具的使用
微信小程序简介微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送前言流程完事前言最近有同事离职了,交接了一个微信小程序的项目下来,源码放在了公司内部的GIT上面,当我下载下来维护之后发现,在微信 ...

微信小程序开发工具的目录结构

1、四个基本文件（由四个文件最终编译成一个完整页面）

2、一个项目的基本目录结构

pages：【文件夹】存放所有小程序的页面

index文件—首页文件

logs文件—日志文件

utils：【文件夹】用来存放工具性质模块[如：格式化时间的自定义模块]

app.js:项目入口文件

app.json:项目全局配置文件

pages——页面路径[在此输入“pages/list/list”则工具自动创建新页面、替换其中数组的顺序可修改项目的首页]

window——全局定义所有页面样式

style——全局定义小程序组件所使用的样本

sitemapLocation——指明sitemap.json的位置

app.wxss:项目全局样式文件

project.config.json:项目的配置文件

setting——保存编译相关的配置【与右侧的本地设置同步】

project name——项目名称 ≠ 小程序名称

appid——小程序账号ID

sitemap.json:用来配置小程序及其页面是否允许被微信索引[利用“allow”或“disallow”配置当前页面是否被微信搜索]