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

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

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

总结

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

相关文章
|
7天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
7天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
7天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
7天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
7天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
7天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
1月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通
|
7天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
30天前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
25 2
|
1月前
|
移动开发 小程序 API
微信小程序的一些开发限制
微信小程序的一些开发限制
72 1

热门文章

最新文章