微信小程序页面开发

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
我觉得 WXML 通过三个纬度来介绍：
纵向、横向、逻辑处理 . 这里先介绍个简单介绍，它们也是开发小程序的基础，需要的时候可以根据文档具体使用， 以后介绍具体功能时候再扩展。
纵向纵向: 也就是组件的组合，包括：
系统组件、第三方组件、自定义组件 .例如：
用户名 系统组件:视图容器：
cover-image、cover-view、movable-area、movable-view、scroll-view、swiper、swiper-item、view基础内容：
icon、progress、rich-text、text表单组件：
button、checkbox、checkbox-group、editor、form、input、label、picker、picker-view、picker-view-column、radio、radio-group、slider、switch、textarea导航：
functional-page-navigator、navigator媒体组件：
audio、camera、image、live-player、live-pusher、video地图：
map画布：
canvas开放能力：
ad、official-account、open-data、web-view原生组件说明：
native-component无障碍访问：
aria-component导航栏：
navigation-bar页面属性配置节点：
page-meta具体使用参考：
https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html第三方组件: 例如 WeUI 组件库等自定义组件：
自定义组件拥有自己的 wxml 模板和 wxss 样式横向横向: 组件的属性属性名描述id唯一标识class样式表style内联样式hidden隐藏data-*事件传递数据bind* /catch*组件事件逻辑处理逻辑处理: 根据绑定好的数据决定怎么显示视图数据绑定 {
{
message}
}
// page.js Page({
data: {
message: '
Hello MINA!'
}
}
)列表渲染 {
{
item}
}
// page.js Page({
data: {
array: [1, 2, 3, 4, 5] }
}
)条件渲染 WEBVIEW APP MINA // page.js Page({
data: {
view: '
MINA'
}
}
)用于包裹视图组件的 block如果 wx:for、wx:if 要渲染视图容器，可以用 block 标签包裹，block 标签不是一个组件，只是一个用于包装的元素，不会被渲染，并且只接受 wx:.. 控制属性。
block 和 wx:if：
view1 view2 block 和 wx:for：
{
{
index}
}
: {
{
item}
}
推荐教程：
《微信小程序》以上就是微信小程序页面开发的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
微信小程序本文转载于：
简书，如有侵犯，请联系a@php.cn删除
上一篇：
微信小程序调用图片安全API
下一篇：
微信用户与姓名不匹配是什么意思？相关文章相关视频微信小程序省市联动功能微信小程序中自定义select下拉选项框组件微信小程序必知必会面试题微信小程序转发好友的功能微信小程序页面开发微信小程序事件 以及事件对象微信小程序开发工具的安装初识微信小程序(2) [温州做微信公众号]