微信小程序页面开发(微信小程序开发网页)

WXML(微信标记语言)是一套用于框架设计的标记语言。结合基本组件和事件系统，可以构建页面结构。

我认为WXML是通过三个维度引入的:纵向、横向和逻辑处理。下面简单介绍一下。它们也是开发小程序的基础。必要时，可以根据具体的文档使用，以后引入具体功能时再进行扩展。

垂直的

纵向:即组件的组合，包括系统组件、第三方组件和用户自定义组件。

例如:

ltview class = 容器 gt ltview class = 用户信息 gt ltimage src = { { userInfo.avatarUrl } } background -size = ；封面 gt lt/image gt； lttext class = userinfo -昵称 gt用户名</text gt； lt/view gt； lt/view gt；系统组件:

视图:封面-图像、封面-视图、可移动-区域、可移动-视图、滚动-视图、滚动条、滚动条-项目、视图

基本内容:图标、进度、rich -文本、文本

组件:按钮、复选框、复选框-组、编辑器、表单、输入、标签、选取器、选取器-视图、选取器-视图-列、单选、单选-组、滑块、开关、文本区

导航:功能-页面-导航器，导航器

组件:音频、摄像头、图像、live -播放器、live -推送器、视频

地图:地图

画布:画布

开放性:广告，官方-账号，开放-数据，web -视图

原生组件描述:原生-组件

可访问性:aria -组件

导航栏:导航-栏

页面配置节点:第3页+元

使用参考:https://developers . weixin . QQ . com/mini program/dev/component/native -component . html

第三方组件:如WeUI组件库等。

定制组件:定制组件有自己的wxml模板和wxss样式。

斜地

景观:组件的属性

属性描述id唯一标识类样式表样式内联样式隐藏数据-*事件传递数据bind* /catch*组件事件逻辑处理

逻辑:根据绑定的数据决定如何显示视图。

数据绑定

lt！--wxml--> lt视图 gt{ { message } } lt/view gt；//page . jspage({ data:{ message: # 39；你好米娜！'}})列表呈现

lt！--wxml--> lt查看wx:for = ；{ { array } } gt{ { item } } lt/view gt；//page.jspage ({data: {array: [1，2，3，4，5]})条件渲染

lt！--wxml--> ltview wx:if = ；{ { view = = # 39WEBVIEW # 39} } gtWEBVIEW lt/view gt； ltview wx:elif = ；{ { view = = # 39APP # 39} } gtAPP lt/view gt； ltview wx:else = ；{ { view = = # 39米娜 # 39；} } gt米娜 lt/view gt；//page . jspage({ data:{ view: # 39；米娜 # 39；}})块用于包装视图组件

如果wx:for，wx:if想要呈现视图容器，可以用block标签包装。block标签不是组件，而是用于包装的元素，不会呈现，只接受wx:..控制属性。

并且阻止:如果:

ltblock wx:if = ；{ { true } } gt lt视图 gtview1 lt/view gt； lt视图 gtview2 lt/view gt； lt/block gt；和块:用于:

lt块wx:for = ；{{[1，2，3]} } ； gt lt视图 gt{ { index } }: lt；/view gt； lt视图 gt{ { item } } lt/view gt； lt/block gt；推荐教程:《微信小程序》以上是微信小程序页面开发的详细内容。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：微信小程序页面开发(微信小程序开发网页) https://zhujicankao.com/76945.html