微信小程序:目录结构

最近开始接触小程序了,学习的话当然是从官方文档开始。

附上微信小程序官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/

文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

1、一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

文件 必填 作用
app.js 小程序逻辑
app.json 小程序公共设置
app.wxss 小程序公共样式表

2、一个小程序页面由四个文件组成,分别是:

文件类型 必填 作用
js 页面逻辑
wxml 页面结构
wxss 页面样式表
json 页面配置

注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

时间: 2024-10-04 15:52:25

微信小程序:目录结构的相关文章

微信小程序目录结构

微信小程序中的目录结构: 一个quick start项目的目录结构: app.js用于定义项目的启动入口 app.json用于定义每个页面 原文地址:https://www.cnblogs.com/Hahahang/p/10798797.html

微信小程序-目录结构

1.一个小程序主体部分由三个文件组成,必须放在项目的根目录: app.js:小程序逻辑 必填 app.json:小程序公共配置 必填 app.wxss:小程序公共样式表 不必填 ----------------------------------------------------------------- 2.一个小程序页面由四个文件组成,分别是: js:主要是给页面传递数据和绑定的方法 必填 wxml:页面的布局 必填 wxss:页面样式 不必填 json:页面配置 不必填 为了方便开发者减

微信小程序代码结构

我们通过开发者工具快速创建了一个 QuickStart 项目.你可以留意到这个项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 接下来我们分别看看这4种文件的作用. JSON 配置 我们可以看到在项目的根目录有一个 app.json 和 project.config.json,此外在 pages/logs 目录下还有一个 logs.json,我们依次来说明一下

微信小程序入门教程

需要注册微信公众号小程序:https://mp.weixin.qq.com/wxopen/waregister?action=step1 下载微信小程序开发IDE : https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 在微信小程序中设置项获取APPID,如图: 在IDE 中新建一个微信小程序: 微信小程序目录结构: js ---------- JavaScrip文件 json -------- 项目配置

微信小程序基本目录结构学习

今天我们就以firstdemo为例,介绍一下小程序的基本目录结构.当我们打开一个微信小程序项目后,点击进入"编辑"菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文件app.js文件,全局文件app.json文件,图片编辑文件工具app.wxss文件.<ignore_js_op> 小程序目录结构的整体结构如下:<ignore_js_op> <ignore_js_op> 我们详细介绍下小程序目录中每个文件和文件夹的功

微信小程序的目录结构

当我们打开一个微信小程序项目后,点击进入"编辑"菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文件app.js文件,全局文件app.json文件,图片编辑文件工具app.wxss文件. 小程序目录结构的整体结构如下: 小程序包含一个描述整体程序的APP和多个描述各自页面的page. 文件 必填 作用 app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表 一个小程序页面由四个文件组成,分别是: 文

微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器

我的微信开发者工具 开篇语 好不容易,终于把所有的基础课程全部看完了!昨天,我很高兴地开始了看别人做的项目进行深度的学习.其实也说不上是项目吧,更多的像是一种给新手看的示例代码.然后我在这些代码上面进行我自己的改进.最后也就有了接下来我会给大家带来的这篇文章中的项目.这个项目是完整的,它包括了一个原本的示例代码中带着的莫名其妙的动画组件(可能是为了更多额展示微信小程序的控件体系)以及跑步的组件,还有我后来自己加上去的一个音乐播放组件.总共也就有了三个的功能:动画效果展示:跑步的定时以及定位功能:

小记一笔 -微信小程序开发随笔

序言: 今年的01月09号备受关注的微信小程序正式上线了, 众多的互联网企业也相继发布了自家的小程序.趁着最近上班不是特别忙,自己闲来无事也跟着捣鼓捣鼓了一个个人记帐用的小程序:小记一笔.用户可以方便.快捷的将自己平时的开销与收入记录下来,还有各种类型的统计,以便实时的准确掌握自己的财务状况.目前此程序已正式上线,大家可以在微信中搜索"小记一笔"点击使用,下面是其中几张效果截图:      准备工作: 1.要开发微信小程序,首先得有工具,可以先去微信公众平台官网(https://mp.

微信小程序开发工具使用与设计规范(二)

上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 >>>微信小程序开发工具使用 下载安装小程序 下载 :微信web开发者工具 下载:官方DEMO源码 本系列教程使用的是mac版的开发者工具. 安装完成后,打开微信web开发者工具 1.扫码登录,绑定个人微信 2.扫码登录后,新建或导入已有项目(这里使用官方提供的DEMO源码quickstart) 3.新建项目,导入刚下载的quic

微信小程序开发:学习笔记[1]——Hello World

微信小程序开发:学习笔记[1]--Hello World 快速开始 1.前往微信公众平台下载微信开发者工具. 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 2.打开微信开发者工具,并新建项目 打开微信开发者工具,选择新建小程序项目,我们先不需理解AppID的概念,新建项目时选择无AppID,并取消勾选"建立普通快速启动模板"的选项. 3.在根目录添加代码 1.在根目录创建app.json文件 2.