小程序入门开发超详解版之WXML

欢迎大家添加月神的微信：18333806737进行专业交流。

开发框架组成介绍

小程序的开发框架是由四大部分组成分别是WXML,WXSS,WXS,Java Script组成。

1.WXML用于描述页面的内容；
2. WXSS描述页面样式；
3. JS用于处理用户逻辑以及数据通信；
4. WXS对WXML能力增强的一种体现，可以把请求到的数据进行一个计算处理，帮助wxml快速构建出页面的结构；

WXML语法

WXML(weixin markup language)

<标签名 属性名="属性名1" 属性名="属性名2" ...>
</标签名>

WXML特性

WXML一共有四个语言特性，分别是数据绑定、列表渲染、条件渲染以及模板引用

数据绑定：

<!--index.wxml-->
<view><text>{{message}}</text>
</view>
---------------------------------------------------
<!--index.js-->
Page
( {data:{message:"Hello,world!"}}
)

2、列表渲染

<!--index.wxml-->
<view><block wx:for="{{items}}"  wx:for-item="{{item}}"  wx:key="index"><view>{{index}}:{{item.name}}</view></block>
</view>
------------------------------------------
<!--index.js-->
Page
({data:{items:[{name:"商品A"}{name:"商品B"}]}}
)

3、条件渲染

<!--index.xwml-->
<view>今天吃什么？<view>
<view wx:if="{{condicition===1}}">当然是吃饺子啦！</view>
<view wx:elif="{{condicition===2}}">可以考虑吃面条！</view>
<view wx:else>米饭把米饭吧</view>
-----------------------------------------------------------
<!--index.js-->
Page
({data:{condicition:Math.floor(Math.random()*3+1)}}
)

4、模板及引用

<!--index.wxml 模板-->
<template name="template"><view><view>收件人：{{name}}</view><view>联系方式：{{phone}}</view><view>地址：{{address}}</view></view>
</template><template is="template" data="{{...item}}" ></template>
--------------------------------------------------------------------
<!--index.js-->
Page
( {data:{item:{name="张三",photo="1212123",address="China"}}}
)

<!--index.wxml 引用-->
<import src="a.wxml"></import>
<template is="a"></template>
<!--a.wxml-->
<view>Hello,world</view>
<template name="a">Hello World!
</template>
注意：引用不可嵌套

<!--index.wxml-->
<include src="a.wxml">
<template is="a"></template>
</include>
------------------------------------
<!--a.wxml-->
<template name="a"><view>This is a.wxml</view>
</template>
<view>hello world</view>
注意：include拷贝除了母版之外的所有内容

小程序开发入门超详解之WXML相关推荐

从零开始：小程序开发环境搭建详解
文章目录人工智能福利文章前言一.了解小程序二.小程序开发环境搭建开发工具开发环境三.小程序开发入门注册开发者账号下载小程序开发工具创建小程序项目开发小程序页面调试和测试小程序 ...
小程序01——微信小程序开发平台下载详解
犹记得当时为了安装微信小程序开发平台费了不少功夫,这里花一点时间粗略介绍一下,日后若有时间再进行补充: 1.进入微信公众平台官网下载 https://mp.weixin.qq.com/ 把鼠标移至小程 ...
微信小程序开发工具安装详解
从事java后端工作的程序员,为了不让自己技术落伍,或多或少应该要了解一点前端技术,特别是时下比较火爆的微信小程序,它有取代手机原生app的趋势. 本人对微信小程序是零基础认识,下面记录一下微信小程序 ...
网格社区志愿者服务小程序开发方案图文详解
志愿者服务小程序有三端:用户端+商家端.管理员端,总管理后台. 一用户端:小程序 1.社区新闻社区发布新闻,用户可以评论.点赞. 2.民情民意发布投诉.建议发布,我要发布,可以发布图文信息. 3 ...
微信小程序开发—小程序开发入门
我参加CSDN博客之星评选啦,感谢大家前往投票支持! 投票地址:http://blog.csdn.net/vote/list.html?keyword=anda0109#search 本篇将为大家详细 ...
《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看目录第1章微信小程序入门第1章第1节 ...
百度提前批-百度智能小程序（面经详解）
文章目录百度提前批-百度智能小程序(面经详解) 1.定位 2.z-index .层叠 3.作用域(scope) 4.单例模式 5.原型链 6.继承(借用构造函数,寄生组合继承,缺点是什么) 7.闭包 ...
小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...

小程序开发入门超详解之WXML