2-认识小程序项目

基本结构

  myapp├─miniprogram┊  └──pages┊  ┊  └──index┊  ┊  ┊  ├──index.json┊  ┊  ┊  ├──index.ts┊  ┊  ┊  ├──index.wxml┊  ┊  ┊  └──index.wxss┊  ┊  └──logs┊  ┊     ├──index.json┊  ┊     ├──index.ts┊  ┊     ├──index.wxml┊  ┊     └──index.wxss┊  ├───utils┊  ┊  └──util.ts┊  ├──app.json┊  ├──app.ts┊  ├──app.wxss┊  └──sitemap.json└── typings└──.eslintrc.js├──package.json├──project.config.json├──project.private.config.json└──tsconfig.json
  • pages用来存放所以小程序界面
  • utlis用来存放工具性质的模块
  • app.ts小程序的入口文件
  • app.json小程序的全局配置文件
  • app.wxss小程序的全局样式文件
  • project.config.json项目配置文件
  • sitemap.json用来配置小程序及其页面是否允许被微信索引

pages

小程序官方间隙把小程序页面存放在pages目录,以单独的文件夹存在
在这里插入图片描述

  • .js页面脚本文件,存放页面数据、事件处理函数
  • .json当前页面配置文件,配置外观
  • .wxml页面结构文件
  • .wxss页面样式表文件

json配置文件

小程序项目中有四种配置文件

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

官网入口api

当前小程序全局配置包括小程序的所有页面路径、窗口外观、界面表现、底部tab等。默认app.json配置如下

{//记录当前小程序所有页面路径"pages": ["pages/index/index","pages/logs/logs"],//全局定义小程序所以页面背景色文字等"window": {"navigationBarTextStyle": "black","navigationStyle": "custom"},//全局定义小程序所有组件使用的样式版本//v2默认为最新版本,删除style表示使用旧的版本"style": "v2","rendererOptions": {"skyline": {"defaultDisplayBlock": true,"disableABTest": true,"sdkVersionBegin": "3.0.0","sdkVersionEnd": "15.255.255"}},"componentFramework": "glass-easel",//指明sitemap.json的位置"sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

2. typings目录中project.config.json project.private.config.json配置文件

project.config.json项目配置文件,用来记录我们对小程序开发工具所做的个性化配置
project.private.config.json项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。

{"description": "项目配置文件","miniprogramRoot": "miniprogram/","compileType": "miniprogram",//编译相关配置"setting": {"useCompilerPlugins": ["typescript"],"babelSetting": {"ignore": [],"disablePlugins": [],"outputPath": ""},"coverView": false,"postcss": false,"minified": false,"enhance": false,"showShadowRootInWxmlPanel": false,"packNpmRelationList": [],"ignoreUploadUnusedFiles": true,"compileHotReLoad": false,"skylineRenderEnable": true,"condition": false},"simulatorType": "wechat","simulatorPluginLibVersion": {},"condition": {},"srcMiniprogramRoot": "miniprogram/","editorSetting": {"tabIndent": "insertSpaces","tabSize": 2},"libVersion": "2.32.3","packOptions": {"ignore": [],"include": []},//小程序帐号id"appid": "wxeebf7ff270e81f02"
}

setting配置项可以在本地配置中开启或关闭
在这里插入图片描述

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

官网入口

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

4. pages目录中每个页面文件夹.json配置文件

.json文件对本页面窗口外观进行配置,页面配置项会覆盖app.json中的相同配置项

小程序页面

app.json->pages中新增页面存放路径,小程序开发工具会自动创建对应的页面文件
在这里插入图片描述
app.json->pages配置项中默认第一个位项目首页
在这里插入图片描述

WXML模版

官网入口
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。作用类似网页开发的HTML

标签名称差异

HTML (div,span,img,a)
WXML (view,text,image,navigator)

属性节点差异

<a href="#"></a>
<navigator url="pages/index/index"></navigator>

类似vue模版语法

官网入口

  • 数据绑定
  • 列表渲染
  • 条件渲染
  • 模版
  • 引用

WXSS模版

官网入口
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比,WXSS 扩展的特性有:

尺寸单位

rpx尺寸单位

css需要手段进行像素单位换算 如rem
wxss新的尺寸耽误rpx在不同屏幕上小程序会自动换算

样式导入

使用@import语句可以导入外联样式表,
@import后跟需要导入的外联样式表的相对路径,
用;表示语句结束。

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss
文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

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

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

相关文章

MQ消息堆积如何解决?

RabbitMQ如果有100万消息堆积在MQ&#xff0c;如何解决&#xff1f; 当生产者发送消息的速度超过消费者处理消息的速度&#xff0c;就会导致队列中的消息堆积&#xff0c;只到队列存储消息达到上限。之后发送的消息就会成为死信&#xff0c;可能会被丢弃&#xff0c;这就是消息…

C++——STL标准模板库——容器详解——list

一、基本概念 &#xff08;一&#xff09;定义 list&#xff1a;双向链表。list是一种分布式存储的线性表&#xff0c;每个节点分为数据域和指针域&#xff0c;其中指针域中包含一个指向前驱节点的指针和一个指向后续节点的指针&#xff0c;基本模型如下&#xff1a; &#…

ZooKeeper 实战(二) 命令行操作篇

文章目录 ZooKeeper 实战(二) 命令行操作篇1. 服务端命令1.1. 服务启动1.2. 查看服务1.3. 重启服务1.4. 停止服务 2. 客户端命令2.1. 启动客户端2.2. 查看节点信息查看根节点详情 ls -s /添加一个watch监视器 ls -w /列举出节点的级联节点 ls -R / 2.3. 查看节点状态2.4. 创建节…

谷粒商城-缓存使用分布式锁SpringCache(5天)

缓存使用 1.1.1 哪些数据适合放入缓存 即时性、 数据一致性要求不高的 访问量大且更新频率不高的数据&#xff08;读多&#xff0c; 写少&#xff09; 例如&#xff1a;电商类应用&#xff0c; 商品分类&#xff0c; 商品列表等适合缓存 本地缓存 使用Map进行本地缓存 本地缓存…

Windows安全基础:UAC

目录 UAC原理介绍 UAC的四个安全级别定义 UAC的触发条件 UAC用户登录过程 UAC虚拟化 配置UAC UAC原理介绍 用户账号控制&#xff08;User Account Control&#xff09; 为Windows Vista推出的一项安全技术&#xff0c;其原理是通过限制安全应用软件对系统层级的访问&…

北重T型槽平台厂家介绍铸铁平台在业界有怎样的优势

河北北重厂家简单介绍一下铸铁平台在业界具有哪些优势&#xff1a; 高强度&#xff1a;铸铁平台具有较高的强度和刚性&#xff0c;能够承受较大的重量和荷载。 耐磨性&#xff1a;铸铁平台表面通常经过处理&#xff0c;具有良好的耐磨性&#xff0c;能够在长期使用中保持平整和…

产品设计标书制作全攻略:从入门到精通

在商业竞争日益激烈的今天&#xff0c;一份出色的产品设计标书往往是企业赢得项目、展现实力的重要法宝。那么&#xff0c;如何制作一份既专业又具吸引力的产品设计标书呢&#xff1f; 一、明确目标与需求 在制作产品设计标书之前&#xff0c;首先要明确项目的目标和需求。这…

Linux 安装 Mysql5.7(glibc版)

前言:经过一天半的折腾,终于把 mysql 5.7.17 版本安装上了 centos 7 系统上,把能参考的博客几乎都看了一遍,终于发现这些细节问题,然而翻了无数的文章,基本上都没有提到这些,所以 尽量把这些细节写下来,一方面是供初学者们参考,另一方面也是对摸索做一个总结 。 一、…

SpringBoot3自动配置原理

​​​​​​自动配置 遵循约定大约配置的原则&#xff0c;在boot程序启动后&#xff0c;起步依赖中的一些bean对象会自动注入到ioc容器 看一下我们前面写的代码有没有达到自动配置的效果呢&#xff1f; 没有自动&#xff0c;我们写了配置类&#xff0c;写了Import注解&#…

Spring Boot自定义启动Banner在线生成工具

记录一下&#xff0c;后续有更新添加 链接: Spring Boot自定义启动Banner在线生成工具

【Linux】磁盘分区管理及挂载/永久挂载管理

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

S1-05二进制信号量和计数器信号量

二进制信号量 二进制信号量&#xff0c;又叫二值信号量&#xff0c;要么是0&#xff0c;要么是1&#xff0c;也是通过Take和Give方式获取和释放&#xff0c;用于控制对共享资源的访问。在每次访问共享资源之前需要获取二进制信号量&#xff0c;若已被获取则任务会被阻塞直到二…

提供一些防扫描被封禁、防溯源工具

1► 介绍 SecScanC2可以创建P2P网络进行安全扫描和C2。该工具可以帮助安全研究人员更有效地进行渗透测试&#xff0c;防止扫描被封禁&#xff0c;保护自己免受溯源。 2► 工具特性 P2P&#xff1a;将大量互联网节点构建成P2P网络 防止扫描被封禁&#xff1a;随机或指定节点…

二阶贝塞尔曲线生成弧线

概述 本文分享一个二阶贝塞尔曲线曲线生成弧线的算法。 效果 实现 1. 封装方法 class ArcLine {constructor(from, to, num 100) {this.from from;this.to to;this.num num;return this.getPointList();}getPointList() {const { from, to } thisconst ctrlPoint thi…

二级C语言备考4

一、单选 共40题 &#xff08;共计40分&#xff09; 第1题 &#xff08;1.0分&#xff09; 题号:6198 难度:易 第1章 以下说法正确的是 (). A:C语言被称为"高级语言"是因为它用接近人们习惯的自然语言和数学语言作为表达形式,使人们学习和操…

rime中州韵小狼毫 汉语拼音输入方案

在word中&#xff0c;我们可以轻易的给汉字加上拼音&#xff0c;如下&#x1f447;&#xff1a; 但是&#xff0c;如何单独的输入拼音呢&#xff1f;例如输入 pīn yīn, 再如 zhōng guō。今天我们分享一个使用rime中州韵小狼毫须鼠管输入法配置的输入汉语拼音的输入方案。功…

C++面试问题---Const

1.const 1.1 作用 修饰变量&#xff0c;说明该变量不可以被改变&#xff1b;修饰指针&#xff0c;分为指向常量的指针&#xff08;pointer to const&#xff09;和自身是常量的指针&#xff08;常量指针&#xff0c;const pointer&#xff09;&#xff1b;修饰引用&#xff0c;…

JFrog_Artifactory CLI 的使用

文章目录 1. 文件上传&#xff0c;下载&#xff0c;删除&#xff0c;拷贝, 移动&#xff0c;搜索2. 用户登录信息配置3. 文件属性设置4. 执行curl命令 1. 文件上传&#xff0c;下载&#xff0c;删除&#xff0c;拷贝, 移动&#xff0c;搜索 #1.上传tar包&#xff0c;并且创建包…

【uniapp-小程序-分享图5/4】

utils.js //裁剪分享的图片为5:4 const makeCanvas (imgUrl) > {console.log("imgUrl",imgUrl);return new Promise((resolve, reject) > {// 获取图片信息,小程序下获取网络图片信息需先配置download域名白名单才能生效uni.getImageInfo({src: imgUrl,succe…

tkinter电子时钟实现时间日期可实现透明无标题栏

您可以使用Python的Tkinter库来创建一个简单的电子时钟应用程序。以下是一个示例代码&#xff0c;它可以在窗口上显示当前的时间和日期&#xff0c;并且窗口是透明的且没有标题栏。 from tkinter import * import time# 创建主窗口 root Tk()# 设置窗口透明 root.attributes(…