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

在线体验各类最新模型,更有模型 免费Token 额度领取!
立即体验
简介: 【微信小程序】-- 模板语法与配置的总结(二十一)



一、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()是第一个执行的。


总结

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

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

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

相关文章
|
iOS开发 开发者
iOS微信分享配置universal links步骤
iOS微信分享配置universal links步骤
10112 58
|
安全 算法 小程序
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
1081 28
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
|
小程序
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
1147 1
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
|
小程序
【01】微信支付商户申请下户到配置完整流程-微信商户申请-资料准备以及提交-微信商户密钥申请-申请+配置完整流程-优雅草卓伊凡
【01】微信支付商户申请下户到配置完整流程-微信商户申请-资料准备以及提交-微信商户密钥申请-申请+配置完整流程-优雅草卓伊凡
924 2
【01】微信支付商户申请下户到配置完整流程-微信商户申请-资料准备以及提交-微信商户密钥申请-申请+配置完整流程-优雅草卓伊凡
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
1438 3
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
680 9
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
882 0
|
Linux 网络安全 API
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
444 0
|
小程序 JavaScript 前端开发
微信小程序开发必备前置知识:基本代码构成与语法
【8月更文挑战第8天】微信小程序的基本代码构成与语法
852 0
微信小程序开发必备前置知识:基本代码构成与语法