微信小程序---目录结构

这篇具有很好参考价值的文章主要介绍了微信小程序---目录结构。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、总体目录 

微信小程序---目录结构

大体介绍

1.在utils中定义方法、工具等,主要使用common.js暴露接口

2.pages中放我们的页面

3.eslintrc.js文件在代码质量审查的时候的代码依赖

4.app.js、app.json、app.wxss是我们微信小程序代码的重要部分

app.js是小程序逻辑,app.json是小程序配置,app.wxss是小程序公共样式表

其中除了最后一个都是必须的组成文件

二、Pages

我们在这个部位进行定义我们的页面,小程序的一个页面由四个文件组成:js类型文件、wxss类型文件、json类型文件、wxml类型文件,我们创建文件会新建一个文件夹,右键新建Page,会自动创建四个文件,并把文件路径放入app.json中注册

1.js文件:是页面的必须成分,作用是实现页面逻辑;

2.wxml文件:是页面的必须成分,作用是页面结构;

3.json文件:不是页面的必须成分,作用是对页面进行配置;

4.wxss文件:不是页面的必须成分,作用用来配置页面样式表;

三、主体部分(app.js,app.json,app.wxss)

1.app.js的默认:

App函数作用是创建一个小程序实例,

onLaunch函数:是微信小程序的一个生命周期函数,代表着小程序启动后执行

globalData 用来定义小程序全局数据

微信小程序---目录结构

 2.app.json的默认

这个文件里边不允许加注释

pages(必须):包含了所有小程序的页面,也就是我们创建定义一个页面我们必须要在这个pages数组中进行注册,否则无法显示该页面(与vue的路由组件比较相似)

微信小程序---目录结构

 app.wxss

微信小程序---目录结构

 文章来源地址https://www.toymoban.com/news/detail-453445.html

到了这里,关于微信小程序---目录结构的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 微信小程序入门一~结构介绍

    一、结构介绍: ☆pages: 用来存放所有小程序的页面   .js: 页面的脚本文件,存放页面的数据、事件处理函数等   .json: 当前页面的配置文件,配置窗口的外观、表现等   .wxml: 页面的模板结构文件   .wxss: 当前页面的样式表文件 utils:用来存放工具性质的模块(如:格式化时

    2024年02月10日
    浏览(7)
  • 微信小程序入门及开发准备,申请测试号以及小程序开发的两种方式,目录结构说明

    微信小程序入门及开发准备,申请测试号以及小程序开发的两种方式,目录结构说明

    目录 1. 介绍 1.1 优点 1.2 开发方式 2. 开发准备 2.1 申请 2.2 申请测试号 2.2 小程序开发的两种方式 2.3 开发工具 3. 开发一个demo 3.1 创建项目 3.2 配置 3.3 常用框架 3.3 目录结构说明 3.4 新建组件 是一种不需要下载安装即可使用的应用,是一种 触手可及 的应用 可以借助微信的流量

    2024年02月05日
    浏览(10)
  • 搭建微信小程序环境及项目结构介绍

    搭建微信小程序环境及项目结构介绍

    访问微信公众平台,将鼠标的光标置于 账号分类 中的 小程序 上, 点击‘ 查看详情 ’ 点击“ 前往注册 ” 下方也可以 点击注册 : 小程序注册页面 : 步骤a :进入 小程序注册页 ,根据指引 填写信息 和 提交相应的资料 ,完成账号申请。 注意: 每个邮箱 仅能申请一个小程

    2024年02月07日
    浏览(40)
  • 微信小程序-----账号注册以及开发软件的下载与代码结构介绍

    微信小程序-----账号注册以及开发软件的下载与代码结构介绍

    目录 前言 微信小程序 1.微信小程序简单介绍 2.小程序与普通网页开发的区别 注册小程序开发帐号  微信小程序开发者工具下载 项目结构 1.小程序项目整体结构  2.小程序页面的组成部分 小程序组成部分 1. JSON 配置文件的作用 2. app.json 文件  3. project.config.json 文件  4. sitem

    2024年01月17日
    浏览(45)
  • 微信小程序的目录解析--【浅入深出系列002】

    微信小程序的目录解析--【浅入深出系列002】

    微信目录集链接在此: 详细解析黑马微信小程序视频–【思维导图知识范围】 难度★✰✰✰✰ 用免费公开视频,卷飞培训班哈人!打死不报班,赚钱靠狠干! 只要自己有电脑,前后项目都能搞!N年苦学无人问,一朝成名天下知! 黑马程序员微信小程序开发前端教程_零基础

    2024年02月16日
    浏览(11)
  • 微信小程序的目录解析--【浅入深出系列001外篇】

    微信小程序的目录解析--【浅入深出系列001外篇】

    微信目录集链接在此: 详细解析黑马微信小程序视频–【思维导图知识范围】 难度★✰✰✰✰ 用免费公开视频,卷飞培训班哈人!打死不报班,赚钱靠狠干! 只要自己有电脑,前后项目都能搞!N年苦学无人问,一朝成名天下知! 黑马程序员微信小程序开发前端教程_零基础

    2024年02月17日
    浏览(11)
  • 微信小程序 构建npm报错 没有生成miniprogram_npm目录

    微信小程序 构建npm报错 没有生成miniprogram_npm目录

    拉取已有仓库,在目录下执行npm install,再在微信开发者工具里点构建npm,报错说找不到/miniprogram_npm 基础库2.27.1 一、先在 project.config.json 中检查配置 packageJsonPath 是用来寻找 package.json miniprogramNpmDistDir 配置 miniprogram_npm 生成目录 miniprogram_npm 是小程序使用的npm包目录,与 nod

    2024年02月11日
    浏览(18)
  • 微信小程序导入项目报错:在项目根目录未找到app.json

    微信小程序导入项目报错:在项目根目录未找到app.json

    1.首先确定是不是导入到项目的上层目录了。 比如导入的文件是这样的:wechatsmallcourse... smallcourse里面就是app,json等项目文件,导入项目需要选择smallcourse文件夹,而不是wechat文件夹   2. 确保第一步正确,如果报下面的错: : 则照提示,打开project.config.json 把\\\"miniprogramRoot\\\": 

    2024年02月11日
    浏览(11)
  • 微信小程序用什么工具开发(微信小程序开发工具介绍)

    微信小程序用什么工具开发(微信小程序开发工具介绍)

    有很多人在开发小程序之前都会去了解微信小程序开发工具,想知道微信小程序用什么工具开发。时至今日,随着互联网技术的发展,现在开发微信小程序也能使用多种不同的工具,让我们来了解一下吧。 一、微信开发者工具 这是微信官方提供的微信小程序开发工具,可以

    2024年02月11日
    浏览(45)
  • 微信小程序详细介绍

    微信小程序详细介绍

    微信小程序自发布以来,逐渐进入到我们的生活中,成为我们生活中不可或缺的一部分,但你真的了解微信小程序的由来吗?本篇文档为大家一 一讲解 微信小程序,小程序的一种,英文名 Wechat Mini Program ,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”

    2024年02月09日
    浏览(10)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包