一、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 等。最常用的配置项有:pages
、window
、tabBar
、style
,前面重点学习了 window、tabBar。
- window
通过 window 可以来控制导航栏相关的一些效果和背景区域的样式效果。
- tabBar
通过 tabBar 在小程序里快速配置一个好看的 tabBar 效果。
四、 page.json 对小程序页面进行个性化配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置。这里要清楚一个原则:就近原则。对单个页面进行个性化配置时,页面级别配置会覆盖全局性配置。
五、如何发起网络数据请求
最后学习就是能够知道如何发起网络数据请求,可以通过 wx 这个顶级对象调用 request() 方法发起 get 或者 post 等这样的请求,不用对服务器进行发送数据时, data 属性是可以省略不写的。
同时,当想在页面加载时就获取数据的话,可以将获取数据的方法放在 onLoad() 事件里面进行调用。因为在页面生命周期中,onLoad()是第一个执行的。
总结
感谢观看,这里就是模板语法与配置的总结,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹
也欢迎你,关注我。👍 👍 👍
原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。