精华内容
参与话题
问答
  • 全称:WXML全称是WeiXin Markup Language,是小程序框架设计的标签语言。 WXML文件后缀名是.wxml,语句在语法上同HTMl非常相似 标签闭合编译: wxml要求标签必须是严格闭合的,没有闭合会导致编译错误。 标签写法: ...

    1.根元素page
    每一个页面都具备一个很元素:

    在这里插入图片描述
    全称:WXML全称是WeiXin Markup Language,是小程序框架设计的标签语言。
    WXML文件后缀名是.wxml,语句在语法上同HTMl非常相似
    标签闭合编译:
    wxml要求标签必须是严格闭合的,没有闭合会导致编译错误。
    在这里插入图片描述
    标签写法:
    在这里插入图片描述
    解析结果:
    在这里插入图片描述
    WXML中的属性是大小写敏感:
    在这里插入图片描述
    WXML标签
    (1)标签名不一致
    HTML经常会用到的标签是div、p、span;
    小程序的WXL用的标签是view、button、text等
    WXML属性
    (2)属性不一致
    属性:WXML多出wx:if、wx:for等一些属性及表达式。
    绑定数据案例:
    在这里插入图片描述
    (3)数据驱动案例
    wx:if属性决定是否渲染,注意wx:if后值通过{{}}绑定
    在这里插入图片描述
    添加按钮操作,控制隐藏
    在这里插入图片描述
    在原来基础上新增按钮文本切换
    在这里插入图片描述

    WXML基本标签
    视图容器标签:
    先介绍最基础的一个容器标签;
    功能:基本视图容器,类似于页面开发时的

    标签。
    文本标签

    功能:基本文本信息,类似于标签。
    WXML语法—数据绑定
    WXML 中的动态数据均来自对应 Page 的 data
    (1)文本绑定

    <view>{{message}}</view>
    

    data初始化数据中:message:“初始化数据data”
    渲染结果:<view>初始化数据</view>
    (2)属性绑定(class、id、style等属性动态绑定)

    <view class=“demo-0” id="demId">初始化数据data</view>
    

    data初始化数据中viewIdValue:“demoId”,num:0
    渲染结果:<view class=“demo-0” id="demId">初始化数据data</view>
    (3)算木运算
    WXML的文本插值可以进行算木运算<view>文本内容{{}a+b}</view>
    data初始化数据中:a:2,b:6
    渲染结果:<view>文本内容8</view>
    (4)三目运算

    <view>{{2>3?"one":"two"}}</view>
    

    渲染结果:<view>two</view>
    (5)字符串运算

    <view{{"你好,"+name}}</view>
    

    data初始化数据name:"二蛋"
    渲染结果:<view>你好,二蛋</view>
    WXML语法—列表渲染

    在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
    默认:数组的当前项的下标默认为 index,当前项默认为 item
    案例:用户名单
    在这里插入图片描述
    指定变量名:
    wx:for-item 可以指定数组当前元素的变量名
    wx:for-index 可以指定数组当前下标的变量名
    在这里插入图片描述
    渲染结果:
    在这里插入图片描述
    列表渲染案例:
    9*9乘法表
    在这里插入图片描述
    ata初始化数据
    在这里插入图片描述
    在这里插入图片描述

    <block>标签
    

    如果不想要标签多层嵌套,可以在外层使用
    标签进行嵌套,block不会渲染读取出来
    在这里插入图片描述
    wx:key属性
    wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符。
    如果不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
    wx:key属性
    在这里插入图片描述
    初始化数据data
    在这里插入图片描述
    每个switch按钮都被view嵌套者,如果不想用嵌套语法,可以在外层用block标签
    在这里插入图片描述
    添加操作按钮
    在这里插入图片描述
    添加操作按钮
    在这里插入图片描述
    点击添加按钮后发现,之前给开关1绑定的开属性被新开关取代,没有实时跟踪到自身,所以需要添加key,给每个元素添加身份识别。
    在这里插入图片描述

    展开全文
  • 微信小程序WXML语法介绍

    千次阅读 2019-03-24 19:48:39
    WXML 介绍 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。 打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 ...

    WXML 介绍

    全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。

    打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件。模拟器刷新后,读者可以在编辑器中找到 pages/wxml/index.wxml 文件,

     

    2.2.1 介绍

    WXML 文件后缀名是 .wxml ,打开 pages/wxml/index.wxml 文件,有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式,简单的 WXML语句在语法上同 HTML 非常相似。

     

    不带有任何逻辑功能的 WXML 基本语法如下:

    <!-- 在此处写注释 -->

     

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

     

    除了一些特殊的属性外,其余属性的格式都是key="value" 的方式成对出现

     

    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

     

    带有属性的图片标签

    <image class="userinfo-avatar" src="./image/a.png" ></image>

     

     

    一个完整的 WXML语句由一段开始标签和一段结束标签组成,在标签中可以是内容,也可以是其他的 WXML 语句,这一点上同 HTML 是一致的。有所不同的是,WXML 要求标签必须是严格闭合的,没有闭合将会导致编译错误。

     

     

    2.2.2 数据绑定

    WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。

     

    <!--

    {

      time: (new Date()).toString()

    }

    -->

    <text>当前时间:{{time}}</text>

     

    属性值也可以动态的去改变,有所不同的是,属性值必须被包裹在双引号中,如下:

     

     

    需要注意的是变量名是大小写敏感的,也就是说 {{name}} 和 {{Name}} 是两个不同的变量。

     

     

    还需要注意,没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中,如代码2-10所示。

     

     

    2.2.3 逻辑语法

    通过 {{ 变量名 }} 语法可以使得 WXML 拥有动态渲染的能力,除此外还可以在 {{ }} 内进行简单的逻辑运算和算数运算,字符串的拼接,

    {{ }}中还可以直接放置数字、字符串或者是数组

     

     

    2.2.4 条件逻辑

    WXML 中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:使用 wx:elif 和 wx:else 来添加一个 else 块:

     

    列表渲染(看不懂在讲什么)

    wx:if 是一个控制属性

     

    2.2.5 列表渲染

    在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

     

    使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名:

     

     

     

    类似 block wx:if ,也可以将 wx:for 用在 <block/> 标签上,以渲染一个包含多节点的结构块。例如:

     

     

    如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容, <switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

    wx:key 的值以两种形式提供:

    1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
    2. 保留关键字 this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

    当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

     

     

    2.2.6 模板

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。使用 name 属性,作为模板的名字。然后在 <template/> 内定义代码片段,如:

     

    使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如代码2-17所示。

     

    is可以动态决定具体需要渲染哪个模板,如代码2-18所示。

     

    2.2.7 引用

    WXML 提供两种文件引用方式import和include。

    import 可以在该文件中使用目标文件定义的 template,如:

    在 item.wxml 中定义了一个叫 item的 template :

     

    需要注意的是 import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。

     

    include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置,

     

    2.2.8 共同属性

    所有wxml 标签都支持的属性称之为共同属性,如表所示。

     

     

     

     

     

    展开全文
  • wxml

    2019-09-05 19:38:46
    1.动态属性: <view id="item-{{id}}"></view> Page({ data:{ id : 0 } )} 渲染结果: <view id="item-0"></view> 2.列表渲染: <view wx:for={{forText}}wx:key="index">...vi...

    1.动态属性:

    <view id="item-{{id}}"></view>
    Page({
        data:{
            id : 0
    }
    )}
    渲染结果:
    <view id="item-0"></view>

    2.列表渲染:

    <view wx:for={{forText}}wx:key="index">
      <view>{{index}}---{{item}}</view>
    </view>
    
    Page({
        data:{
            forText:[1,2,3,4,5]
        }
    )}

    默认情况下,数组元素中当前项的下标变量名为index,当前项目值为item,必须要加上wx:key他表示获取到的序号

    • 在渲染时,可能会面临要同时循环多个元素,那么可以使用辅助标签block来循环
      <block wx:for={{forText}}wx:key="index">
          <view>序号:{{index}}</view>
          <view>值:{{item}}</view>
      </block>
      --------------------------------
      Page{
          data:{
              forText:[1,2,3,4,5]
         }
      }

       

    • 修改循环变量名
    • wx:for-index="自定义的序号名" wx:for-item="自定义值"
    •  

    展开全文
  • -- 显示文本信息,文本信息保存在全局变量motto里&lt;view class="usermotto"&gt; &...-- 组件 按钮的使用*.WXML &lt;button class="new-btn" bindtap="n
    1、-- 组件 view & text 显示文本信息,文本信息保存在变量motto里
    <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
    </view>

    在*js里面给变量motto赋值

    *.js
    this.setData({
          motto: 'HelloWord!'
    })

    2、-- 组件 按钮的使用,点击启动函数 newBtnDown(),按钮式样css举例

    *.WXML
    <button class="new-btn"  bindtap="newBtnDown">按钮</button>
    *.js
      newBtnDown() {
        //Zha: 取得今天的日期
        getNowFormatDate()
      },
    *.wxss
    .new-btn{
      position:absolute;
      bottom: 200rpx;
      right: 0rpx;
      width: 80rpx;
      height: 80rpx;
      background: darkorange;
      border-radius: 50%;
      font-size: 48rpx;
      line-height:80rpx;
    }
    3、-- 组件 scroll-view & Block & navigator 的使用,使用wxml:wx: for
    *.mxml
    <!--底部滚动-->
    <scroll-view class="des-scr" scroll-y="true" bindscroll="scroll">
      <!--循环view-->
      <block wx:for="{{desArr}}">
        <navigator url="../NoteEdit/NoteEdit?des={{item.des}}&time={{item.time}}&image={{image}}&id={{item.id}}&revise=1">
          <view class="des-view"  bindtap="toiletDetails" id="{{index}}">
            <text class="des-text">{{item.des}}</text>
            <text class="des-tiemText">{{item.time}}</text>
          </view>
        </navigator>
      </block>
    </scroll-view>
    *.wxss
    .des-scr{
      width: 100%;
      height: 100%;
    }
    .des-view{
      margin: 5%;
      width: 90%;
      height: 180rpx;
      border:1px solid orange;
    }
    .des-text{
        display: block;
        margin:20rpx;
        height: 80rpx;
        overflow: hidden;
    }
    .des-tiemText{
      display: block;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      height: 40rpx;
      text-align: right;
    }
    实现效果:

    //*mxml用到 wx:for=“{{desArr}}” 循环体是 {{desArr}}, 这是一个数组,wx:for自动从数组中逐一提取每一个变量 {{item}} 
    //*mxml用到<navigator url=""> 这是一个超级连接组件,它包括的范围里的组件被点击,则跳转到目的页面(定义在Url)
    //*mxml用到页面之间传递参数
    url=".../NoteEdit/NoteEdit?des={{item.des}}&time={{item.time}}" 
    // ?表示后面是传递的参数,des是目的页面里定义好的变量,{{}}里是传递过去的值,&连接符合,连接多个传递过去的参数
    //*js里用到了mxs函数 desArr: wx.getStorageSync('oldText')
    详细介绍,请见: wx: getStorageSync(string)

    //

    *.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        today: '',//当天日期
        image: '/pages/image/111.jpg',//背景图片
        desArr: []//数据源数组
      },
     
      onLoad: function (options) {
        //-监听页面加载
        //获取缓存内容
        this.setData({
          desArr: wx.getStorageSync('oldText')
        })
        if (this.data.desArr == null && this.data.desArr == '') {
          //如果没有缓存则为空
          this.setData({
            desArr: []
          })
        }
        //获取当天日期
        var day = this.getNowFormatDate()
        this.setData({
          today: day
        })
      },

    //用惯了C语言的老程序,比如我,肯定会困惑:这个desArr到底是什么变量?是什么类型的变量?从代码看,似乎它下面还有分变量:item.des, item.time, item.id. 我仔细研究后发现,它只有这3个分变量。那么这3个分变量哪里来的呢?我研究了 NoteEdit.js发现里面有这样的语句:oldText[i] = { 'des': this.data.textAreaDes, time: dic.time, 'id': dic.id }; 我就明白了,不同于C语言,变量必须先声明类型才能使用,现代的很多语言是“只需要声明x是变量” 然后你随便给x赋值,赋值整数它就是整数变量,赋值浮点数它就是浮点数变量,赋值字符串它就是字符串变量。微信小程序也是这样,我们只知道“oldText”这个数组变量存储在本地(用wx.setStorageSync('oldText', oldText); var oldText = wx.getStorageSync('oldText'); 存贮和读取此变量,这个变量其实就是“结构体数组”,此结构体由3部分组成:1、字符串 2、时间 3、id。数组大小完全是动态的。

    4、-- 文本输入框的实现, 用到 view & textarea

    *.wxml
    <!--输入框-->
    <view class="the-view">
      <textarea class= "the-textarea"  bindinput="bindTextAreaBlur" style="  margin: 5%;width: 90%;height: 90%" auto-focus value="{{des}}"maxlength="-1" cursor-spacing="0">
      </textarea>
    </view>

    //view 创建一个视口,textarea 是一个可以接受输入的空间:输入的动作要调用函数 bindinput="bindTextAreaBlur",此函数在*.js里有定义bindTextAreaBlur 主要功能就是把输入的值赋给变量textAreaDes, this.setData({textAreaDes: e.detail.value})--

    *.wxss
    .the-view{
      position:absolute;
      top: 7%;
      width: 100%;
      height: 86%;
    }
    .the-textarea{
      overflow:hidden;
    }

    //JS

    *.js 
     bindTextAreaBlur(e) {
        //当输入的文字改变走这个方法
        //记录输入的文字   
        this.setData({
          textAreaDes: e.detail.value
        })
      },

    5、-- 滑块视图容器, 用到swiper

    *.wxml
    <swiper indicator-dots="{{indicatorDots}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
      </block>
    </swiper>

    //*.js

    *.js
    Page({
      data: {
        imgUrls: [
          'https://www.tuozhirobot.com/_image/FirstImage.jpg',
          'https://www.tuozhirobot.com/_image/DataManager.jpg',
          'https://www.tuozhirobot.com/_image/News_1.jpg'
        ],
        indicatorDots: false,
        autoplay: false,
        interval: 5000,
        duration: 1000
      } })
    //后续,待更新。

    展开全文
  • Wxml,事件等

    2019-11-21 09:36:44
    App App只能声明在app.js中 onLaunch(){} //监听小程序的初始化 getApp()去获取全局唯一的app实例 通过getApp()获取实例...WXML Mustache语法 :{{ }} 公共属性:id,class,style,hidden,data-*,bind*/catch* ...
  • WXML

    万次阅读 2018-04-21 18:03:28
    在小程序中,WXML充当的就是类似HTML的角色。标签名字与HTML有点不同,小程序WXML用的标签是view,button,text等等,这些标签就是小程序给开发者包装好的基本能力,还提供了地图、视频、音频等等组件能力。小程序...
  • 今天来讲解下循环输出元素 : 然后我们自己尝试构建一个for循环输出的小程序 app.js以及app.json app.wxss页面的构造就不放出来了,不会的童鞋可以看博主的第一个小程序文章 初步构造完成如下: ... ...
  • 微信小程序WXMl的学习

    千次阅读 2018-09-17 13:37:04
    我们需要注意wxml的标签必须是完全闭合的,大写敏感 WXML语言特性: 数据绑定: wxml中的动态数据都是来自页面js的Page的data对象,数据绑定是用一个Mustache语法,就是变量名加双括号的语法 也可....
  • 页面根元素 WXML简介 标签闭合、敏感性 数据驱动 数据绑定 列表渲染 ...全称:WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言 对比:网页编程采用的是 HTML + CSS + JS 这样的组...
  • 小程序WXML之条件渲染

    万次阅读 2016-10-14 16:55:24
    wx:if 在MINA中,用来判断是否需要渲染该代码块,这个和java、C中if条件判断是一样的,语法格式: wx:if="{{condition}}",双...1.test.wxml文件 2.test.js文件 3.运行结果 大家可以去更换条件表达式的
  • 微信小程序WXML

    千次阅读 2018-04-08 11:29:32
    原文地址:WXML 一、说明 二、数据绑定 2.1 简单绑定 2.2 在 {{}} 内进行简单的运算 2.3 组合 三、列表渲染 3.1 wx:for 3.2 block wx:for 3.3 wx:key 四、条件渲染 4.1 wx:if 4.2 block wx:if 4.3 wx:if vs ...
  • (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,...再大白话一点:你所看到的小程序页面长什么样(不涉及背后做了什么行为,只说表面),就是 WXML(主
  • 今天系统的记录一下wxml的数据绑定功能。 首先给出wxss样式文件 /* pages/wxml/wxml.wxss */ .wxml-container{ padding: 0 20rpx ; align-items: center; } .topic-group{ background: pink; width: 100%; ...
  • (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,...再大白话一点:你所看到的小程序页面长什么样(不涉及背后做了什么行为,只说表面),就是 WXML(.
  • 页面根元素 根元素page 每一个页面都具备一个根元素:<...WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言 对比: 网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是...
  • 学习微信小程序WXML之条件渲染

    千次阅读 2018-04-16 21:18:42
    此贴为学习9 小时搞定微信小程序开发 的笔记 文档:条件渲染 · 小程序 这是一个解决今天吃什么这一大难题的一小段代码。 &lt;!--index.wxml --&gt; &lt;view&gt;今天吃什么?&lt;/view&...
  • 我是个入门小程序的新手,最近遇到了一点疑惑,请各路大神解答一下,十分感谢。 xxx.wxml <!--pages/analys/analys.wxml--> <view class="contain_title">垃圾桶实时剩余容量 </view> <text>...
  • 小程序WXML之数据绑定

    千次阅读 2016-10-13 11:16:41
    简单的说就是微信团队自己设计出来一种xml标签语言,在小程序中扩展名为*.wxml,主要有数据绑定、列表渲染、条件渲染、模板、事件、引用功能。 数据绑定 语法结构:数据绑定使用"Mustache"语法(双大括号)将变量包...
  • 背景:我们有时候需要在wxml中使用一些运算,包括但不限于四则运算、...目前小程序增加了直播功能,为了在直播列表中加上开播倒计时提醒,我在wxml中简单使用了wxs实现,具体代码如下: wxml代码如下: <wxs ...
  • WXML动态模板语法详解 对于WXML的动态语法,简单的分类为: 数据绑定 条件渲染 列表渲染 事件处理 数据绑定 基础数据绑定 组件值数属性绑定:插值表达式的信息可以插入到属性中 插值表达式内部支持计算 对象操作...
  • (2)WXML简介 (3)标签闭合、敏感性 (4)数据驱动 (5)数据绑定{{}}—{{}} (6)列表渲染v-for----wx:for 页面根元素 根元素page 每一个页面都具备一个根元素: 页面根元素可以在控制台的WXML选项卡中看到 允许...
  • 小程序——wxml属性

    千次阅读 2018-05-17 00:01:16
    Js后台代码 Page({ ... * 页面的初始数据 */ data: { Message:"Hello World", id:0, condition:true, flag:false, a:1, b:2, c:3, d:4, object:{ key:"KeyWord"...
  • 小程序开发--WXML

    2018-09-22 23:45:37
    WXML 一、 定义: WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 二、 语法 &lt;标签 属性key=“属性Value”&gt;&lt;/标签&gt; 三、...
  • 在微信小程序的视图层(wxml)文件中可以使用条件判断,动态的显示一个组件或者执行另外的渲染试图。使用wx:if="{{condition}}" 来判断是否需要渲染该代码块,也可以用 wx:elif 和 wx:else 来添加一个 ...
  • 小程序生命周期 实例一: include方式引用header.wxml文件文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用。微信小程序里面,是包含...
  • 1.3.1微信小程序 WXML

    千次阅读 2017-04-22 10:56:48
    MINA的视图层由WXML与WXSS编写。 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language)用于描述页面的结构。 WXSS(WeiXin Style Sheet)用于描述页面的样式。 组件(Component)...
  • WXML 中的动态数据均来自对应 Page 的 data。数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于: 内容:<view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } }...
  • 微信小程序文档里看不到的小Tips 前几天折腾了下。然后列出一些实验结果,供大家参考。...0. 使用开发工具模拟的和真机差异还是比较大的。...1.1 小程序WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的。
  • 微信小程序WXML模板文件二) 循环指令key属性补充 Vue和React框架用遍历指令时的key值不建议用index (1)key值在没有删除插入操作时只要是唯一值也无所谓,即此时为index索引也可以 (2)如果有删除或者插入的...
  • 一、js插件下载 ... 下载源文件后放到代码包里面 上代码,样式可自己编辑 <view id="PosterPage"> <view class="share__canvas share__canvas1">...image class="share__canvas1-image draw_canvas" d.

空空如也

1 2 3 4 5 ... 20
收藏数 35,633
精华内容 14,253
关键字:

wxml