【微信小程序】-- 模板语法与配置的总结(二十一)

简介: 【微信小程序】-- 模板语法与配置的总结(二十一)



一、WXML 模板语法渲染页面结构

  前面通过案例学习模板语法和配置,实现了完整的页面效果。接下来对小程序模板语法与配置相关内容进行一个总结。话不多说,让我们原文再续,书接上回吧。

  回顾前面学习到的内容,首先先学习到的是能够使用 WXML 模板语法来渲染页面结构。主要模板语法有:

  • wx:if、wx:elif、wx:else

  这三个要一起配合使用,当想要多个条件控制组件时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换。其中 wx:if 会以动态创建和移除元素 的方式控制元素的展示与隐藏。

  • hidden

  hidden 是以切换样式的方式(display: none/block;),控制元素的显示与隐藏,并不会动态创建和移除元素。所以当组件频繁切换时,建议使用 hidden,加快渲染速度。

  • wx:for、wx:key。

在用 wx:for 渲染循环结构时,建议使用 ·wx:key 来指定列表中项目的唯一的标识符,从而提高渲染的效率。如果没有 id ,也可以使用索引来当 key 值。

二、 WXSS 样式美化页面结构

  wxss样式主要需要掌握的有:rpx 尺寸单位、@import 样式导入、全局样式和局部样式。

  • rpx 尺寸单位

  rpx 是小程序中实现屏幕适配的一种方式。在实际开发过程中,建议使 iPhone6 作为视觉稿的标准,这样在进行单位换算的时候十分方便,因为在 iPhone6 上 1px = 2rpx

  • @import 样式导入

  import 样式在开发过程中可能使用的不是很多,所以了解一下即可。

  • 全局样式和局部样式

  当全局样式和局部样式产生冲突时,会以局部样式为主,不过这样做的前提是局部样式权重比大于或等于全局样式权重比。

三、app.json 对小程序进行全局性配置

  小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。最常用的配置项有:pageswindowtabBarstyle,前面重点学习了 window、tabBar。

  • window

  通过 window 可以来控制导航栏相关的一些效果和背景区域的样式效果。

  • tabBar

  通过 tabBar 在小程序里快速配置一个好看的 tabBar 效果。

四、 page.json 对小程序页面进行个性化配置

  每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置。这里要清楚一个原则:就近原则。对单个页面进行个性化配置时,页面级别配置会覆盖全局性配置。

五、如何发起网络数据请求

  最后学习就是能够知道如何发起网络数据请求,可以通过 wx 这个顶级对象调用 request() 方法发起 get 或者 post 等这样的请求,不用对服务器进行发送数据时, data 属性是可以省略不写的。

  同时,当想在页面加载时就获取数据的话,可以将获取数据的方法放在 onLoad() 事件里面进行调用。因为在页面生命周期中,onLoad()是第一个执行的。


总结

  感谢观看,这里就是模板语法与配置的总结,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
1月前
【微信公众平台对接】有关【创建发票卡券模板】调用示例
【微信公众平台对接】有关【创建发票卡券模板】调用示例
15 0
|
1月前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
19天前
|
Java
java发送微信公众号模板消息
java发送微信公众号模板消息
|
1月前
|
开发框架 移动开发 小程序
【微信小程序】-- 配置uni-app的开发环境(四十八)
【微信小程序】-- 配置uni-app的开发环境(四十八)
|
26天前
|
小程序
微信小程序——属性配置大全
微信小程序——属性配置大全
14 0
|
15天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
15天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
15天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
15天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
1月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通