微信小程序项目结构简介

提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档文章目录一 框架全局文件app.jsonapp.jsapp.wxss其他全局文件注意事项二 微信小程序页面文件结构文件协作机制开发注意事项一 框架全局文件微信小程序的框架基于特定的文件结构全局文件是其中核心部分直接影响整个小程序的配置、逻辑和样式。一个小程序的框架全局文件主要有5个app.js文件app.json文件app.wxss文件project.config.json文件sitemap.json文件这5个文件必须放在项目的根目录中。如下图以下为关键全局文件及其功能说明app.json功能小程序全局配置文件定义页面路径、窗口样式、网络超时等。字段示例pages注册所有页面路径数组第一项为首页。window设置导航栏标题、背景色等。tabBar配置底部或顶部标签栏。app.js功能小程序逻辑入口文件定义全局变量、生命周期函数和事件监听。关键方法onLaunch监听初始化完成。onShow监听小程序启动或从后台进入前台。onHide监听小程序从前台进入后台。app.wxss功能全局样式文件作用于所有页面。优先级低于页面样式用于定义公共样式如字体、颜色。特性支持CSS大部分语法扩展了尺寸单位rpx响应式像素。其他全局文件project.config.json项目配置文件记录开发者工具个性化设置如编译配置。sitemap.json配置小程序页面是否被搜索引擎索引。注意事项全局文件需放置在根目录文件名固定不可修改。app.json的pages字段需至少包含一个页面路径否则报错。全局变量在app.js中通过getApp()获取避免直接修改。二 微信小程序页面文件结构微信小程序每个页面由wxml文件wxss文件js文件json文件四个文件组成共同实现页面功能与样式。创建一个项目在pages目录下就默认包含一个index文件夹即index页面该文件夹下面有四个文件。如下图下面分别介绍这四个文件WXML文件作为页面结构文件采用类似HTML的标签语法支持数据绑定和条件渲染。常用标签包括view、text、button等通过{{}}语法实现动态内容。WXSS文件负责页面样式语法与CSS基本一致。支持rpx单位适配不同屏幕提供import导入外部样式。样式规则仅对当前页面生效避免全局污染。JS文件包含页面逻辑通过Page()函数注册页面。可定义数据对象、生命周期函数、事件处理等。常用生命周期包括onLoad、onShow、onReady等。JSON文件配置页面窗口表现如导航栏标题、背景色等。配置项覆盖app.json的全局设置遵循JSON格式规范。文件协作机制WXML通过数据绑定与JS中的数据对象关联动态更新视图。WXSS为WXML提供样式支持JS处理用户交互与业务逻辑。JSON文件独立配置页面特性。开发注意事项页面文件必须同名且位于同一目录。WXML和WXSS不支持HTML和CSS的全部特性。JS中避免使用浏览器专用API需调用微信提供的接口。