小程序基础 —— 08 文件和目录结构

文件和目录结构

一个完整的小程序项目由两部分组成:主体文件、页面文件:

  • 主体文件:全局文件,能够作用于整个小程序,影响小程序的每个页面,主体文件必须放到项目的根目录下;

    • 主体文件由三部分组成:
      • app.js:小程序入口文件;
      • app.json:小程序的全局配置文件;
      • app.wxss:小程序的全局样式;

    在上一节创建项目的时候,我们已经可以看到对应的这三个文件:

    注意事项:主体文件的名字必须是 app,app.js 和 app.json 文件是必须的!

  • 页面文件:页面文件是每个页面所需的文件,小程序页面文件都存放在 pages 目录下,一个页面一个文件夹;

    上图中的 pages 中有一个 index 页面,index 页面是一个单独的文件夹,每个页面由四个文件组成,这四个文件只对当前页面生效,这四个文件分别为:

    • .js:页面逻辑
    • .wxml:页面结构
    • .wxss:页面样式
    • .json:小页面配置

    注意事项:.js 文件和 .wxml 文件是必须的;

在说完主体文件和页面文件后,我们可以打开上一节创建的小项目新文件进行分析。

在打开这个新项目之后,先看一个注意事项,如下图:

小程序目前有两种渲染模式,一种是 Skyline 渲染模式,另一种是 WebView 渲染模式。SkyLine 是最新的渲染模式,目前还不是很成熟,因此需要将这个项目的渲染模式从 SkyLine 修改为 WebView 渲染模式。

我们可以在项目文件中直接进行修改,点击项目文件中的 app.json 文件,找到以下三个属性:

  • renderer
  • rendererOptions
  • componentFramework

在 app.json 中将这三个配置项去掉,然后保存,重新刷新即可将渲染模式调整为 WebView 模式;

在调整渲染模式之后,接下来看一下整个项目的目录结构:

  • 在分目录下有三个以 app 开头的文件,这三个文件是项目的主体文件,也是全局文件;
  • 在项目的根目录下有一个 pages 文件夹,pages 中存放的是小程序的页面,目前仅有一个 index 页面,一个页面由四个文件组成;
  • 在项目的根目录下还有一个 components 文件夹,它是用来存放每个页面的公共组件的;
  • 在根目录下还有三个 .json 文件,以 .json 结尾的都是配置文件;

参考视频:尚硅谷微信小程序开发教程

相关推荐
流***陌9 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好2679 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
2501_9151063210 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214310 小时前
iOS 26 崩溃日志解析,新版系统下崩溃获取与诊断策略
android·ios·小程序·uni-app·cocoa·iphone·策略模式
2501_9160137413 小时前
iOS 推送开发完整指南,APNs 配置、证书申请、远程推送实现与上架调试经验分享
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090618 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
知识分享小能手20 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
2501_915106321 天前
JavaScript编程工具有哪些?老前端的实用工具清单与经验分享
开发语言·前端·javascript·ios·小程序·uni-app·iphone
Terio_my1 天前
微信小程序开发从零基础到项目发布的全流程实战教程(四)
微信小程序·小程序
2501_916013741 天前
iOS 上架 App 全流程实战,应用打包、ipa 上传、App Store 审核与工具组合最佳实践
android·ios·小程序·https·uni-app·iphone·webview