首页 微信小程序 小程序开发 小程序入门开发之了解WXML

小程序入门开发之了解WXML

Apr 11, 2020 am 09:27 AM
小程序

本篇文章给大家详解一下小程序入门开发中的WXML。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

小程序入门开发之了解WXML

开发框架组成介绍

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

1.WXML用于描述页面的内容;

2. WXSS描述页面样式;

3. JS用于处理用户逻辑以及数据通信;

4. WXS对WXML能力增强的一种体现,可以把请求到的数据进行一个计算处理,帮助wxml快速构建出页面的结构;

WXML语法

WXML(weixin markup language)

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

</标签名>

WXML特性

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

1、数据绑定:

&lt;!--index.wxml--&gt;
&lt;view&gt;
  &lt;text&gt;{{message}}&lt;/text&gt;
&lt;/view&gt;
---------------------------------------------------
&lt;!--index.js--&gt;
Page
( 
  {
     data:
          {
            message:&quot;Hello,world!&quot;
          }
  }
)
登录后复制

2、列表渲染

&lt;!--index.wxml--&gt;
&lt;view&gt;
  &lt;block wx:for=&quot;{{items}}&quot;  wx:for-item=&quot;{{item}}&quot;  wx:key=&quot;index&quot;&gt;
    &lt;view&gt;{{index}}:{{item.name}}&lt;/view&gt;
  &lt;/block&gt;
&lt;/view&gt;
------------------------------------------
&lt;!--index.js--&gt;
Page
(
  {
    data:
        {
          items:[
                {name:&quot;商品A&quot;}
                {name:&quot;商品B&quot;}
                ]
        }
  }
)
登录后复制

3、条件渲染

&lt;!--index.xwml--&gt;
&lt;view&gt;今天吃什么?&lt;view&gt;
&lt;view wx:if=&quot;{{condicition===1}}&quot;&gt;当然是吃饺子啦!&lt;/view&gt;
&lt;view wx:elif=&quot;{{condicition===2}}&quot;&gt;可以考虑吃面条!&lt;/view&gt;
&lt;view wx:else&gt;米饭把米饭吧&lt;/view&gt;
-----------------------------------------------------------
&lt;!--index.js--&gt;
Page
(
 {
   data:
       {
       condicition:Math.floor(Math.random()*3+1)
       }
 }
)
登录后复制

4、模板及引用

&lt;!--index.wxml 模板--&gt;
&lt;template name=&quot;template&quot;&gt;
  &lt;view&gt;
    &lt;view&gt;收件人:{{name}}&lt;/view&gt;
    &lt;view&gt;联系方式:{{phone}}&lt;/view&gt;
    &lt;view&gt;地址:{{address}}&lt;/view&gt;
  &lt;/view&gt;
&lt;/template&gt;
&lt;template is=&quot;template&quot; data=&quot;{{...item}}&quot; &gt;&lt;/template&gt;
--------------------------------------------------------------------
&lt;!--index.js--&gt;
Page
( 
  {
    data:
         {
           item:
                {
                  name=&quot;张三&quot;,
                  photo=&quot;1212123&quot;,
                  address=&quot;China&quot;
                }
         }
  }
)
登录后复制
&lt;!--index.wxml 引用--&gt;
&lt;import src=&quot;a.wxml&quot;&gt;&lt;/import&gt;
&lt;template is=&quot;a&quot;&gt;&lt;/template&gt;
&lt;!--a.wxml--&gt;
&lt;view&gt;Hello,world&lt;/view&gt;
&lt;template name=&quot;a&quot;&gt;
  Hello World!
&lt;/template&gt;
登录后复制

注意:引用不可嵌套

&lt;!--index.wxml--&gt;
&lt;include src=&quot;a.wxml&quot;&gt;
&lt;template is=&quot;a&quot;&gt;&lt;/template&gt;
&lt;/include&gt;
------------------------------------
&lt;!--a.wxml--&gt;
&lt;template name=&quot;a&quot;&gt;
  &lt;view&gt;This is a.wxml&lt;/view&gt;
&lt;/template&gt;
&lt;view&gt;hello world&lt;/view&gt;
登录后复制

注意:include拷贝除了母版之外的所有内容

本文转载自:https://blog.csdn.net/yue__shen/article/details/90384729

推荐:《小程序开发教程

以上是小程序入门开发之了解WXML的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

使用Python开发微信小程序 使用Python开发微信小程序 Jun 17, 2023 pm 06:34 PM

使用Python开发微信小程序

小程序能用react吗 小程序能用react吗 Dec 29, 2022 am 11:06 AM

小程序能用react吗

实现微信小程序中的卡片翻转特效 实现微信小程序中的卡片翻转特效 Nov 21, 2023 am 10:55 AM

实现微信小程序中的卡片翻转特效

uniapp如何实现小程序和H5的快速转换 uniapp如何实现小程序和H5的快速转换 Oct 20, 2023 pm 02:12 PM

uniapp如何实现小程序和H5的快速转换

小程序备案怎么操作 小程序备案怎么操作 Sep 13, 2023 pm 04:36 PM

小程序备案怎么操作

支付宝上线'汉字拾光-生僻字”小程序,用于征集、补充生僻字库 支付宝上线'汉字拾光-生僻字”小程序,用于征集、补充生僻字库 Oct 31, 2023 pm 09:25 PM

支付宝上线'汉字拾光-生僻字”小程序,用于征集、补充生僻字库

用Python编写简单的聊天程序教程 用Python编写简单的聊天程序教程 May 08, 2023 pm 06:37 PM

用Python编写简单的聊天程序教程

Java语言中的微信小程序开发介绍 Java语言中的微信小程序开发介绍 Jun 09, 2023 pm 10:40 PM

Java语言中的微信小程序开发介绍

See all articles