精华内容
下载资源
问答
  • WXML语言特性 1.数据绑定 Musstache 语法 获取json中指定键值:变量名加双括号的绑定语法 如下: (1)绑定文本 注意所有组件和属性 都要小写 (2)绑定属性 (3)运算符绑定 标签组件...

    WXML语言特性

     
     
    1.数据绑定
     
    Musstache 语法 获取json中指定键值:变量名加双括号的绑定语法
    如下:
    (1)绑定文本
    注意所有组件和属性 都要小写
    (2)绑定属性
     
     
    (3)运算符绑定
     
    标签组件共同属性
    六种

     

     
     
     
     
     

    转载于:https://www.cnblogs.com/someonelikeyou/p/8934206.html

    展开全文
  • 代码清单2-14 使用 wx:key 示例(WXML) <switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} <button bindtap="switch"> Switch <button bindtap="addToFront"> Add to the front *this" > {{...

     微信小程序官方教程 第二章 2.2.5 列表渲染

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

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

    字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。

    保留关键字 this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

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

    
    
    代码清单2-14 使用 wx:key 示例(WXML)
    
    <switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>
    <button bindtap="switch"> Switch </button>
    <button bindtap="addToFront"> Add to the front </button>
    
    
    <switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
    <button bindtap="addNumberToFront"> Add Number to the front </button>
    代码清单2-15 使用 wx:key 示例(JavaScript)
    
    Page({
      data: {
        objectArray: [
          {id: 5, unique: 'unique_5'},
          {id: 4, unique: 'unique_4'},
          {id: 3, unique: 'unique_3'},
          {id: 2, unique: 'unique_2'},
          {id: 1, unique: 'unique_1'},
          {id: 0, unique: 'unique_0'},
        ],
        numberArray: [1, 2, 3, 4]
      },
      switch: function(e) {
        const length = this.data.objectArray.length
        for (let i = 0; i < length; ++i) {
          const x = Math.floor(Math.random() * length)
          const y = Math.floor(Math.random() * length)
          const temp = this.data.objectArray[x]
          this.data.objectArray[x] = this.data.objectArray[y]
          this.data.objectArray[y] = temp
        }
        this.setData({
          objectArray: this.data.objectArray
        })
      },
      addToFront: function(e) {
        const length = this.data.objectArray.length
        this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
        this.setData({
          objectArray: this.data.objectArray
        })
      },
      addNumberToFront: function(e){
        this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
        this.setData({
          numberArray: this.data.numberArray
        })
      }
    })

    这段介绍的内容主要的含义是,switch开关的选中状态,如何能随switch开关的增加而不断下移。如果不加wx:key="*this"字段,当开关数量或顺序变化时,选中的开关就不是指定的开关,只能停留在当前位置上:

     

    增加wx:key="*this"属性后,开关状态跟随原来打开的开关编号走,状态就跟对应开关号码绑定了:

     

    展开全文
  • -- 显示文本信息,文本信息保存在全局变量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

    2021-01-20 14:01:21
    WXML的概念 wxml (weixin makeup Language)是框架设计中的一套标签语言,可以构建出页面的结构 下面康康它的功能 数据绑定 (也就是wxml与js有关系的,在data内容中) 列表渲染

    WXML的概念

    wxml (weixin makeup Language)是框架设计中的一套标签语言,可以构建出页面的结构
    下面康康它的功能

    数据绑定

    (也就是wxml与js有关系的,在data内容中)
    首先要知道wxml中的动态数据是来自page中的js中的data
    数据绑定使用的是Mustache 语法(用双括号将变量包起来)
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述

    运算

    可以在{{}}内进行简单的运算

    三元运算

    (三元运算符是软件编程中一个固定格式,其语法为 条件表达式 ?表达式1:表达式2要知道的是表达式1是条件表达式为true时,则表达式2为条件表达式为false时
    理解而言的表达式:“()? :”。
    ()中进行二元运算
    ?再运算,就形成三元运算符
    语法为
    其中的flag其实是条件判断的语句

    <view hiden="{{flag ? true : false}}"></view>
    <view>{{flag? true : false}}</view>
    
    逻辑判断
    <view wx:if="{{length > 5}}"> </view>
    
    数据路径运算

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    列表渲染

    wx:for=“{{数组或者对象}}”
    要注意的要点:
    在这里插入图片描述

    wx:for

    在这里插入图片描述
    wx:key=“唯一的值” 用来提高列表渲染的性能
    wx:key的值以两种形式提供
    1、wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是循环数组中的对象的唯一属性(不会出现重复)
    对于上面的例子中,wx:key=“id” 可以看出item.id是唯一属性
    2、wx:key="*this" 就表示你的数组 是一个普通的数组 *this表示的是循环项
    普通数组:例如:[1,2,3,4,5,6] 或者为[“1”,“2”,“3”,“4”,“5”,“6”]
    在这里插入图片描述
    当出现数组的嵌套循环的时候,尤其要注意以下绑定的名称不要重名
    wx:for-item=“item” wx:for-index=“index”
    默认情况下,我们不写
    wx:for-item=“item” wx:for-index=“index”
    小程序也会把循环项的名称和索引的名称默认为item和index
    只有一层循环的话 ( wx:for-item=“item” wx:for-index=“index”)可以省略

    对象循环

    wx:for="{{对象}}" wx:for-item=”对象的值" wx:for-index=“对象的属性”
    循环对象的时候 最好把item和index的名称修改一下
    wx:for-item=“value” wx:for-index=“key”
    在这里插入图片描述

    block

    1、占位符的标签
    2、写代码的时候是存在的,但是页面渲染的时候会把它移除掉

    也就是我们如果写循环的时候,不想再外面写一层格外的标签,则可以用block标签来做个占位符

    条件渲染

    涉及的知识点为微信:wx:if 以及 hidden

    wx:if 以及 hidden

    wx:if主要涉及
    wx:if
    wx:elif
    wx:else
    在这里插入图片描述

    要知道的是hidden它是通过修改样式(也就是display:none)来显示的
    要注意的是display样式不可以和hidden同时使用
    在这里插入图片描述
    在这里插入图片描述

    两者要什么时候使用:

    一般频繁使用的时候用hidden
    不经常使用用wx:if

    展开全文
  • WXML

    千次阅读 2018-05-29 14:31:31
    WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。用以下一些简单的例子来看看 WXML 具有什么能力:数据绑定&lt;!--wxml--&gt; &lt;view&...
  • 小程序标签语言wxml

    千次阅读 2018-10-25 11:35:30
    WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合微信组件、事件系统,可以构建出页面的结构。     数据绑定:     列表渲染:   条件渲染:      模板:      ...
  • 微信小程序之WXMl的学习

    千次阅读 2018-09-17 13:37:04
    WXML的学习包括: WXML语法,WXML数据绑定,属性,...WXML语言特性: 数据绑定: wxml中的动态数据都是来自页面js的Page的data对象,数据绑定是用一个Mustache语法,就是变量名加双括号的语法 也可...
  • WXML语言最终会被转译为宿主端对应的语言,所以WXML语言中使用的标签一定是小程序定义的标签,不能使用自定义的标签,这样才能保持页面的正确转译。(这是对上一篇标签的补充) WXML具有数据绑定、列表渲染、条件...
  • WXML的学习包括: WXML语法,WXML数据绑定,属性,...WXML语言特性: 数据绑定: wxml中的动态数据都是来自页面js的Page的data对象,数据绑定是用一个Mustache语法,就是变量名加双括号的语法 也可以绑定属性 ...
  • WXMLWXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。用以下一些简单的例子来看看 WXML 具有什么能力:数据绑定&lt;!--wxml--&gt; &lt;view&...
  • WXML的详解

    2008-01-27 12:24:08
    WXML 是一种基于Web服务的工作流标志语言 ....
  • 可以使用于文本绑定,wxml中格式如下:&lt;text&gt; {{message}} &lt;/text&gt;js文件如下:Page({ data: { message: '显示一下:社会人,你好' } })显示如下:也可以使用在属性值中:注意事项...
  • WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对...
  • wxml页面执行toFixed函数的时候发现失效,在微信小程序的js页面是生效的,但是我不希望在data中保留这些额外的数据,于是找到了下面这种解决方案wxs脚本语言。 <wxs module="m1"> var numberToFix= ...
  • 文件名不需要写文件后缀,框架会自动去寻找对应位置的.json,.js,.wxml,.wxss四个文件进行处理。 未指定entryPagePath时,数组的第一项代表小程序的初始页面(首页)。 小程序中新增/减少页面,都需要对 pages 数组...
  • 微信——WXML

    千次阅读 2017-02-09 09:09:25
    WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 用以下一些简单的例子来看看WXML具有什么能力: 数据绑定 ? 1 2 3 4 ...
  • 工作397-Wxml

    2021-03-18 10:19:57
    WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 要完整了解 WXML 语法,请参考WXML 语法参考。 用以下一些简单的例子来看看 WXML 具有什么能力: 数据...
  • 以index.wxml为例解析WXML

    千次阅读 2019-06-08 10:38:05
    一个小程序框架页面文件由4个文件组成,其中就包含wxmlwxml和js一样都是必填的。其作用是配置页面结构。 基本语法 <!-- 在此处写注释 --> <标签名 属性名1="属性值1" 属性名2="属性值2" ...> ......
  • 微信小程序WXML

    2018-11-18 14:54:08
    WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 用以下一些简单的例子来看看 WXML 具有什么能力: 数据绑定 &lt;!--wxml--&gt; &lt;...
  • WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 用以下一些简单的例子来看看WXML具有什么能力: 数据绑定 <!--wxml--> <text> {{message}} // ...
  • 页面根元素 WXML简介 标签闭合、敏感性 数据驱动 数据绑定 列表渲染 ...全称:WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言 对比:网页编程采用的是 HTML + CSS + JS 这样的组...
  • 微信小程序----WXML

    2019-08-15 19:43:39
    WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言WXML 文件后缀名是 .wxml,语句在语法上同 HTML 非常相似 标签闭合编译: WXML 要求标签必须是严格闭合的,没有闭合将会导致编译错误。 WXML中...
  • 小程序wxml语法的使用

    2021-02-08 10:48:18
    WXML全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。 WXML 文件后缀名是 .wxml,简单的 WXML 语句在语法上同 HTML 非常相似。不带有...
  • 小程序视图层wxml

    2017-09-21 17:05:57
    视图层 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。(改了个叫法而已) ...WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 WXSS(WeiXin Style Sheet) 用
  • 微信小程序开发的框架——WXML特性

    千次阅读 2018-10-26 22:14:37
    WXML有4个语言特性:1 数据绑定、2 列表渲染、3 条件渲染、4 模板引用 通过WXML特性可以构建复杂页面的内容,如图:    1.WXML数据绑定特性:小程序里通过WXML数据绑定功能,实现数据的更新。    (绑定文本...
  • 网页编程的多种方式中,HTML + CSS + JavaScript 算是... 微信小程序也采用类似的方式,只是 WXML 充当的就是 HTML 的角色,而 WXSS 承担 CSS 的职责。 今天的内容小程序构成的第二篇,介绍 WXML 页面文件和 WXSS...
  • 1.3.1微信小程序 WXML

    千次阅读 2017-04-22 10:56:48
    MINA的视图层由WXML与WXSS编写。 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language)用于描述页面的结构。 WXSS(WeiXin Style Sheet)用于描述页面的样式。 组件(Component)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,021
精华内容 1,608
关键字:

wxml语言