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

news2024/10/6 3:35:09

    一、新建一个项目

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

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

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

​​​

点击确定后,可以在左侧看到小程序的主要界面【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博客

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

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

相关文章

day05 语法基础——CG语法 23.10.29

1.ShaderLabVS Pro插件安装(仅vs全家可用) 2.CG语句写在哪里 3.基础数据类型 4.特殊数据类型 5.Swizzle操作符 6.运算符相关 7.流程控制语句 8.函数 9.顶点/片元着色器基本结构 10.语义 11.顶点/片元着色器传递更多参数 12.ShaderLab属性类型和CG变量类型的匹配关系 13.CG内置…

亚信科技发布“电信级”核心交易数据库AntDB7.0,助力政企“信”创未来!

昨日,亚信科技AntDB数据库 7.0产品线上发布会成功举办,数千位关注亚信科技、关注国产数据库,致力于推动数据库行业变革的专家、客户热情参与,并对发布会及产品给予高度评价。 新增两大技术特性 作为我国最早一批独立研发的通用型…

动静分离技术

一、HAproxy 动静分离 1、概念: HAproxy 动静分离技术是一种用于优化 Web 服务器性能和提高用户体验的策略,它通过将动态内容和静态内容分别路由到不同的后端服务器来实现,减轻服务器负载,提高网站的响应速度。 动态内容包括由…

2023年双十一如何选购最新fl studio 21多少钱?有FL Studio21中文解锁版下载

如果你一直梦想制作自己的音乐(无论是作为一名制作人还是艺术家),你可能会想你出生在这个时代是你的幸运星。这个水果圈工作室和上一版之间的改进水平确实令人钦佩。这仅仅是FL Studio 21所提供的皮毛。你的音乐项目的选择真的会让你大吃一惊。你以前从未有过这样的…

6G关键新兴技术- 智能超表面(RIS)技术演进

摘要: 根据欧盟5G公私联盟协会定义,可重构智慧表面技术是由能够任意塑造电磁波面的材料组成,几乎是被动设备,可以适应或改变发射器和接收器之间的无线电信号。 一、产品定义及范围 根据欧盟5G公私联盟协会(5G Infrastructure P…

USART HMI串口屏+单片机通讯上手体验

USART HMI串口屏单片机通讯上手体验 🔖本文采用淘晶驰4.3寸IPS串口屏实物验证,HMI串口屏经简单配置即可快速实现,串口通讯效果。串口屏上手简单,有独立的开发套件,容易上手,驱动显示和功能代码独立。本文仅…

能源管理数据:为企业打造绿色动力,引领可持续发展新篇章

随着全球能源结构的转变,绿色、清洁、可再生能源已成为关注的焦点。在这个大背景下,企业如何有效管理和利用能源数据,提高能源利用效率,降低碳排放,已成为当今社会的重要议题。本文将为你揭示能源管理数据的重要性和应…

计算机毕业设计选题推荐-周边美食推荐微信小程序/安卓APP-项目实战

✨作者主页:IT毕设梦工厂✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

1.spark standalone环境安装

概述 环境是spark 3.2.4 hadoop版本 3.2.4,所以官网下载的包为 spark-3.2.4-bin-hadoop3.2.tgz 在具体安装部署之前,需要先下载Spark的安装包,进到 spark的官网,点击download按钮 使用Spark的时候一般都是需要和Hadoop交互的&a…

8.Scala面向对象编程

概述 在这里主要了解Scala中的类、对象和接口 Scala中类和java中的类基本是类似的Scala中的对象是需要定义的,而java中的对象是通过class new出来的Scala中的接口是trait,java中的接口是interface 相关链接 阅读之前,可以浏览一下 scala相关…

chat gpt 在开发当中的应用

chatgpt 出来已经有一段时间了,本人在开发的过程中也是有去使用。 经常使用的是讯飞大模型和通义千问,在使用的过程中,个人感觉讯飞大模型在写代码方面会比较智能。 比如问一个 sqlser 单表 数据量 几个亿如何处理的问题,讯飞会给…

Geek challenge 2023 EzHttp

打开链接需要使用post请求提交username和password 查看源码得到提示,爬虫想到robots协议 访问robots.txt 访问得到的路径:/o2takuXXs_username_and_password.txt 拿到用户名和密码: username:admin password:dm1N123456r00t# 进行post传参…

基于vue小红书平台用户数据分析与可视化

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…

计算机毕业设计选题推荐-餐厅线上点餐微信小程序/安卓APP-项目实战

✨作者主页:IT毕设梦工厂✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

关于测试组件junit切换testng的示例以及切换方式分享

文章目录 概要首先看看junit和testng的区别实践篇摸拟业务逻辑代码简单对象数据层摸拟类业务逻辑层摸拟类后台任务摸拟类 基于springmockjunit基于springmocktestng 示例的差异点junit与testng的主要变动不大,有以下几个点需要注意注解部分在before,after中testng多出按配置执行…

【PyQt学习篇 · ⑥】:QWidget - 事件

文章目录 事件消息显示和关闭事件移动事件调整大小事件鼠标事件进入和离开事件鼠标按下和释放事件鼠标双击事件鼠标按下移动事件 键盘事件焦点事件拖拽事件绘制事件改变事件右键菜单输入法 事件转发机制案例一案例二案例三 事件消息 显示和关闭事件 showEvent(QShowEvent)方法…

Kubernetes - Ingress HTTP 升级 HTTPS 配置解决方案(新版本v1.21+)

之前我们讲解过 Kubernetes - Ingress HTTP 搭建解决方案,并分别提供了旧版本和新版本。如果连 HTTP 都没搞明白的可以先去过一下这两篇 Kubernetes - Ingress HTTP 负载搭建部署解决方案_放羊的牧码的博客-CSDN博客Kubernetes - Ingress HTTP 负载搭建部署解决方案…

7.scala方法初探

概述 在 scala 中,方法定义在内中,这点类似于 java ,此文说明如何定义方法,及方法一些 用法 相关链接 阅读之前,可以先行浏览一下 官方文档 scala相关文章 定义一个参数的方法 这个例子定义了一个名为 double 方法&a…

会声会影2024这款视频剪辑软件怎么样?

众所周知,每每有新兴行业逐渐崛起壮大的时候,随机而来的就是这个行业创造出的衍生行业,比如说现在的短视频平台或者是视频剪辑行业,都是很明显的例子,今天我们就针对剪辑软件来和大家聊一聊,会声会影2024这…

Vue显示FFmpeg推的流

零、环境安装 小弟的另一篇文章: FFmpeg和rtsp服务器搭建视频直播流服务-CSDN博客 一、FFmpeg推流 1、拉取rtsp摄像头流 sudo ffmpeg -f v4l2 -input_format mjpeg -i /dev/video0 -c:v copy -f rtsp rtsp://10.168.3.196:8554/mystream2、推视频的rtmp流 sudo ffm…