当前位置: 首页 > news >正文

常德住房和城乡建设局网站/免费自助建站网站

常德住房和城乡建设局网站,免费自助建站网站,济南 论坛网站建设,免费的报告网站小程序官方建议把所有小程序的页面,都存放在pages 目录中,以单独的文件夹存在,如图所示: 其中,每个页面由4 个基本文件组成,它们分别是:js文件(页面的脚本文件,存放页面的数据、事件…

小程序官方建议把所有小程序的页面,都存放在pages 目录中,以单独的文件夹存在,如图所示:
在这里插入图片描述
其中,每个页面由4 个基本文件组成,它们分别是:js文件(页面的脚本文件,存放页面的数据、事件处理函数等)、json文件(当前页面的配置文件,配置窗口的外观、表现等),.wxml 文件(页面的模板结构文件)和.wxss 文件(当前页面的样式表文件)。下面来详细介绍:

JSON 配置文件

1.JSON 配置文件的作用

JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。小程序项目中也不例外:通过不同

的.json 配置文件,可以对小程序项目进行不同级别的配置。

小程序项目中有4 种json 配置文件,分别是:

①项目根目录中的app.json 配置文件

②项目根目录中的project.config.json 配置文件

③项目根目录中的sitemap.json配置文件

④每个页面文件夹中的.json 配置文件

2. app.json 文件

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab 等。Demo 项目里边的app.json 配置内容如下:

在这里插入图片描述
简单了解下这4 个配置项的作用:

①pages:用来记录当前小程序所有页面的路径

②window:全局定义小程序所有页面的背景色、文字颜色等

③style:全局定义小程序组件所使用的样式版本

④sitemapLocation:用来指明sitemap.json的位置。

3. project.config.json 文件

project.config.json 是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:

⚫setting中保存了编译相关的配置

⚫projectname中保存的是项目名称

⚫appid中保存的是小程序的账号ID

4.sitemap.json文件

微信现已开放小程序内搜索,效果类似于PC 网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。

当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。

在这里插入图片描述

注意:sitemap 的索引提示是默认开启的,如需要关闭sitemap 的索引提示,可在小程序项目配置文件project.config.json 的setting中配置字段checkSiteMap为false。

5. 页面的.json 配置文件

小程序中的每一个页面,可以使用.json 文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json 的window 中相同的配置项。例如:
在这里插入图片描述
6. 新建小程序页面

只需要在app.json -> pages中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件,如图所示:
在这里插入图片描述
7. 修改项目首页

只需要调整app.json -> pages数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染,如图所示:
在这里插入图片描述
WXML 模板

1. 什么是WXML

WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。

2. WXML 和HTML 的区别

①标签名称不同

⚫HTML (div, span, img, a)

⚫WXML(view, text, image, navigator)

②属性节点不同

<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>

③提供了类似于Vue 中的模板语法

⚫数据绑定

⚫列表渲染

⚫条件渲染

WXSS 样式

1. 什么是WXSS

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述WXML 的组件样式,类似于网页开发中的CSS。

2. WXSS 和CSS 的区别

①新增了rpx 尺寸单位

⚫CSS 中需要手动进行像素单位换算,例如rem

⚫WXSS 在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

②提供了全局的样式和局部样式

⚫项目根目录中的app.wxss 会作用于所有小程序页面

⚫局部页面的.wxss 样式仅对当前页面生效

③WXSS 仅支持部分CSS 选择器

⚫.class 和#id

⚫element

⚫并集选择器、后代选择器

⚫::after 和::before 等伪类选择器

JS 逻辑交互

1. 小程序中的.js 文件

一个项目仅仅提供界面展示是不够的,在小程序中,我们通过.js 文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。

2. 小程序中.js 文件的分类

小程序中的JS 文件分为三大类,分别是:

①app.js

是整个小程序项目的入口文件,通过调用App() 函数来启动整个小程序。

②页面的.js 文件

是页面的入口文件,通过调用Page() 函数来创建并运行页面。

③普通的.js 文件

是普通的功能模块文件,用来封装公共的函数或属性供页面使用。

前端微信小程序开发教程,微信小程序从基础到发布全流程

相关文章:

微信小程序的代码由哪些结构组成?

小程序官方建议把所有小程序的页面&#xff0c;都存放在pages 目录中&#xff0c;以单独的文件夹存在&#xff0c;如图所示&#xff1a; 其中&#xff0c;每个页面由4 个基本文件组成&#xff0c;它们分别是&#xff1a;js文件(页面的脚本文件&#xff0c;存放页面的数据、事件…...

Cloud Kernel SIG月度动态:发布 ANCK 新版本及 Plugsched v1.2.0

Cloud Kernel SIG&#xff08;Special Interest Group&#xff09;&#xff1a;支撑龙蜥内核版本的研发、发布和服务&#xff0c;提供生产可用的高性价比内核产品。 01 2 月 SIG 整体进展 发布 ANCK 4.19.91-27.1 版本。 发布 ANCK 5.10.134-13.1 版本。 调度器热升级相关事…...

Jedis 使用详解(官方原版)

一、配置 Maven 依赖项Jedis也通过Sonatype作为Maven Dependency 分发。要配置它&#xff0c;只需将以下 XML 代码段添加到您的 pom.xml 文件中。<dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.…...

关于Pytorch中的张量学习

关于Pytorch中的张量学习 张量的概念和创建 张量的概念 Tensor是pytorch中非常重要且常见的数据结构&#xff0c;相较于numpy数组&#xff0c;Tensor能加载到GPU中&#xff0c;从而有效地利用GPU进行加速计算。但是普通的Tensor对于构建神经网络还远远不够&#xff0c;我们需…...

基于Transformer的目标检测算法学习记录

前言 本文主要通过阅读相关论文了解当前Transformer在目标检测领域的应用与发展。 谷歌在 ICLR2020 上提出的 ViT&#xff08;Vision Transformer&#xff09;是将 Transformer 应用在视觉领域的先驱。从此&#xff0c;打开了Transformer进入CV领域的桥梁&#xff0c;NLP与CV几…...

嵌入式学习笔记——使用寄存器编程实现按键输入功能

文章目录前言模块介绍原理图编程思路前言 昨天&#xff0c;通过配置通用输出模式&#xff0c;实现了LED灯的点亮、熄灭以及流水等操作&#xff0c;解决了通用输出的问题&#xff0c;今天我们再借用最常见的输入模块&#xff0c;按键来实现一个按键控制LED的功能&#xff0c;重…...

打卡小达人之路:Spring Boot与Redis GEO实现商户附近查询

在当今社会&#xff0c;定位服务已经成为了各种应用的重要组成部分&#xff0c;比如地图、打车、美食等应用。如何在应用中实现高效的附近商户搜索功能呢&#xff1f;传统的做法是将商户的经纬度信息存储在关系型数据库中&#xff0c;然后使用SQL查询语句实现附近商户搜索功能。…...

Apache HTTP Server <2.4.56 mod_proxy_uwsgi 模块存在请求走私漏洞(CVE-2023-27522)

漏洞描述 Apache HTTP Server 是一个Web服务器软件。 该项目受影响版本存在请求走私漏洞。由于mod_proxy_uwsgi.c 中uwsgi_response方法对于源响应头缺少检查&#xff0c;当apache启用mod_proxy_uwsgi后&#xff0c;攻击者可利用过长的源响应头等迫使应转发到客户端的响应被截…...

JUC并发编程设计模式

一、保护性暂停 1.1 定义 即Guarded Suspension,用在一个线程等待另一 个线程的执行结果 要点 ● 有一个结果需要从一个线程传递到另一 个线程&#xff0c;让他们关联同一一个GuardedObject ● 如果有结果不断从一个线程到另一个线程那么可以使用消息队列&#xff08;生产者…...

HTTPS加密解析

日升时奋斗&#xff0c;日落时自省 目录 1、加密解释 2、对称加密 3、非对称加密 4、证书 HTTPS&#xff08;HyperText Transfer Protocol over Secure Socket Layer&#xff09;也是一个应用层协议&#xff0c;是在HTTP协议的基础上引入了一个加密层 HTTP协议内容都是按…...

Python每日一练(20230309)

目录 1. 删除有序数组中的重复项 ★ 2. 二叉树的最小深度 ★★ 3. 只出现一次的数字 II ★★ &#x1f31f; 每日一练刷题专栏 C/C 每日一练 ​专栏 Python 每日一练 专栏 1. 删除有序数组中的重复项 给你一个有序数组 nums &#xff0c;请你原地删除重复出现的元素…...

哈希表题目:数组的度

文章目录题目标题和出处难度题目描述要求示例数据范围解法思路和算法代码复杂度分析题目 标题和出处 标题&#xff1a;数组的度 出处&#xff1a;697. 数组的度 难度 4 级 题目描述 要求 给定一个非空且只包含非负数的整数数组 nums\texttt{nums}nums&#xff0c;数组的…...

初识rollup 打包、配置vue脚手架

rollup javascript 代码打包器&#xff0c;它使用了 es6 新标准代码模块格式。 特点&#xff1a; 面向未来&#xff0c;拥抱 es 新标准&#xff0c;支持标准化模块导入、导出等新语法。tree shaking 静态分析导入的代码。排除未实际引用的内容兼容现有的 commonJS 模块&#…...

软考网络工程师证书有用吗?

当然有用&#xff0c;但是拿到网络工程师证书的前提是对你自己今后的职业发展有帮助&#xff0c;用得到才能对你而言发挥它最大的好处。软考证书的具体用处&#xff1a;1.纳入我国高校人才培养和教学体系目前&#xff0c;软考已经被纳入高校人才培养和教学体系。在很多高校中&a…...

postgresql 自动备份 bat实现

postgres数据据备分,用cmd命令有些烦,写了个bat实现 BAT脚本中常用的注释命令有rem、@rem和:: rem、@rem和::用法都很简单,直接在命令后加上要注释的语句即可。例如下图,语言前加了rem,运行BAT时就会自动忽略这个句子。需要注释多行时,每行前面都要加上rem、@rem和::。…...

gdb:在命令行中会莫名暂停;detach-on-fork

这个没有捕获到断点的原因是,可能是多线程的问题,需要设置: set detach-on-fork off On Linux, if you want to debug both the parent and child processes, use the command: set detach-on-fork on/off on 默认设置,gdb会放弃子线程(或者父线程,受follow-fork-mode的…...

【3.9】RedisAOF日志、字符串、操作系统进程管理

4. 进程管理 进程、线程基础知识 什么是进程 我们编写的代码只是一个存储在硬盘的静态文件&#xff0c;通过编译后就会生成二进制可执行文件&#xff0c;当我们运行这个可执行文件后&#xff0c;它会被装载到内存中&#xff0c;接着 CPU 会执行程序中的每一条指令&#xff0c;…...

安装mayavi的成功步骤

这篇文章是python 3.6版本&#xff0c;windows系统下的安装&#xff0c;其他python版本应该也可以&#xff0c;下载对应的包即可。 一定不要直接pip install mayavi&#xff0c;这个玩意儿对vtk的版本有要求。 下载whl包 搞了很久不行&#xff0c;咱也别费那个劲了&#xff0…...

vue+echarts.js 实现中国地图——根据数值表示省份的深浅——技能提升

最近在写后台管理系统&#xff0c;遇到一个需求就是 中国地图根据数值 展示深浅颜色。 效果图如下&#xff1a; 直接上代码&#xff1a; 1.html部分 <div id"Map"></div>2.css部分——一定要设置尺寸 #Map {width: 100%;height: 400px; }3.js部分 …...

[oeasy]python0104_指示灯_显示_LED_辉光管_霓虹灯

编码进化 回忆上次内容 x86、arm、riscv等基础架构 都是二进制的包括各种数据、指令 但是我们接触到的东西 都是屏幕显示出来的字符 计算机 显示出来的 一个个具体的字型 计算机中用来展示的字型 究竟是 如何进化的 呢&#xff1f;&#x1f914;&#x1f914; 模拟电路时…...

Easy Deep Learning——卷积层

为什么需要卷积层&#xff0c;深度学习中的卷积是什么&#xff1f; 在介绍卷积之前&#xff0c;先引入一个场景 假设您在草地上漫步&#xff0c;手里拿着一个尺子&#xff0c;想要测量草地上某些物体的大小&#xff0c;比如一片叶子。但是叶子的形状各异&#xff0c;并且草地非…...

深入分析@Bean源码

文章目录一、源码时序图二、源码解析1. 运行案例程序启动类2. 解析AnnotationConfigApplicationContext类的AnnotationConfigApplicationContext(Class<?>... componentClasses)构造方法3. 解析AbstractApplicationContext类的refresh()方法4. 解析AbstractApplicationC…...

Web Components学习(1)

一、什么是web components 开发项目的时候为什么不手写原生 JS&#xff0c;而是要用现如今非常流行的前端框架&#xff0c;原因有很多&#xff0c;例如&#xff1a; 良好的生态数据驱动试图模块化组件化等 Web Components 就是为了解决“组件化”而诞生的&#xff0c;它是浏…...

Element-UI实现复杂table表格结构

Element-UI组件el-table用于展示多条结构类似的数据&#xff0c;可对数据进行排序、筛选、对比或其他自定义操作。将使用到以下两项&#xff0c;来完成今天demo演示&#xff1a;多级表头&#xff1a;数据结构比较复杂的时候&#xff0c;可使用多级表头来展现数据的层次关系。合…...

Azure AD 与 AWS 单一帐户SSO访问集成,超详细讲解,包括解决可能出现的错误问题

本教程介绍如何将 AWS Single-Account Access 与 Azure Active Directory (Azure AD) 相集成。 将 AWS Single-Account Access 与 Azure AD 集成后&#xff0c;可以&#xff1a; 在 Azure AD 中控制谁有权访问 AWS Single-Account Access。让用户使用其 Azure AD 帐户自动登录…...

lvgl 笔记 按钮部件 (lv_btn) 和 开关部件 (lv_switch)

按钮基础使用方法&#xff1a; lv_btn 和 lb_obj 使用方法一样&#xff0c;只是外表并不相同&#xff0c;基础创建方法只需一行代码。 lv_obj_t* btn lv_btn_create(lv_scr_act()); 添加大小和位置&#xff1a; lv_obj_t* btn lv_btn_create(lv_scr_act()); lv_obj_set_s…...

Python高频面试题——生成器(最通俗的讲解)

生成器定义在 Python 中&#xff0c;使用了 yield 的函数被称为生成器&#xff08;generator&#xff09;。跟普通函数不同的是&#xff0c;生成器是一个返回迭代器的函数&#xff0c;只能用于迭代操作&#xff0c;更简单点理解生成器就是一个迭代器。 在调用生成器运行的过程中…...

品牌软文怎么写?教你几招

软文是什么&#xff1f;软文的本质就是广告&#xff0c;当然不是明晃晃的推销&#xff0c;而是自然隐晦地植入产品信息&#xff0c;引导更多用户自愿下单。 品牌软文对于写手的经验、内容的质量要求都相对较高&#xff0c;否则写出来的软文无法达到预期的效果。品牌软文怎么写…...

Kubernetes (k8s) 污点(Taint)介绍、示例

Kubernetes (k8s) 污点&#xff08;Taint&#xff09; 是一种机制&#xff0c;用于标记一个节点&#xff08;Node&#xff09;不可被调度的状态。它可以将一个污点标记添加到节点上&#xff0c;以防止 Pod 被调度到该节点上。污点可以用于实现各种策略&#xff0c;例如分离故障…...

Docker学习(二十一)构建 java 项目基础镜像

目录1.下载 JDK 包2.编写 Dockerfile3.构建镜像4.创建容器测试1.下载 JDK 包 JDK各版本官网下载地址&#xff1a; https://www.oracle.com/java/technologies/downloads/archive/#JavaSE 这里我们以 JDK 8u351 为例&#xff0c;点击 Java SE (8U211 and later)。 点击下载 jd…...