微信小程序-文件基础(持续更新)

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

pages文件夹:它是一个文件夹。

所处位置:小程序项目,根目录下

作用:存放,构成小程序的各个页面的代码文件,如下图pages文件中存放了index,logs,main子文件夹。

 微信小程序-文件基础(持续更新),微信小程序,小程序,json,css,微信,javascript

补充知识点:

根目录:起源于早期将Windows文件的分级管理比喻成大树形状,驱动器一级文件夹就相当于大树的根部,故称根目录。下级文件夹依次展开,就像大树的分枝,逐级展开。

utlis文件夹:

位置:根目录

作用:存放公用的代码。这些代码通常具有通用性,在不同部分的代码中使用。例如,判断对象字符串是否为空的函数。

.eslintric.js文件夹:.eslintrc.js是一个ESLint配置文件,

位置:根目录

作用:用于识别和报告在ECMAScript/JavaScript代码中发现的模式。

消除Javascript等代码语法的一些不合理、不严谨之处,减少一些怪异行为;消除代码运行的一些不安全之处,保证代码运行的安全;提高编译器效率,增加运行速度;为未来新版本的Javascript等代码做好铺垫。

{}project.config.json 与{}project.private.config.json文件:

在微信小程序中,project.config.json文件是一个项目的配置文件,包含关于小程序的一些基本信息,例如小程序的名称、App ID、开发者信息以及页面路径等。此外,该文件还可以用于进行项目的配置,包括公共和私有的配置。项目中的project.private.config.json文件中的相同设置优先级高于project.config.json。可以在 project.config.json 文件中配置公共的配置,而在 project.private.config.json 文件中配置个人的配置。然而,这个文件一般不会被提交到版本控制系统中,而是会被保存在本地开发者的电脑里,用于指定小程序的一些基本配置。

sitemap.json文件:

sitemap.json文件是一个JSON对象,它在微信小程序中起着非常重要的作用。它主要用于配置小程序及其页面是否允许被微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。这样,当用户的搜索词条触发该索引时,小程序的页面就可能显示在搜索结果中。

具体来说,sitemap.json文件的规则配置项(rules)指定了索引规则,每项规则都是一个JSON对象。例如,开发者可以通过设置"action"属性为"allow",来允许所有页面被索引;或者通过设置"action"属性为"disallow"和指定"page"属性,来禁止某些特定的页面被索引。

此外,如果小程序爬虫发现的页面数据和真实用户的呈现不一致,那么该页面将不会被收录到索引中。因此,开发者需要确保页面数据的真实性和一致性。

app.js文件

它是小程序的入口文件,掌控着整个小程序的生命周期。这个文件中注册了小程序的生命周期函数,并存放了一些全局的属性和变量。

一个关键的部分是App()方法,它只能在小程序根目录下的app.js文件中注册一次,并且用于指定小程序的生命周期函数。例如,你可以在App()方法中定义一些全局变量或函数,这些变量或函数在整个应用程序中都可以被访问和使用。此外,其他页面也可以调用App实例的方法来访问全局数据。

小程序的生命周期:

  应用的生命周期:小程序的生命周期函数是在app.js里面调用,包括onLaunch(小程序初始化)、onShow(小程序启动或从后台进入前台)、onHide(小程序从前台进入后台)等方法。特别地,当小程序进入后台时,会先触发页面的生命周期函数onHide,再触发应用的生命周期函数onHide;而当小程序从后台进入前台时,会先触发应用的生命周期函数Onshow,再触发页面的生命周期函数onShow。只有当小程序进入后台一定时间(目前是5分钟),或者系统资源占用过高,才会被真正的销毁。

  页面的生命周期:页面的生命周期包括onLoad(页面加载)、onShow(页面显示)、onReady(页面初次渲染完成)、onHide(页面隐藏)、onUnload(页面卸载)等方法。这些方法可以用于处理页面数据请求、页面渲染、页面交互等操作。

  组件的生命周期:组件的生命周期包括created, attached, detached, ready, moved, error, show, hide, resize, routeDone等方法。这些方法可以用于处理组件的创建、挂载、卸载、渲染、移动、错误、显示、隐藏、调整大小、路由完成等操作。

app.json文件:

是小程序的全局配置文件。这个文件主要用于决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。具体来说,它可以通过pages字段来注册所有的页面,用字符串数组来表示,页面用【路径+文件名】来表示。字符串数组的一个页面为首页。文件名不需要后缀,框架会自动寻找。

此外,app.json文件还可以配置小程序的窗口表现,例如设置导航栏的背景颜色、标题栏的文字颜色等;可以设置网络超时时间,用于指定请求网络超时的阈值;并且还支持设置多tab,允许用户在小程序中打开多个页面。

app.wxss文件:

是微信小程序中的一个样式表文件,它主要负责定义小程序中的页面样式。这个文件使用的是WXSS(WeiXin Style Sheets)这套样式语言,用于描述WXML的组件样式,决定了WXML的组件应该如何显示。同时,app.wxss文件也具有一些微信小程序所独有的语法和规则。

在app.wxss文件中,你可以定义页面中的元素的样式、布局、字体、颜色、背景等属性。此外,你也可以在app.wxss文件中设置全局样式,这些全局样式会被应用到每一个页面中。

另外,小程序会优先选择页面的wxss文件,而不是app.wxss文件。所以,如果你想要为特定的页面设置特殊的样式,你可以在对应的页面wxss文件中进行定义。

.wxml文件:

.wxml文件是微信小程序中的一套标签语言,它结合基础组件和事件系统,用于构建出页面的结构,内容。

在.wxml文件中,设置组件的属性、样式以及绑定事件。这些标签可以理解为微信小程序中的“组件”,通过在组件上定义特定的事件,可以实现用户与小程序的交互。文章来源地址https://www.toymoban.com/news/detail-799246.html

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

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

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

相关文章

  • 【微信小程序】--JSON 配置文件作用(三)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月09日
    浏览(54)
  • 微信小程序中的app.json文件内容注释

    微信小程序中的app.json文件主要是设置页面的路径,页面的窗口,网络超时时间,设置tabBar,是否开启debug模式。 以下是文件内的内容注释: 注意事项,不需要设置.css/.html/.js/.json后缀,只需要一个文件夹名称及文件名称就好。 添加新页面路径的时候,a设置放在文件夹,b也是

    2024年02月07日
    浏览(49)
  • 2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新

    HTML篇 CSS篇 JS篇 Vue篇 TpeScript篇 React篇 微信小程序篇 前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 1. 谈谈你对MVVM开发模式的理解? MVVM是一种简化用户界面的 实践驱动编程方式 。在当前主流的前后端分离的开发模式中,MVVM模式的优越性日益体现,相较

    2024年02月10日
    浏览(58)
  • 微信小程序报错[ app.json.json 文件错误] app.json: app.json

    我在编写微信小程序的时候报错 我在网上百度错误的原因,说我的目录里面的 但是我添加上这个代码还是会报错,后来我仔细排查,原来是我的app.json的代码又问题,问题出在   后来我把代码改为这样就不报错了 、就是把debug那行代码去掉。发在这里希望同样有问题的小伙

    2024年02月11日
    浏览(48)
  • 微信小程序新手入门教程二:认识JSON配置文件

    在上一篇我们介绍了微信小程序的注册和基本使用方式,并且写出了一个简单的页面,但是依然没有解释目录中的各种.json文件是做什么的。这篇我们就来认识一下各种JSON配置文件及其配置项。 首先先来认识一下JSON是什么。 JSON 指的是 JavaScript 对象表示法(JavaScript Object 

    2024年04月17日
    浏览(49)
  • 【微信小程序】wxml、wxss、js、json文件介绍

    😉博主:初映CY的前说(前端领域) ,📒本文核心:微信小程序的入门介绍 【前言】书接上回,我们知道了一个小程序的构成结构,接下来我们来进一步学习小程序的目录结构中的.wxml、.wxss、.js、.json。 用于页面的布局结构,相当于网页中 .html 文件 换做网页来说就是我们的

    2024年02月09日
    浏览(66)
  • 微信小程序[ app.json 文件内容错误] app.json: app.json 未找到解决方法

    第一次导入项目运行,经常会报app.json找不到 这是因为project.config.json文件被微信开发者工具修改,缺少代码:“miniprogramRoot”: \\\".dist/dev/mp-weixin/\\\"   在开发者工具中找到dist文件夹下/dev/mp-weixin/project.config.json,复制到项目根目录中 重新编译运行,报错即可解决  

    2024年02月11日
    浏览(50)
  • 解决微信小程序导入项目报错: [app.json文件内容错误]app.json未找到

    目录 场景描述 原因分析 解决方法 使用微信开发者工具导入项目后,打开控制台,出现报错提示: [app.json文件内容错误]app.json 未找到 ,如下图: 一级文件目录里确实找不到app.json文件,但是打开二级目录可以看到app.json。 究其原因是:小程序项目中的project.config.json和proj

    2024年02月05日
    浏览(49)
  • 【微信小程序导入项目报错:[app.json文件内容错误]app.json未找到】解决方法

    今天打开微信小程序导入一个项目时,控制台弹出下面的错误: 在第一级文件目录里确实找不到app.json文件,但是打开二级目录可以看到app.json。在网上看到大致有两种解决方法: 配置project.config.json文件路径:         在project.config.json文件中,写下下面一段代码:   注

    2024年02月11日
    浏览(90)
  • 【前端】夯实基础 css/html/js 50个练手项目(持续更新)

    发现一个没有用前端框架的练手项目,很适合我这种纯后端开发夯实基础,内含50个mini project,学习一下,做做笔记。 项目地址:https://github.com/bradtraversy/50projects50days 效果预览 核心代码: 知识点总结: 响应式布局 flex: 5; 操作 classList 可以动态修改节点的 class 效果预览 核心

    2024年02月22日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包