做微信小程序的总结（页面布局部分）

最新推荐文章于 2024-07-06 22:23:57 发布

ikun不解释

最新推荐文章于 2024-07-06 22:23:57 发布

阅读量1.5k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/qq_42309685/article/details/102553955

版权

本文总结了微信小程序的页面布局特点，包括使用.wxml和.wxss替代传统HTML和CSS，强调了flex布局的高效应用，以及微信小程序中的响应式像素单位rpx。此外，还介绍了样式编写的基本规则和app.json的配置，如页面定义、窗口样式及底部导航栏设置。

摘要由CSDN通过智能技术生成

微信开发者平台会默认提供一套模板来承载项目

文件夹	作用
assets	用来存放一些静态资源（测试图片为主）
pages	存放项目中所有的网页
utils	存放一些工具（格式化日期）

除了上面的文件夹，项目根目录下面还会有app.js（基础js）、app.json、appwxss(公共样式)等文件。
在这里插入图片描述

微信小程序做网页和PC端网页的区别
在做PC端网页的时候，常用的标签无非是div、ul、span、img、a等
再微信小程序中，这些标签都是不能用的，取而代之的是：

标签	类比
view	相当于div
navigator	相当于a
text	相当于span
image	相当于img

页面文件不是.html后缀，是.wxml后缀，样式文件不是.css后缀，是.wxss后缀，但是这都不影响做一个像普通网页的微信小程序

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ikun不解释

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序，首页布局的实现

11-29

微信小程序，首页布局的实现 https://blog.csdn.net/qq_21036939/article/details/84618207

[小程序]小程序框架的简单页面布局

程序员老狼专注开发aigc或客服系统应用

08-17

327

1.首先下载小程序开发工具 2.小程序中的wxml就相当于html , wxss就相当于css 3.布局和html布局几乎一样 4.宽度使用百分比 5.input框里的文字上下居中是用padding撑出来的 6.最下面的文字靠右，view相当于一个块元素，设定宽度后，text-align右对齐简单的测试界面如图 index.wxml代码 <!--index...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序-首页制作 - (图解+代码流程)

最新发布

Envyᥫᩣ的博客

07-06

3447

微信小程序作为轻量级的应用平台，为用户和开发者提供了便捷的服务访问和丰富的功能体验。制作一个吸引人的小程序首页是至关重要的，它不仅是用户的第一印象，也直接影响到用户的留存与活跃度。在设计小程序首页时，融入文章摘要的元素，可以有效地提升内容的可读性和吸引力，让用户在短时间内获取关键信息，激发阅读兴趣。

微信小程序项目：微信小程序页面布局

博客

05-29

485

预收参看： https://blog.csdn.net/abs625/article/details/89562048

微信小程序新手向——界面布局

Krisit的博客

09-28

6823

微信小程序新手向——界面布局

第三章:微信小程序页面布局

qianli1的博客

03-13

2215

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。（3）absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子标准流中脱离，它对其后的兄弟盒子的定位没有影响。微信小程序的视图层由WXML和WXSS组成，其中，WXSS是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。另外，还可以在父元素外添加一个空元素，实现父元素包裹浮动元素。

微信小程序页面布局方式flexbox -温故而知新

03-29

微信小程序使用flexbox容器，flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局，其中设为display:flex或者display:inline-flex的元素称为伸缩容器。伸缩容器的子元素称为伸缩项目，伸缩...

微信小程序图片瀑布流布局demo

05-06

在这个“微信小程序图片瀑布流布局demo”中，我们将会探讨如何在微信小程序中实现图片的瀑布流展示，这是一种常见的网页和移动应用设计模式，尤其适用于图片分享和展示类应用。瀑布流布局，又称为无限滚动或荷叶边...

微信小程序 仿京东商城页面仿京东商城购物页面

06-13

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的、无需下载安装即可使用的线上服务。在这个项目中，“微信小程序 仿京东商城页面仿京东商城购物页面”是一个实践教学案例...

微信小程序+Flex布局示例源代码

05-06

这个"FlexLayout"压缩包文件很可能是包含了一系列使用Flex布局的微信小程序页面示例。通过查看和学习这些源代码，开发者可以更好地理解如何在微信小程序中应用Flex布局，解决各种页面布局问题，提升用户体验。总之...

搜索-微信小程序模板、微信小程序页面成品、下载即用、布局、样式、JS分离

04-17

同城快递微信小程序前端界面布局

03-29

同城快递。跑腿微信小程序前端界面。。后端还比较乱。。自己下载或者看演示搜索南宁同城快递

微信小程序---B站首页界面设计：附详细教程

12-11

微信小程序---B站首页界面设计：附详细教程 微信小程序---B站首页界面设计：附详细教程

04-17

手机号码请输入手机号码获取验证码验证码请输入验证码邮箱登录立即登录登录-微信小程序模板 微信小程序模板、微信小程序页面成品、下载即用、布局、样式、JS分离

微信小程序首页-----布局（详细教程赶快收藏吧）

2301_76988707的博客

10-17

7486

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。网址：Flex 布局语法教程https://www.runoob.com/w3cnote

2、微信小程序学习：页面布局

长沙火山

01-08

995

一、CSS盒模型在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 1、块级元素 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置

第3章 微信小程序页面布局

2301_79474431的博客

03-15

1561

本章首先介绍了页面布局中最基本的盒子模型，接下来介绍了浮动和定位，最后重点讲解了flex布局的基本原理、容器和项目的相关属性。

学习微信小程序的页面布局与响应式设计【含代码示例】

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

06-23

2069

本文将从基础概念出发，深入探讨微信小程序中常用的布局方式、响应式设计技巧，以及实际开发中的最佳实践，为开发者提供一套全面且实战导向的指南。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过上述讲解与示例，希望读者能够掌握微信小程序页面布局与响应式设计的核心技巧，结合实际开发经验，不断探索与创新，创造出既美观又实用的小程序界面。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，，为我们广大开发同胞谋福祉，

小白学习微信小程序的页面布局和屏幕适配

qq_67153941的博客

05-17

1198

小程序的页面布局和屏幕适配是非常重要的，可以保证小程序在不同设备上展示效果的一致性。1.1 基本布局结构一个典型的小程序页面包含三个基本组件：页面容器（Page）、页面头部（navigation bar）和页面内容（content）。2.1 百分比布局在小程序中，可以使用百分比作为宽度和高度的单位，将组件的大小设置为相对于父组件的百分比。1.2 Flex布局属性 Flex布局有很多属性可以调整子组件的排列方式，下面介绍几个常用的属性。，可以将子组件在主轴上两端对齐，并且子组件之间平分剩余空间。

微信小程序分类页面构建指南

"微信小程序的分类页面制作 - 分类页布局与数据处理" 微信小程序的分类页面制作是一项常见的任务，尤其对于电商应用来说，它能够帮助用户更方便地浏览和筛选商品。在这个过程中，开发者需要考虑如何高效地组织数据...