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

浅入深出系列总目录在000集

如何0元学微信小程序–【浅入深出系列000】

文章目录

  • 本系列校训
  • 学习资源的选择
  • 先说总目录
  • 经常碰到的文件(目录)
    • 最最常见的目录pages
    • 次最常用的就是images 目录
  • 操作起来
    • 真正的操作
  • 配套资源
  • 作业:

本系列校训

用免费公开视频,卷飞培训班哈人!打死不报班,赚钱靠狠干!
只要自己有电脑,前后项目都能搞!N年苦学无人问,一朝成名天下知!

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序(130集)
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下:

P303-微信小程序的环境准备08:21 00:00 到 05:16 获取APPid, 后面下载开发工具。

先说总目录

在这里插入图片描述

在这里插入图片描述
图1 小程序目录的思维导图

先看这8大文件(目录)吧,
右侧的4个文件,都是这个小程序全局的
如果初学者,基本上就是默认的就足够了。
随着你开发的深入,你就会越来越多的用到这三个文件。
在这里插入图片描述
小程序的一级目录展示

经常碰到的文件(目录)

最最常见的目录pages

在pages下的每一级目录可以看到几种文件格式(注意的是pages下的每一个小目录
:.wxml、.js、.json、.wxss。

其中:

.wxml—页面结构文件;(可以这样叫“微信妹儿”)

.js—脚本文件,包含页面/程序的声明周期函数,一些wxml页面的监听函数的实现也是在这个文件里面编写的;(奸商)

.json—配置文件;(奸商的山货–发音为“尖山”)

.wxss—样式表;(可以这样叫“微信妹儿的大S与小S”)

次最常用的就是images 目录

看名字就知道,这个目录就是放你的小程序所使用的图片。
后面的目录就不是初学的层次要看的了。

操作起来

新增页面其实并不是一个文件一个文件的命名,然后建成的这四个文件的,(可能网上的小程序开发平台版本的问题吧,也可能是有误)

真正的操作

打开总目录下的app.json 文件 ,找到"page"的代码段。

[
    "pages/start/start",
    "pages/index/index",
    "pages/logs/logs",
    "pages/my/my",
    "pages/cart/cart",
    "pages/goods-detail/goods-detail",
    "pages/template-cart/template-cart",
    "pages/topic/topic",

在这里插入图片描述

然后,在[] 里面自己加一个目录层次,记得不要带后缀名
然后一保存这个文件就行了。
平台工具会自动的帮你在pages里新建一个目录,目录里会自动的生成上面说的那四个文件。.wxml、.js、.json、.wxss。
推荐的视频的
https://www.bilibili.com/video/BV1nE41117BQ?p=7 在2分30秒的时候,有讲这个操作。不熟的同鞋请多看几次

配套资源

让别人的小程序长成自己的样子–【浅入深出系列001】配套资源

作业:

下载本文资源,然后,自行用pages段,建立3个页面以上,并观察新建的页面在什么目录。
同时看一下新建的页面文件有什么内容。尽量修改上面的内容(文字部分)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/42135.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

简笔风和写实风的区别

现实主义和风格化 当我们谈论现实主义和风格化时,我们是什么意思?这看起来相当明显,现实主义指的是模仿逼真的逼真的图形。它不一定需要存在于现实世界中,但被传达为它属于我们的世界。10年前,我们认为现实的东西在今…

剑指offer33.二叉搜索树的后序遍历序列

我一开始的想法是:后序遍历是左右根,那么第一个数小于第二个数,第二个数大于第三个数,然后从第三个数开始又循环,显然错了,因为我这种是理想情况,是一个满二叉树。正确的解法是: class Solutio…

C# DlibDotNet 人脸识别、人脸68特征点识别、人脸5特征点识别、人脸对齐,三角剖分,人脸特征比对

人脸识别 人脸68特征点识别 人脸5特征点识别 人脸对齐 三角剖分 人脸特征比对 项目 VS2022.net4.8OpenCvSharp4DlibDotNet Demo下载 代码 using DlibDotNet.Extensions; using DlibDotNet; using System; using System.Collections.Generic; using System.ComponentModel; …

第六章:string类

系列文章目录 文章目录 系列文章目录前言为什么学习string类C语言中的字符串ASCIIUnicode**UTF-8**UTF-16UTF-32 GBK 标准库中的string类string类总结 string类的常用接口说明1. string类对象的常见构造2. string类对象的容量操作3. string类对象的访问及遍历操作4. string类对…

Nginx正向代理和反向代理详解

目录 一、什么是正向代理? 二、什么是反向代理? 三、正向代理和反向代理的作用 一、什么是正向代理? 正向代理,“它代理的是客户端”,是一个位于客户端和目标服务器之间的服务器,为了从目标服务器取得内…

Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台

Java版知识付费-轻松拥有知识付费平台 多种直播形式,全面满足直播场景需求 公开课、小班课、独立直播间等类型,满足讲师个性化直播场景需求;低延迟、双向视频,亲密互动,无论是互动、答疑,还是打赏、带货、…

【java爬虫】将优惠券数据存入数据库排序查询

本文是在之前两篇文章的基础上进行写作的 (1条消息) 【java爬虫】使用selenium爬取优惠券_haohulala的博客-CSDN博客 (1条消息) 【java爬虫】使用selenium获取某宝联盟淘口令_haohulala的博客-CSDN博客 前两篇文章介绍了如何获取优惠券的基础信息,本文将获取到的…

和chatgpt学架构02-环境搭建

目录 1 安装vs code2 vs code功能介绍3 安装nodejs4 安装vue5 在vs code打开工程总结 我们在上一篇 技术选型 里咨询了chatgpt前后端的框架选择和数据库的选择。有了框架之后就需要选择合适的开发工具了,继续咨询一下chatgpt 我现在选型,前端使用vue&am…

Mac 谷歌浏览器选中查看悬浮出现的元素样式

Mac 谷歌浏览选中查看悬浮出现的元素样式 1. Mac 暂停脚本执行快捷键 command \或F8 2.以斗鱼主站下载悬浮面板为例 3. 操作步骤 (1)打开控制台,选中源代码 (2)鼠标选中下载,让面板悬浮出来 &#xf…

【GitOps系列】K8s极简实战

文章目录 示例应用介绍部署应用到k8s 如何使用命名空间隔离团队及应用环境?如何为业务选择最适合的工作负载类型?如何解决服务发现问题?如何迁移应用配置?如何将集群的业务服务暴露外网访问?如何保障业务资源需求和自动…

Selenium自动化之弹窗处理

1.前言 我们在使用Selenium做Web自动化测试时,页面经常出现弹窗,如果不处理后续的测试脚本就无法正常运行,今天我们就带大家一起来学习如何处理Web页面上的弹窗。 2.Web页面弹窗的分类 弹窗通常有3种:Alert类型弹框、Confirm类…

【文生图系列】stable diffusion webui 汉化(双语)教程

文章目录 安装双语插件下载json源文件设置双语 这篇博文记录于我成功安装双语插件之后,所以以下的示例页面均是双语。汉化教程分为三步,安装插件,JSON源文件下载和最后一步的双语设置。 安装双语插件 在扩展(extensions&#xf…

【已解决】idea使用debug启动一直卡着不动

debug启动时一直卡着不动出现下图提示,但是正常启动又可以启动 翻译结果是:方法断点可能会大大降低调试速度。很明显,有断点的位置没加对或者误加断点了,以下是解决方法。 打开 .idea文件夹,找到workspace.xml文件 找…

引入Vue的方式

1.cdn引入 <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…

配置需求分类中的科目分配

其中科目分配的内容都为灰色无法修改 结果是在科目分配里面单独维护的&#xff1a; 路径&#xff1a;销售分销-基本功能-科目分配/成本-维护成本科目分配的需求类别

【Ceph集群应用】Ceph对象存储系统之RGW接口详解

Ceph对象存储系统之RGW接口详解 1.创建Ceph对象存储系统RGW接口2. 开启httphttps,更改监听端口3. 更改监听端口4.S3接口访问测试5.实验中遇到的故障案例 接上文基于ceph-deploy部署Ceph集群详解 1.创建Ceph对象存储系统RGW接口 &#xff08;1&#xff09;对象存储概念 对象存…

广州市番禺区委领导一行莅临和鲸科技考察交流

7月18日下午&#xff0c;广州市番禺区区委常委、组织部部长、人才工作局局长唐力明&#xff0c;组织部副部长、两新工委书记罗翌洁及组织部其他相关领导一行莅临和鲸科技开展实地考察与调研&#xff0c;国投科创广州基地负责人、海创人才南方创业服务中心常务副秘书长徐斌&…

详解C#开发Android应用程序的流程

Android系统一下子铺天盖地而来&#xff0c;让人目不暇接。兴奋的同时也让部分开发人员犯难了&#xff01;要知道从熟知的Wince、Mobile开发语言C#跨越到RFID-Android的Java。可不是一朝一夕就能完成的。就好比你的乾坤大挪移已经第七层了&#xff0c;却忽然要你从易筋经从头练…

Beyond Compare 代码比较工具

一、下载 官网下载地址&#xff1a; https://www.scootersoftware.com/download.php 选择 Windows 系统&#xff0c;简体中文版本&#xff0c;点击下载。 下载完成 二、安装 步骤1&#xff1a;双击安装包 步骤2&#xff1a;进入安装向导&#xff0c;点击下一步 步骤3&a…

微信小程序事件点击跳转页面的五种方法

第一种:标签 这是最常见的一种跳转方式,相当于html里的a标签 <navigator url"/pages/main/main"></navigator>第二种:wx.navigateTo({})方法 1.前端wxml <button bindtap"getCeshi" type"primary"> 测试按钮 </button>…
最新文章