【b站计算机拓荒者】【2025】微信小程序开发教程 - chapter1 初识小程序 - 3项目目录结构4快速上手

news2025/5/25 20:39:09

3 项目目录结构

3.1 项目目录结构

3.1.1 目录介绍

# 1 项目主配置文件，在项目根路径下，控制整个项目的
	-app.js  # 小程序入口文件，小程序启动，会执行此js
	-app.json # 小程序全局配置文件，配置小程序导航栏颜色等信息
	-app.wxss # 小程序全局样式
	
	-app.js和app.json必须存在

# 2 页面文件
	-pages文件夹内，有一个个文件夹（index，login，register）--> 每个文件夹下有4个文件，
		-xx.js  # 页面逻辑：js代码控制
		-xx.wxml # 页面结构/布局，html === wxml，部分标签不一样
		-xx.json # 页面配置，当前页面导航栏颜色等
		-xx.wxss # 页面样式，当前页面的样式，当前页面样式优先级高于小程序全局样式

		-xx.js和xx.wxml必须存在

# 3 其他非重点
	-components 页面会用到的组件，每个组件放到一个文件夹内，每个文件夹内有4个文件
		-xx.js
		-xx.wxml
		-xx.json
		-xx.wxss

	-exlintrc.js 语法检查，不用
	
    项目配置，基础配置，整个项目存放位置，是否开启https
	-project.config.json 开发者工具默认配置
	-project.private.config.json 开发者工具用户配置，优先用这个，可以删除
	

	-sitemap.json 页面抓取相关，搜索优化，上线后他人通过哪些关键字搜索到小程序

在这里插入图片描述

3.1.2 配置文件

3.1.2.1 项目配置app.json
# 1 小程序全局配置文件，用于配置小程序的一些全局属性和页面路由，默认标题以及导航栏颜色，是否下拉刷新等

# 2 配置参考地址
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

# 3 部分配置
属性	类型	必填	描述	最低版本
entryPagePath	string	否	小程序默认启动首页	
pages：页面路径列表	
window：全局的默认窗口表现：顶部颜色，是否有下拉，经常用到

在这里插入图片描述

3.1.2.2 页面配置xx.json
# 1 小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等

# 2 app.json的部分配置，也支持对单个页面进行配置，可以在页面对应的 xx.json文件来对本页面的表现进行配置，即第3点

# 3 页面中配置项在当前页面会覆盖app.json中相同的配置项（样式相关的配置项属于app.json中的window属性，但这里不需要额外指定window字段），具体的取值和含义可参考全局配置文档说明

# 4 参考文档
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

# 5 常用配置
navigationBarBackgroundColor # 导航栏背景颜色，如 #000000	
navigationBarTextStyle # 导航栏标题、状态栏颜色，仅支持 black / white	
navigationBarTitleText # 导航栏标题文字内容
3.1.2.3 工程配置
# 1 project.config.json  project.private.config.json 
# 2  小程序项目配置文件，用于保存项目的一些配置信息和开发者的个人设置
# 3 参考文档
https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

project.config.json的配置与详情里的本地设置是联动的。
在这里插入图片描述
调试基础库
在这里插入图片描述

3.1.2.4 搜索seo相关配置
# 1 作用
微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

# 2  参考文档
https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

# 3 配置 -->用户搜索小程序，任意页面有关键字，都会被搜索到
{
    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
    "rules": [{
    "action": "allow",
    "page": "*"
    }]
}

在这里插入图片描述

3.2 webview渲染

3.2.1 webview与skyline模式

# 1 webview模式：老一点，稳定，支持新老版本
# 2 skyline模式：新一点，不支持老版本，不太稳定

# 3 调整成webview模式更加稳定一些

# 4 项目配置 --> app.json

app.json删除以下配置
在这里插入图片描述

3.3 新建页面

# 1 app.json只有一个页面 === 小程序只有一个页面
	-后期增加页面

# 2 增加页面方式一
	1 pages右键 --> 新建文件夹
	2 新建的文件夹右键 新建page
	3 生成4个文件，分别是xx.js，xx.wxml，xx.json，xx.wxss

# 3 增加页面方式二
	 1 app.json pages中，新增一行
	 2 自动创建文件夹和页面

增加页面方式一
在这里插入图片描述

在这里插入图片描述
输入page名，会生成四个文件
同时app.json会多出一行login内容
在这里插入图片描述

增加页面方式二
在这里插入图片描述

3.4 启动页面调整

# 1 修改默认启动页面
## 方式1 在app.json的pages修改顺序，第一个即默认启动页面
{
    "pages": [
        "pages/login/login",
        "pages/index/index",
        "pages/register/register"
    ],
}

## 方式2 通过entryPagePath配置  --- 较多
{
    "entryPagePath": "pages/index/index",
}

## 方式3：临时用 
	-添加编译模式，使用较少

方式1 pages
在这里插入图片描述

方式2
entryPagePath

方式3 添加编译模式
在这里插入图片描述

3.5 调试小程序

3.5.1 调试小程序基础库

# 微信小程序基础库，一直在版本升级
	-转发功能
	-发送朋友圈
	-等等

# 不同功能是在不同版本加入的
	-假设基于老版本开发，那么某些功能可能不存在
	-开发时，如果没有，写了无效，应确认基础库是否支持此功能
	-参考文档，https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/version.html

如果基础库低于1.2.0，即无此转发功能
在这里插入图片描述
基础库版本
在这里插入图片描述

3.5.2 调试窗口

调试器
在这里插入图片描述

3.5.3 真机调试

# 刚才说的都是模拟器调试
# 真机调试 - 微信调试
	-扫描真机调试二维码，出现vconsole

# 自动真机调试
	-扫码登录会自动连接手机

甄姬
在这里插入图片描述

自动真机调试
在这里插入图片描述

也有vconsole
在这里插入图片描述

3.6 纯净项目

# 纯净模式，删除项目不需要的东西，只留核心 --> 开发
## 删除components
## 删除pages，除index之外的pages
## 删除exlintrs.js，project.config.json，project.private.config.json，sitemap.json(配置文件删除会有默认配置）

# app.json
{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationBarTitleText": "功能演示",
        "navigationBarBackgroundColor": "#0000ff",
        "enablePullDownRefresh": false,
        "backgroundColor": "#00ffff",
        "backgroundTextStyle":"dark"
    },
    "style": "v2"
}

# app.wxss

# app.js
	App({})



# pages/index
## index.js
	Page({})
## index.wxml
	  <view class="container">
	    吴磊吴磊
	  </view>
## index.wxss
## index.json
	{
	  "usingComponents": {
	  },
	  "navigationBarTitleText": "功能演示index",
	  "navigationBarBackgroundColor": "#ffff00",
	  "enablePullDownRefresh": true,
	  "backgroundColor": "#00ffff",
	  "backgroundTextStyle":"light"
	}
###  index.json的配置优先app.json



# 提示，如果代码修改没有效果，清除全部缓存
# json文件不能有注释

在这里插入图片描述

4 快速上手

4.1 小程序常用组件

# 1 做过html
	a标签
	div标签
	span
	img

# 2 小程序没有以上html标签，自己封装的是组件
	-https://developers.weixin.qq.com/miniprogram/dev/component/

# 3 text 类似span，不换行，显示文字
	-https://developers.weixin.qq.com/miniprogram/dev/component/text.html
# 4 view 类似div，换行，可显示任何内容
	-https://developers.weixin.qq.com/miniprogram/dev/component/view.html
# 5 image 类似img  src填图片位置，style设置图片宽高
	-https://developers.weixin.qq.com/miniprogram/dev/component/image.html
	style="height: 30px; width:70px;"
	src="/images/b.png"   images前的/表示当前项目的路径
# 6 swipe，轮播图组件
# 7 icon，图标组件
	- <icon color="red" type="success" size="93"></icon>

在这里插入图片描述

4.2 tabbar配置

# 底部或顶部的tab页
	-几乎所有小程序都会有tabbar，一般在底部位置

# 如何设置
	1 在app.json配置
	 "tabBar":{
        "selectedColor": "#b4282d",
        "position": "bottom",
        "list":[
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "images/两狗对视.jpg",
                "selectedIconPath": "images/可爱柯基.jpg"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "images/猫猫吃鱼.jpg",
                "selectedIconPath": "images/蓝金渐层.jpg"
            }
        ]
    },

效果
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LLM Tuning

LLM Tuning

Lora-Tuning 什么是Lora微调&#xff1f; LoRA&#xff08;Low-Rank Adaptation&#xff09; 是一种参数高效微调方法&#xff08;PEFT, Parameter-Efficient Fine-Tuning&#xff09;&#xff0c;它通过引入低秩矩阵到预训练模型的权重变换中&#xff0c;实现无需大规模修改…
阅读更多...
云计算与大数据进阶 | 28、存储系统如何突破容量天花板？可扩展架构的核心技术与实践—— 分布式、弹性扩展、高可用的底层逻辑（下）

云计算与大数据进阶 | 28、存储系统如何突破容量天花板？可扩展架构的核心技术与实践—— 分布式、弹性扩展、高可用的底层逻辑（下）

在上篇中&#xff0c;我们围绕存储系统可扩展架构详细探讨了基础技术原理与典型实践。然而&#xff0c;在实际应用场景中&#xff0c;存储系统面临的挑战远不止于此。随着数据规模呈指数级增长&#xff0c;业务需求日益复杂多变&#xff0c;存储系统还需不断优化升级&#xff0…
阅读更多...
水利数据采集MCU水资源的智能守护者

水利数据采集MCU水资源的智能守护者

水利数据采集仪MCU&#xff0c;堪称水资源的智能守护者&#xff0c;其重要性不言而喻。在水利工程建设和水资源管理领域&#xff0c;MCU数据采集仪扮演着不可或缺的角色。它通过高精度的传感器和先进的微控制器技术&#xff0c;实时监测和采集水流量、水位、水质等关键数据&…
阅读更多...
origin绘图之【如何将横坐标/x设置为文字、字母形式】

origin绘图之【如何将横坐标/x设置为文字、字母形式】

在使用 Origin 进行科研绘图或数据可视化的过程中&#xff0c;我们常常会遇到这样一种需求&#xff1a;希望将横坐标&#xff08;X轴&#xff09;由默认的数字形式&#xff0c;改为字母&#xff08;如 A、B、C……&#xff09;或中文文字&#xff08;如 一、二、三……&#xf…
阅读更多...
工业智能网关建立烤漆设备故障预警及远程诊断系统

工业智能网关建立烤漆设备故障预警及远程诊断系统

一、项目背景 烤漆房是汽车、机械、家具等工业领域广泛应用的设备&#xff0c;主要用于产品的表面涂装。传统的烤漆房控制柜采用本地控制方式&#xff0c;操作人员需在现场进行参数设置和设备控制&#xff0c;且存在设备智能化程度低、数据孤岛、设备维护成本高以及依靠传统人…
阅读更多...
Kafka Streams 和 Apache Flink 的无状态流处理与有状态流处理

Kafka Streams 和 Apache Flink 的无状态流处理与有状态流处理

Kafka Streams 和 Apache Flink 与数据库和数据湖相比的无状态和有状态流处理的概念和优势。 在数据驱动的应用中&#xff0c;流处理的兴起改变了我们处理和操作数据的方式。虽然传统数据库、数据湖和数据仓库对于许多基于批处理的用例来说非常有效&#xff0c;但在要求低延迟…
阅读更多...
LM-BFF——语言模型微调新范式

LM-BFF——语言模型微调新范式

gpt3&#xff08;GPT3——少样本示例推动下的通用语言模型雏形)结合提示词和少样本示例后&#xff0c;展示出了强大性能。但大语言模型的训练门槛太高&#xff0c;普通研究人员无力&#xff0c;LM-BFF(Making Pre-trained Language Models Better Few-shot Learners)的作者受gp…
阅读更多...
NVMe高速传输之摆脱XDMA设计2

NVMe高速传输之摆脱XDMA设计2

NVMe IP放弃XDMA原因 选用XDMA做NVMe IP的关键传输模块&#xff0c;可以加速IP的设计&#xff0c;但是XDMA对于开发者来说&#xff0c;还是不方便&#xff0c;原因是它就象一个黑匣子&#xff0c;调试也非一番周折&#xff0c;尤其是后面PCIe4.0升级。 因此决定直接采用PCIe设…
阅读更多...
pycharm无需科学上网工具下载插件的解决方案

pycharm无需科学上网工具下载插件的解决方案

以下是两种无需科学上网即可下载 PyCharm 插件的解决思路&#xff1a; 方法 1&#xff1a;设置 PyCharm 代理 打开 PyCharm选择菜单&#xff1a;File → Settings → Appearance & Behavior → System Settings → HTTP Proxy在代理设置中进行如下配置&#xff1a; 代理地…
阅读更多...
Halcon计算点到平面的距离没有那么简单

Halcon计算点到平面的距离没有那么简单

Halcon计算点到平面距离 1. 一些基本概念2. 浅谈有无符号的距离2.1 无符号距离的用武之地2.2 有符号距离的必要性 3. 无符号距离怎么算3.1 创建一个无限延展的基准平面&#xff0c;对距离有什么影响&#xff1f;Halcon代码图示 3.2 创建一个小小小的基准平面&#xff0c;对距离…
阅读更多...
数据中台如何设计？中台开发技术方案，数据治理方案，大数据建设方案合集

数据中台如何设计？中台开发技术方案，数据治理方案，大数据建设方案合集

中台的价值与核心理念 中台的核心在于“企业级能力复用”&#xff0c;其价值体现在四大维度&#xff1a; 能力整合&#xff1a;将分散的数字化能力&#xff08;如营销、供应链&#xff09;集中管理&#xff0c;形成核心竞争力&#xff1b; 业务创新&#xff1a;通过跨领域融合…
阅读更多...
Adminer 连接mssql sqlserver

Adminer 连接mssql sqlserver

第一步 docker-compose.yml adminer部分&#xff1a; version: 3.8 services: adminer: image: adminer:latest container_name: adminer restart: unless-stopped volumes: - ./freetds/freetds.conf:/etc/freetds.conf:rw # 确保 :rw 可读写 co…
阅读更多...
C++系统IO

C++系统IO

C系统IO 头文件的使用 1.使用系统IO必须包含相应的头文件&#xff0c;通常使用#include预处理指令。 2.头文件中包含了若干变量的声明&#xff0c;用于实现系统IO。 3.头文件的引用方式有双引号和尖括号两种&#xff0c;区别在于查找路径的不同。 4.C标准库提供的头文件通常没…
阅读更多...
DELL EMC PowerStore BBU更换手册

DELL EMC PowerStore BBU更换手册

写在前面 上周给客户卖了一个BBU电池&#xff0c;客户要写一个更换方案。顺利完成了更换&#xff0c;下面就把这个更换方案给大家share出来&#xff0c;以后客户要写&#xff0c;您就Ctrlc 和Ctrlv就可以了。 下面的步骤是最理想的方式&#xff0c;中间没有任何的问题&#xff…
阅读更多...
css五边形

css五边形

五边形 .fu{width: 172rpx;height: 204rpx;overflow: hidden;border-radius: 10rpx;clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }六边形 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
阅读更多...
三种常见脉冲神经网络编码方式解读

三种常见脉冲神经网络编码方式解读

速率编码&#xff08;rate coding) 速率编码使用输入特征来确定尖峰频率&#xff0c;例如将静态输入数据&#xff08;如 MNIST 图像&#xff09;转换为时间上的脉冲&#xff08;spike&#xff09;序列。它是将神经元发放脉冲的频率与输入值&#xff08;如像素强度&#xff09;…
阅读更多...
STM32F103 HAL多实例通用USART驱动 - 高效DMA+RingBuffer方案，量产级工程模板

STM32F103 HAL多实例通用USART驱动 - 高效DMA+RingBuffer方案，量产级工程模板

导言 《STM32F103_LL库寄存器学习笔记12.2 - 串口DMA高效收发实战2&#xff1a;进一步提高串口接收的效率》前阵子完成的LL库与寄存器版本的代码&#xff0c;有一个明显的缺点是不支持多实例化。最近&#xff0c;计划基于HAL库系统地梳理一遍bootloader程序开发。在bootloader程…
阅读更多...
HTML回顾

HTML回顾

html全称&#xff1a;HyperText Markup Language&#xff08;超文本标记语言&#xff09; 注重标签语义&#xff0c;而不是默认效果 规则 块级元素包括: marquee、div等 行内元素包括: span、input等 规则1&#xff1a;块级元素中能写&#xff1a;行内元素、块级元素&…
阅读更多...
机器视觉6-halcon高级教程

机器视觉6-halcon高级教程

机器视觉6-halcon高级教程 双目立体视觉原理视差外极线几何双目标定 双目立体视觉之Halcon标定一&#xff0e;标定结果二.Halcon标定过程1.获取左右相机图像中标定板的区域;2.提取左右相机图像中标定板的MARK点坐标和摄像机外部参数;3.执行双目标定;4.获取非标准外极线几何到标…
阅读更多...
YOLOv8 的双 Backbone 架构：解锁目标检测新性能

YOLOv8 的双 Backbone 架构：解锁目标检测新性能

一、开篇&#xff1a;为何踏上双 Backbone 探索之路 在目标检测的领域中&#xff0c;YOLOv8 凭借其高效与精准脱颖而出&#xff0c;成为众多开发者和研究者的得力工具。然而&#xff0c;传统的单 Backbone 架构&#xff0c;尽管已经在诸多场景中表现出色&#xff0c;但仍存在一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023