微信小程序开发入门介绍-布局组件

简介: 微信小程序开发入门介绍-布局组件

在小程序开发中比较重要的就是布局了。所谓的布局是依据美工提供的设计稿,按照工具提供的各类组件进行实现。小程序中我们常用的布局组件是view。通过布局组件就可以实现我们想要的效果。

布局组件的添加

我们还是使用可视化的方式进行搭建,在控制台点击可视化,点击view组件,给页面中增加一个组件。

小程序的布局组件是view,微搭中的布局组件叫普通容器,同样的我们也可以往页面中添加一个普通容器组件

所谓的布局,其实就类似于我们使用word进行排版,比如我们可以插入表格,表格是分为行和列,那几行和几列就可以实现我们一般的页面的布局效果。比如我们要实现一个一行两列的效果,我们先看低代码中如何实现。

低码中实现一行两列布局

低码中如果要实现一行两列的效果,先需要容器进行嵌套

如果我们不设置样式,默认组件是从上到下排列的,如果想改成从左到右排列,那就需要在外层普通容器设置样式,一般弹性布局可以做到。我们设置外层普通容器的样式为弹性布局,主轴方向为水平,主轴和副轴对齐都是居中。

普通容器默认是填满屏幕的,为了实现两列,我们还需要给内层的普通容器的宽度都设置为50%,这样就是实现了一行两列的布局

微信开发者工具实现一行两列布局

在低码中是可视化的方式设置样式的,那在微信开发者工具如何做到呢?同理我们也是要实现嵌套

<view style="position:relative; width: 100%; background: #d3d3d3; height: 100px">
  <view style="position:relative; width: 100%; background: #df1b1b; height: 100px"></view>
  <view style="position:relative; width: 100%; background: #401ed8; height: 100px"></view>
</view>

其实代码的模式和低码的模式原理是相通的,同样的我们需要在外层的view设置样式,样式的话我们可以粘贴低码编辑器里生成的

微信开发者工具的样式可以写在index.wxss文件里

.outer{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row
}

然后可以在外层的view里添加一个样式类,调用index.wxss文件里的样式

<view class="outer" style="position:relative; width: 100%; background: #d3d3d3; height: 100px">
  <view style="position:relative; width: 100%; background: #df1b1b; height: 100px"></view>
  <view style="position:relative; width: 100%; background: #401ed8; height: 100px"></view>
</view>

总结

我们本篇对比了一下低码和微信开发者工具中如何实现页面的布局,双方实现方式是一致的,都是添加组件、定义样式。区别是低码是纯可视化话配置,微信开发者工具得手写代码。从开发效率看,纯配置的模式记忆的知识点更少,开发效率更高。后续我们会继续对比两种工具之间的不同,敬请期待。

相关文章
|
17天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
261 7
|
17天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
363 1
|
18天前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
46 1
微信小程序:轻松实现时间轴组件
|
13天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
29 1
|
17天前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
223 1
|
18天前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
41 0
微信小程序:自定义关注公众号组件样式
|
21天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
46 1
|
12天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
25 0
|
17天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
194 0
|
21天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
293 0