【微信小程序】基础篇 -- 模板语法与配置的总结（二十一）

• 💌 所属专栏：【微信小程序开发教程】

• 😀 作  者：我是夜阑的狗🐶

• 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！

• 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘
  
  

您的点赞、关注、收藏、评论，是对我最大的激励和支持！！！🤩 🤩 🤩

---

前言

  大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第21篇文章;
  今天开始学习微信小程序的第十二天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
  专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。

---

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

---

总结

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

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

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

更多专栏订阅:

• 😀 【LeetCode题解（持续更新中）】
• 🌼 【鸿蒙系统】
• 👑 【Python脚本笔记】
• 🚝 【Java Web项目构建过程】
• 💛 【微信小程序开发教程】
• ⚽ 【JavaScript随手笔记】
• 🤩 【大数据学习笔记（华为云）】
• 🦄 【程序错误解决方法（建议收藏）】
• 🚀 【软件安装教程】

订阅更多，你们将会看到更多的优质内容！！