微信小程序设计之页面文件pages

    一、新建一个项目

首先,下载微信小程序开发工具,具体下载方式可以参考文章《微信小程序开发者工具下载》。

然后,注册小程序账号,具体注册方法,可以参考文章《微信小程序个人账号申请和配置详细教程》。

在得到了测试号的账号信息之后,可以在开发者工具中使用此账号信息创建项目进行开发。

​​​

点击确定后,可以在左侧看到小程序的主要界面【Hello World】。

​​​

二、pages介绍

1、pages

小程序一般会在根目录下创建一个pages文件夹用于保存所有页面文件,每个页面有自己独立的二级目录,如下图所示。

由上图可见,该项目当前由index和 logs两个页面组成。每一个单独的页面基本上由4种文件构成,即 wxml、wxss、js/ts和 json,说明如下:

  • wxml文件:用于构建当前页面的结构,包括组件、事件等内容用户最终看到的页面效果就是由该文件显示出来的。
  • wxss文件:可选页面,用于设置当前页面的样式效果,该文件规定的样式会覆盖app.wxss全局样式表中产生冲突的规定,但不会影响其他页面。
  • js文件:可选页面,用于设置当前页面的逻辑代码
  • json文件:可选页面,用来重新设置 app.json中 window属性规定的内容,新设置的选项只会显示在当前页面上,不会影响其他页面。

注意:为了方便开发者减少配置项,建议直接在空白页面文件夹上右击选择“新建”→Page,这样可以一次性创建描述页面的这4种文件,且它们会具有相同的路径与文件名。

2、json文件属性

json 文件的可用属性如下表所示:

如下图所示,为logs页面的导航栏的标题设置。

注意:页面的 JSON 文件只能设直与 window 相关的配置项,以决定本页面的窗口表现, 所以无须像 app.json 那样专门写 window 属性。

更多内容:

微信小程序开发笔记_珞瑜·的博客-CSDN博客

微信小程序开发者工具下载-CSDN博客

微信小程序个人账号申请和配置详细教程-CSDN博客

微信小程序设计之主体文件app-json-pages-CSDN博客

微信小程序设计之主体文件app-json-window-CSDN博客

微信小程序设计之主体文件app-json-tabBar-CSDN博客

微信小程序设计之主体文件app-ts/js-CSDN博客

微信小程序设计之主体文件app-wxss/less-CSDN博客

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

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

相关文章

2023年中国牙钻机优点、产量及市场规模分析[图]

牙钻机,又称为牙科钻机或牙科设备,是一种专用于牙科诊所和牙科医院的医疗设备。它被用来进行牙齿修复、治疗和牙科手术等操作。牙钻机通常由电动马达驱动,带有不同类型的钻头、磨头和其他附件,用于在牙齿上进行各种不同的操作&…

DSP开发例程(3): sys_print_to_uart

目录 DSP开发例程: sys_print_to_uart创建工程源码编辑os.capp.cfgmain.c 调试原理分析 DSP开发例程: sys_print_to_uart 在DSP 应用的执行过程中, 我们经常需要调用 System_printf() 来显示当前的执行状态. 不只是 System_printf() 函数, SYS/BIOS 打印信息的函数还包括: Sys…

nodejs+vue食力派网上订餐系统-计算机毕业设计

采用当前流行的B/S模式以及3层架构的设计思想通过 技术来开发此系统的目的是建立一个配合网络环境的食力派网上订餐系统,这样可以有效地解决食力派网上订餐管理信息混乱的局面。 本设计旨在提高顾客就餐效率、优化餐厅管理、提高订单准确性和客户的满意度。本系统采…

GLoRE:大型语言模型的逻辑推理能力探究

最新研究揭示,尽管大语言模型LLMs在语言理解上表现出色,但在逻辑推理方面仍有待提高。为此,研究者们推出了GLoRE,一个全新的逻辑推理评估基准,包含12个数据集,覆盖三大任务类型。 实验对比发现,…

后门程序分析1

临时补充一个内容,这是一个后门程序,通过IDA分析,之后把里面收集的信息点全部整理出来(包括:反虚拟机,系统信息等等)pass:guet 用IDA打开先看看主函数的样子 查阅一些这些API InternetOpenA&…

【机器学习合集】模型设计之网络宽度和深度设计 ->(个人学习记录笔记)

文章目录 网络宽度和深度设计1. 什么是网络深度1.1 为什么需要更深的模型浅层学习的缺陷深度网络更好拟合特征学习更加简单 2. 基于深度的模型设计2.1 AlexNet2.2 AlexNet工程技巧2.3 VGGNet 3. 什么是网络宽度3.1 为什么需要足够的宽度 4. 基于宽度模型的设计4.1 经典模型的宽…

EM算法解析+代码

大纲 数学基础:凸凹函数,Jensen不等式,MLEEM算法公式,收敛性HMM高斯混合模型 一、数学基础 1. 凸函数 通常在实际中,最小化的函数有几个极值,所以最优化算法得出的极值不确实是否为全局的极值&#xff…

初学编程入门基础教学视频,中文编程开发语言工具箱之豪华编辑构件,免费版中文编程软件下载

初学编程入门基础教学视频,中文编程开发语言工具箱之豪华编辑构件,免费版中文编程软件下载 构件的其中一个属性、方法,查找内容,替换内容。 构件工具箱非常丰富,其中该构件在 文本件构件板菜单下。 编程系统化课程总目…

web - 前段三剑客

目录 前言 一. HTML 常用标签演示 图片标签 ​编辑 表格标签(重点) ​编辑 表单标签 (重点) 布局标签 其余标签 二. CSS 2.1 . css的三种引入方式 2.2 . 三大选择器 2.3 . css样式 - 浮动 2.4 . css样式 - 定位 1.static 2.absolute(绝对位置) 3.relavite(相…

【设计模式】第13节:结构型模式之“享元模式”

一、简介 所谓“享元”,顾名思义就是被共享的单元。享元模式的意图是复用对象,节省内存,前提是享元对象是不可变对象。 实现:通过工厂模式,在工厂类中,通过一个Map或者List来缓存已经创建好的享元对象&am…

LeetCode 415 字符串相加 简单

题目 - 点击直达 1. 415 字符串相加 简单1. 题目详情1. 原题链接2. 题目要求3. 基础框架 2. 解题思路1. 思路分析2. 时间复杂度3. 代码实现 1. 415 字符串相加 简单 1. 题目详情 给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和并同样以字符串形式返回。…

LeetCode题:88合并两个有序数组,283移动零,448找到所有数组中消失的数字

目录 88合并两个有序数组 1、题目要求 2、解题思路 (1)、暴力解法: (2)、双指针,使用第三数组的解法: 3、代码展示 (1)、暴力解法: (2&am…

画时钟(turtle库)

思路: 总体来看,分为两个部分:固定的表盘,和不断刷新的指针(和时间显示) 固定的表盘 我的表盘长这个样子: 分为三个部分:60个dot点(分、秒),12条…

漏洞复现--用友 畅捷通T+ .net反序列化RCE

免责声明: 文章中涉及的漏洞均已修复,敏感信息均已做打码处理,文章仅做经验分享用途,切勿当真,未授权的攻击属于非法行为!文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

树莓派基金会近日发布了新版基于 Debian 的树莓派操作系统

导读树莓派基金会(Raspberry Pi Foundation)近日发布了新版基于 Debian 的树莓派操作系统(Raspberry Pi OS),为树莓派单板电脑带来了新的书虫基础和一些重大变化。 新版 Raspberry Pi OS 的最大变化是它现在基于最新的…

竞赛选题 深度学习图像修复算法 - opencv python 机器视觉

文章目录 0 前言2 什么是图像内容填充修复3 原理分析3.1 第一步:将图像理解为一个概率分布的样本3.2 补全图像 3.3 快速生成假图像3.4 生成对抗网络(Generative Adversarial Net, GAN) 的架构3.5 使用G(z)生成伪图像 4 在Tensorflow上构建DCGANs最后 0 前言 &#…

《数字图像处理-OpenCV/Python》连载(33)使用掩模图像控制处理区域

**本书京东优惠购书链接:https://item.jd.com/14098452.html** **本书CSDN独家连载专栏:https://blog.csdn.net/youcans/category_12418787.html** 第 5 章 图像的算术运算 在OpenCV中,图像是以Numpy数组格式存储的,图像的算术运…

大数据Flink(一百零三):SQL 表值聚合函数(Table Aggregate Function)

文章目录 SQL 表值聚合函数(Table Aggregate Function) SQL 表值聚合函数(Table Aggregate Function) Python UDTAF,即 Python TableAggregateFunction。Python UDTAF 用来针对一组数据进行聚合运算,比如同一个 window 下的多条数据、或者同一个 key 下的多条数据等,与…

grafana InfluxDB returned error: error reading influxDB 400错误解决

问题: 如图提示错误解决 确认自己的docker容器是否配置了以下3个字段 DOCKER_INFLUXDB_INIT_USERNAMExxx DOCKER_INFLUXDB_INIT_PASSWORDyyy DOCKER_INFLUXDB_INIT_ADMIN_TOKENzzz 如果有,在grafana中需要添加header配置Header: Authorization , Value…

docker应用部署---nginx部署的配置

1. 搜索nginx镜像 docker search nginx2. 拉取nginx镜像 docker pull nginx3. 创建容器,设置端口映射、目录映射 # 在/root目录下创建nginx目录用于存储nginx数据信息 mkdir ~/nginx cd ~/nginx mkdir conf cd conf# 在~/nginx/conf/下创建nginx.conf文件,粘贴下…