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

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

在小程序开发中比较重要的就是布局了。所谓的布局是依据美工提供的设计稿,按照工具提供的各类组件进行实现。小程序中我们常用的布局组件是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>

总结

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

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
5天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
21 3
|
10天前
|
小程序 云计算 开发者
|
11天前
|
小程序
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
479 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
529 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
111 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
78 6
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
189 1
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
62 5