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

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



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


总结

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

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

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

相关文章
|
3月前
|
iOS开发 开发者
iOS微信分享配置universal links步骤
iOS微信分享配置universal links步骤
1366 58
|
3月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
41 1
|
2月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
32 0
|
2月前
|
小程序
java--微信小程序发送模板消息
java--微信小程序发送模板消息
121 0
|
4月前
|
Linux 网络安全 API
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
|
4月前
|
小程序 JavaScript 前端开发
微信小程序开发必备前置知识:基本代码构成与语法
【8月更文挑战第8天】微信小程序的基本代码构成与语法
107 0
微信小程序开发必备前置知识:基本代码构成与语法
|
5月前
|
小程序 前端开发
微信综合购物商城小程序ui模板源码
微信电商小程序前端页面,综合购物商城ui界面模板。主要功能包含:电商主页、商品分类、购物车、购物车结算、我的个人中心管理、礼券、签到、新人专享、专栏、商品详情页、我的订单、我的余额、我的积分、我的收藏、我的地址、我的礼券等。这是一款非常齐全的电商小程序前端模板。
111 4
|
5月前
|
小程序 前端开发
网络祭祀人物微信小程序模板源码
网络祭祀人物微信小程序模板源码
48 5
|
5月前
|
小程序
医院门诊预约挂号小程序模板源码
医院门诊预约挂号小程序模板源码
47 4