微信小程序设计之页面文件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博客

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

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

相关文章

【LeetCode刷题-链表】--146.LRU缓存

146.LRU缓存 方法一:哈希表双向链表 使用一个哈希表和一个双向链表维护所有在缓存中的键值对 双向链表按照被使用的顺序存储了这些键值对,靠近头部的键值对是最近使用的,而靠近尾部的键值对是最久使用的哈希表即为普通的哈希映射&#xff0…

IntelliJ IDEA 安装mybaits当前运行sql日志插件在线与离线安装方法

先安装好idear 去网上找找这个安装包下载下来,注意版本要完全一致! 比如: https://www.onlinedown.net/soft/1233409.htm手动安装离线插件方法举例 提前下载好插件的安装包 可以去网上下载这个安装包 搜索离线安装包的资源,包…

Java与Redis的集成以及Redis中的项目应用

一、Java连接Redis Redis与MySQL都是数据库&#xff0c;java操作redis其实跟操作mysql的过程是一样的。 1.1 导入依赖 打开IDEA&#xff0c;进入Java项目&#xff0c;导入pom依赖&#xff0c;代码如下&#xff1a; <dependency><groupId>redis.clients</gro…

使用OBS Browser+访问华为云OBS存储【Windows】

背景 项目中使用华为云 S3 存储,java 代码中通过华为云 OBS 提供的esdk-obs-java 来访问文件。 但是,通过 JAVA SDK 方式不太方便运维,所以我们需要一款可视化的客户端软件。 华为云 OBS 自身也提供了一款客户端软件,名为 OBS Browser+。 OBS Browser+简介 OBS Browse…

摩托车商家做展示预约小程序的作用

摩托车与电动车是人们短距离出行的主要工具&#xff0c;而其使用寿命一般是3年左右及以上、一家可能有多个&#xff0c;市场人群庞大且复购属性强&#xff0c;所以其经营商家也非常多。 如今互联网深入&#xff0c;在品牌宣传、客户获取、信息承载、营销等方面需要车辆经营商家…

网络取证-Tomcat-简单

题干&#xff1a; 我们的 SOC 团队在公司内部网的一台 Web 服务器上检测到可疑活动。为了更深入地了解情况&#xff0c;团队捕获了网络流量进行分析。此 pcap 文件可能包含一系列恶意活动&#xff0c;这些活动已导致 Apache Tomcat Web 服务器遭到破坏。我们需要进一步调查这一…

若依笔记(四):代码生成器

已知使用MyBatisPlus代码生成器可以自动生成Entity、Mapper、Service、Controller代码&#xff0c;前提是数据库中有数据表&#xff0c;生成pojo类以及对于该数据表的增删改查命令的代码&#xff0c;若依更进一步能选择表后生成代码、预览、下载&#xff0c;同时可以生产前端代…

使用 C# 在Word中插入图表

Word中的图表功能将数据可视化地呈现在文档中。这为展示数据和进行数据分析提供了一种方便且易于使用的工具&#xff0c;使作者能够以直观的方式传达信息。要通过C#代码来实现在Word中绘制图表&#xff0c;可以借助 Spire.Doc for .NET 控件&#xff0c;具体操作参考下文。 目录…

初学Redis简介以及入门

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; ​ &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Linux》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#xff0c;这…

详解Java经典数据结构——HashMap

Java 的 HashMap 是一个常用的基于哈希表的数据结构&#xff0c;它实现了 Map 接口&#xff0c;可以存储键值对。下面我们进行详细介绍&#xff1a; 基本结构&#xff1a;HashMap 底层是基于哈希表来实现的&#xff0c;每次插入一个键值对时&#xff0c;会先对该键进行 Hash 运…

Android Studio创建项目后Gradle(构建)项目很慢问题解决

Android Studio创建项目后Gradle(构建)项目很慢问题解决 在使用Android Studio创建项目时&#xff0c;会自动从网上下载相关依赖。由于是访问国外服务器&#xff0c;会出现构建项目时下载依赖很慢的问题。为了解决该问题&#xff0c;需要在settings.gradle(或者settings.gradl…

EthernetIP主站转EtherCAT协议网关采集电力变压器的 Ethernet IP 数据

怎么通过捷米JM-EIPM-ECT网关把ABB电力变压器的 Ethernet IP 数据&#xff0c;连接到欧姆龙PLC上&#xff0c;通过plc去监控电力设备的数据呢&#xff0c;下面是介绍简单的连接方法&#xff0c;采集Ethernet IP从站数据和EtherCAT协议 1 &#xff0c;捷米JM-EIPM-ECT网关连接Et…

C#开源的一个能利用Windows通知栏背单词的软件 - ToastFish

前言 今天给大家推荐一个C#开源且免费的能利用Windows通知栏背单词的软件&#xff0c;可以让你在上班、上课等恶劣环境下安全隐蔽地背单词&#xff08;利用摸鱼时间背单词的软件&#xff09;&#xff1a;ToastFish。 操作系统要求 目前该软件只支持Windows10及以上系统&…

纷享销客荣获最佳制造业数字营销服务商奖

2023年10月26日&#xff0c;第二届中国制造业数智化发展大会在上海盛大召开。本次大会汇聚了制造行业的顶尖企业和专家&#xff0c;共同探讨如何通过数字化转型赋能企业自身成长&#xff0c;实现信息化向数字化的升级转型。 在本次盛会上&#xff0c;纷享销客以其卓越的基本面、…

EasyFlash移植使用- 关于单片机 BootLoader和APP均使用的情况

目前&#xff0c;我的STM32单片机&#xff0c;需要在BootLoader和APP均移植使用EasyFlash&#xff0c;用于参数管理和IAP升级使用。 但是由于Flash和RAM限制&#xff0c;减少Flash占用&#xff0c;我规划如下&#xff1a; BootLoader中移植EasyFlash使用旧版本&#xff0c;因为…

centos7-lamp

目录 一、安装 1.关闭防火墙关闭selinux 2.安装apache 3.配置主页 二、部署mariadb&#xff08;mysql&#xff09; 1.用yum安装 2.启动数据库 3.看下端口是否listen 4登录mysql 5.修改下密码 三、安装php 1.安装依赖包 2.安装php解释器和php连接mysql驱动 3.配置…

GPT引发智能AI时代潮流

最近GPT概念爆火&#xff0c;许多行业开始竞相发展AI &#xff0c;工作就业也将面临跳转&#xff0c;目前测试就业形势就分为了两大类&#xff0c;一类是测试行业如功能、性能、自动化综合性人才就业技能需求&#xff0c;另一类便是AI测试行业的需求普遍增长&#xff0c;原本由…

linux 上flink单机安装详解

目录 一 准备安装包 二 解压 三 配置环境变量 四 验证是否部署成功 一 准备安装包 官网地址&#xff1a; Downloads | Apache Flink 百度网盘资源&#xff1a; 链接: https://pan.baidu.com/s/15aXmF3JLxnOlPiDxId637Q?pwdsqsx 提取码: sqsx 这里准备的版本是flink1.13…

C语言实现 1.在一个二维数组中形成 n 阶矩阵,2.去掉靠边元素,生成新的 n-2 阶矩阵;3.求矩阵主对角线下元素之和:4.以方阵形式输出数组。

矩阵形式&#xff1a; 1 1 1 1 1 2 1 1 1 1 3 2 1 1 1 4 3 2 1 1 5 4 3 2 1 完整代码&#xff1a; /*编写以下函数 1&#xff0e;在一个二维数组中形成如以下形式的 n 阶矩阵&#xff1a; 1 1 1 1 1 2 1 1 1 1 3 2 1 1 1 4 3 2 1 1 5 4 3 2 1 2&#xff0e;去掉…

快速入手maven

文章目录 Maven介绍Maven安装和配置基于IDEA的Maven工程创建梳理Maven工程GAVP属性Idea构建Maven JavaSE工程Idea构建Maven JavaEE工程1. 手动创建2. 插件方式创建 Maven工程项目结构说明Maven核心功能依赖和构建管理依赖传递和冲突依赖导入失败场景和解决方案扩展构建管理和插…