精华内容
下载资源
问答
  • (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可以理解为我们传统页面中的HTML,它是微信为...

    (一) WXML 是什么

    官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构

    在前面我们就已经提过,WXML,就可以理解为我们传统页面中的HTML,它是微信为我们提供的一套标签语言,可以说它就是我们小程序的脸面(虽然没经过CSS装饰前不一定光鲜亮丽),开发中 WXML 页面就作为我们一些逻辑行为的入口,以及效果展示的承载者。

    再大白话一点:你所看到的小程序页面长什么样(不涉及背后做了什么行为,只说表面),就是 WXML(主要) + WXSS (美化) 实现的

    这一篇,我们主要涉及到的是 WXML 中例如数据绑定、或者运算等等,但是学习之前,很显然,我们需要认识几个常见的标签,后面我们会总结一些常用的标签,下面会用到的有:

    还有一些标签,大家去看官网文档就可以了,写的非常清楚,我们这里重点还是说一下关于其中的一些标签语法问题

    官网——WXML语法文档

    https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

    官网——组件文档

    https://developers.weixin.qq.com/miniprogram/dev/component/

    这是text标签1
    这是text标签2

    这是div标签1
    这是div标签2

    看一下效果

    (二) 数据绑定

    虽然还不涉及到什么页面的美化,以及复杂的标签,不过一个极为简单的静态页面现在已经可以构造出来了,归根结底,我们最后都是要进行前后台数据的交互的,而微信小程序就为我们提供了很多很好用的用法,能很快的进行数据的绑定操作

    有一个前提条件,我们先模拟一些数据,我们只需要在页面的 js 文件中的 data对象中定义小程序初始化的数据,例如下面代码,我们随便拿一些常见的数据类型来模拟一下

    Page({
    /**

    • 页面的初始数据
      */
      data: {
      msg: “你好,微信小程序”,
      status: 100,
      isLogin: true,
      person:{
      name: “张三”,
      age: 22,
      profession: “student”
      },
      isChecked: true
      },
      })

    (1) 常见类型普通写法

    如何在 WXML 标签组件中进行数据的绑定其实是非常简单的,微信小程序中通过 {{}} 来解析刚才在 JS 中模拟的变量

    要注意:直接通过 {{}} 解析的变量都是 页面 js 文件中 Page --> data 下的
    A:字符串

    字符串内容直接用两个大括号括住接收就可以了,在上面我们有这样的定义:

    msg: “你好,微信小程序”, 所以直接括住 msg 就可以获取到后面的值了

    {{msg}}

    B:数值

    数值也是一样直接可以获取

    {{status}}

    C:布尔类型

    布尔类型第一个代码是直接打印出其布尔类型 true 或者 false

    {{isLogin}}

    而下面配合 checkbox 就可以实现是否选中的效果

    D:对象

    对象这块如果你直接打印 person 就会输出一个 Object 类型,所以如果想要拿到对象的属性值,一定要指定到具体的属性

    {{person.name}}
    {{person.age}}
    {{person.profession}}

    看一下上述所有的绑定效果

    (2) 组件属性中

    例如我们 view 组件的 id 值前缀是固定的 user- 后面就是用户的序号,这时候就可以通过变量来进行巧妙的解析到属性中了

    注:不要轻易的乱加空格,否则可能会读取失败例如:

    看一下 Wxml 的源码 id 这个属性中已经进行了拼接,这种方式同样还会常用在 class 或者 style 中,配合三元运行能不错的实现一些需求,下面我们会提到

    (三) 运算

    首先我们依旧定义一些数据,三个整数,和两个字符串

    Page({
    data: {
    a: 11,
    b: 22,
    c: 33,
    msg: “姓名”,
    name: “张三”
    },
    })

    (1) 算数运算

    直接在 {{}} 中进行 加减乘除等的运算,直接就可以得到结算的结果,例如:

    {{a + b + c}}
    {{a + b}} + {{c}}

    (2) 字符串运算

    如果是字符串类型的数据,利用 + 进行运算,结果是一个拼接的效果

    {{‘a’ + ‘b’ + ‘c’}}
    {{‘11’ + ‘22’ + ‘33’}}
    {{msg + ‘:’ +name}}

    (3) 逻辑判断

    这个就是常见的 if 判断,例如使用 wx:if 这个属性,那么就只有在后面的表达式为 true 的情况下才会显示文本 a 大于 0

    a 大于 0

    (4) 三元运算

    三元运算的应用场景还是很多的(等式 ? : true情况,false的情况)

    {{11 + 22 === 33 ? true : false}}
    {{11 + 22 === 33 ? ‘正确’ : ‘错误’}}
    {{a + b === c ? ‘等式成立’ : ‘等式不成立’}}

    三元补充:

    通过在属性中解析变量的方式,可以达到根据变量的值,来指定不同的 class名,以显示不同的样式
    http://www.xayxssm.com
    例如我们的 css 样式是这样的,iconfont 是我们共用的,所以直接写在属性中就可以了,而究竟是用 icon-back 还是 icon-remove 就可以通过一个变量来操纵,例如我们下面的 isClick 就是在 js 里 data 中定义的一个 布尔类型的变量

    .iconfont {…}
    .icon-back:before {…}
    .icon-remove:before {…}

    当 isClick 为 true 就执行 class 就是这样的 class=“iconfont icon-remove” 为 false 就是用另一个,我们就可以通过 控制变量值来进行不同的显示

    <icon class=“iconfont {{isClick ? ‘icon-remove’:‘icon-back’}}”

    看一下上述所有运算的执行结果(不含补充的结果)

    (四) 列表循环(列表渲染)
    (1) 模拟数据

    依旧我们给一些模拟数据,一个是 person 这样的对象内部有一些属性,还有一个就是 studentList 学生集合,其中有三个学生的数据

    Page({
    data: {
    person:{
    pid: 1,
    name: “张三”,
    age: 22,
    profession: “student”
    },
    studentList:[{
    sid:1,
    name:“汤姆”,
    gender:“男”
    },{
    sid:2,
    name:“杰克”,
    gender:“男”
    },{
    sid:3,
    name:“玛丽”,
    gender:“女”
    }
    ]
    },
    })

    如果我们接受到了后台的一些集合或者数组等内容,循环遍历是一个非常常用的操作
    (2) 正式使用

    组件(标签)上使用 wx:for 就可以绑定一个数组或集合内容,就可用数组中各项的数据重复渲染该组件

    先举个例子

    {{index}} --- {{item.name}}

    我们分别来解释一下:

    wx:for:数组或者对象
    
    wx:for-item:循环项(数组或集合)的变量名称,同时一般默认为 item
    
    wx:for-index:循环项(数组或集合)的索引(下标),同时一般默认为 index
    
    wx:key:绑定一个唯一的值,可以提高列表渲染的性能,可以简单理解为主键的概念,例如这里我传入了 studentList 中不可能重复的值 sid
        如果你的数组只是一个普通的数组,例如 [11,22,65,23,3,6] 没有所谓唯一的值,就可以使用 wx:key="*this" 即表示你的数组是一个普通的数组,*this 表示的是 item 本身
    

    如果传这个 key 值,会有一个警告弹出

    (3) 嵌套用法的补充说明

    如果你的循环只有一层,那么 wx:for-item="item" wx:for-index="index" 这两个内容实际上是可以省略的,小程序会自动把这两个内容设置为 item 和 index
    
    如果你的循环是一个嵌套的效果,那么切记一定 item 和 index 的值一定不要重复...
    

    嵌套的正确写法

    {{i}} * {{j}} = {{i * j}}

    再举一个例子(遍历对象的所有属性):

    {{key}} --- {{value}}

    看一下执行效果

    (4) 循环(渲染)block标签

    如果我们使用两种不同的组件(标签)看看最终渲染出来的结果有什么区别呢?

    方法一(view 标签)

    {{key}} --- {{value}}
    结果一
    

    pid — 1
    name — 张三
    age — 22
    profession — student

    方法二(block 标签)

    {{key}} --- {{value}}
    结果二
    

    pid — 1 name — 张三 age — 22 profession — studen

    通过控制台中 Wxml 界面,可以看到,只有在 view 组件下遍历内容时才真正的生成了 dom 结构,而直接使用 block 则只是将内容重复写了几次,不会变成真正的dom元素
    (五) 逻辑判断(条件渲染)
    (1) 用法

    这块理解没什么难点,无非就是关于逻辑的几种判断,看一个例子就清楚了

    说明:isLogin 是在 js 中模拟的一个数据,分别赋予 true false 或者其他的 例如 null,会根据逻辑值显示不同的内容

    已经登录,逻辑为 true
    未登录,逻辑为 false
    不确定逻辑

    (2) 补充 hidden

    补充用法(hidden):

    通过上面的 if else 等可以控制组件例如 view 的显示,而有一个属性 hidden 同样可以实现根据逻辑值控制组件的显示

    例如给 hidden 传入一个 false 就会显示出来

    不隐藏

    (3) wx:if 和 hidden 选择哪个

    那么既然一定程度上都可以达到这种效果,我们选择那个呢?

    先来看一下

    ---- 分界线 -----
    if 隐藏
    隐藏

    看一下渲染出来的结构,关于 wx:if 的那块直接就没有渲染出来了,只有 hidden 的那个,由此可以得出:http://www.xcdtec.com

    wx:if 是直接把标签从页面结构中移除掉了
    hidden 是通过添加样式的方式的隐藏,标签结构还在
    

    所以,当标签不总是切换显示的时候,可以考虑先用 wx:if ,标签切换频繁的时候用 hidden

    (六) 模板
    (1) 创建模板

    模板的字面意思就是,一个可以应用在多处,通用的一个版块,如何去用呢?

    使用 name 属性,作为模板的名字。然后在 内定义代码片段

    这是一个 template 模块 {{id}}: {{name}}

    (2) 引入模板

    我们需要在想引用模板的页面中引入模板,WXML 提供两种文件引用方式 import 和 include

    如果没有效果,可以看一下是不是路径写错了,要根据自己定义的来写哦

    这两者的区别就是 import 有作用域的问题,官网这里写的挺清楚,我直接贴一下:

    import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。

    如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。http://www.hmyczz.com
    (3) 调用模板

    使用 is 属性,声明需要的使用的模板,也就是与上面的 name 一致就可以了,然后将模板所需要的 data 传入,如(直接传入):

    <template is=“test1” data="{{id:‘0’, name:‘张三’}}"

    赋值方式还有一种常用的

    它的意思就是将调用这个模板页面中的 student 对象变量赋值给这个模板,三个点就是一个扩展运算符,作用就是将这个student 对象展开

    例如

    Page({
    data: {
    student: {
    id: 0,
    name: ‘张三’,
    }
    }
    })

    结尾

    如果文章中有什么不足,欢迎大家留言交流,感谢朋友们的支持!

    展开全文
  • (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可以理解为我们传统页面中的HTML,它是微信为...

    (一) WXML 是什么

    官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构

    在前面我们就已经提过,WXML,就可以理解为我们传统页面中的HTML,它是微信为我们提供的一套标签语言,可以说它就是我们小程序的脸面(虽然没经过CSS装饰前不一定光鲜亮丽),开发中 WXML 页面就作为我们一些逻辑行为的入口,以及效果展示的承载者。

    再大白话一点:你所看到的小程序页面长什么样(不涉及背后做了什么行为,只说表面),就是 WXML(主要) + WXSS (美化) 实现的

    这一篇,我们主要涉及到的是 WXML 中例如数据绑定、或者运算等等,但是学习之前,很显然,我们需要认识几个常见的标签,后面我们会总结一些常用的标签,下面会用到的有:

    <text></text><view></view> <image></image> 还有一些标签,大家去看官网文档就可以了,写的非常清楚,我们这里重点还是说一下关于其中的一些标签语法问题

    官网——WXML语法文档

    https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

    官网——组件文档

    https://developers.weixin.qq.com/miniprogram/dev/component/

    <!--pages/demo01/demo01.wxml-->
    
    <!-- text 不会换行,可以理解为传统页面中的 span 行内元素-->
    <text>这是text标签1</text>
    <text>这是text标签2</text>
    
    <!-- view 会换行,可以理解为传统页面中的 div 块级元素 -->
    <view>这是div标签1</view>
    <view>这是div标签2</view>
    
    <view>
      <!-- 我博客的图,显示如果出现什么问题,自己替换一下哈 -->
      <image  mode='widthFix' style='width:60%' src='https://www.ideal-20.cn/medias/avatar.jpg'></image>
    </view>
    

    看一下效果

    (二) 数据绑定

    虽然还不涉及到什么页面的美化,以及复杂的标签,不过一个极为简单的静态页面现在已经可以构造出来了,归根结底,我们最后都是要进行前后台数据的交互的,而微信小程序就为我们提供了很多很好用的用法,能很快的进行数据的绑定操作

    有一个前提条件,我们先模拟一些数据,我们只需要在页面的 js 文件中的 data对象中定义小程序初始化的数据,例如下面代码,我们随便拿一些常见的数据类型来模拟一下

    Page({
      /**
       * 页面的初始数据
       */
      data: {
        msg: "你好,微信小程序",
        status: 100,
        isLogin: true,
        person:{
          name: "张三",
          age: 22,
          profession: "student"
        },
        isChecked: true
      },
    })
    

    (1) 常见类型普通写法

    如何在 WXML 标签组件中进行数据的绑定其实是非常简单的,微信小程序中通过 {{}} 来解析刚才在 JS 中模拟的变量

    要注意:直接通过 {{}} 解析的变量都是 页面 js 文件中 Page --> data 下的

    A:字符串

    字符串内容直接用两个大括号括住接收就可以了,在上面我们有这样的定义:

    msg: "你好,微信小程序", 所以直接括住 msg 就可以获取到后面的值了

    <view>{{msg}}</view>
    

    B:数值

    数值也是一样直接可以获取

    <view>{{status}}</view>
    

    C:布尔类型

    布尔类型第一个代码是直接打印出其布尔类型 true 或者 false

    <view>{{isLogin}}</view>
    

    而下面配合 checkbox 就可以实现是否选中的效果

    <view>
        <checkbox checked="{{isChecked}}"></checkbox>
    </view>
    

    D:对象

    对象这块如果你直接打印 person 就会输出一个 Object 类型,所以如果想要拿到对象的属性值,一定要指定到具体的属性

    <view>{{person.name}}</view>
    <view>{{person.age}}</view>
    <view>{{person.profession}}</view>
    

    看一下上述所有的绑定效果

    (2) 组件属性中

    例如我们 view 组件的 id 值前缀是固定的 user- 后面就是用户的序号,这时候就可以通过变量来进行巧妙的解析到属性中了

    注:不要轻易的乱加空格,否则可能会读取失败例如: <view id=" user-{{uid}}"></view>

    <view id="user-{{uid}}"></view>
    

    看一下 Wxml 的源码 id 这个属性中已经进行了拼接,这种方式同样还会常用在 class 或者 style 中,配合三元运行能不错的实现一些需求,下面我们会提到

    (三) 运算

    首先我们依旧定义一些数据,三个整数,和两个字符串

    Page({
      data: {
        a: 11,
        b: 22,
        c: 33,
        msg: "姓名",
        name: "张三"
      },
    })
    

    (1) 算数运算

    直接在 {{}} 中进行 加减乘除等的运算,直接就可以得到结算的结果,例如:

    <view>{{a + b + c}}</view>
    <view>{{a + b}} + {{c}}</view>
    

    (2) 字符串运算

    如果是字符串类型的数据,利用 + 进行运算,结果是一个拼接的效果

    <view>{{'a' + 'b' + 'c'}}</view>
    <view>{{'11' + '22' + '33'}}</view>
    <view>{{msg + ':' +name}}</view>
    

    (3) 逻辑判断

    这个就是常见的 if 判断,例如使用 wx:if 这个属性,那么就只有在后面的表达式为 true 的情况下才会显示文本 a 大于 0

    <view wx:if="{{a > 0}}">a 大于 0</view>
    

    (4) 三元运算

    三元运算的应用场景还是很多的(等式 ? : true情况,false的情况)

    <view>{{11 + 22 === 33 ? true : false}}</view>
    <view>{{11 + 22 === 33 ? '正确' : '错误'}}</view>
    <view>{{a + b === c ? '等式成立' : '等式不成立'}}</view>
    

    三元补充:

    通过在属性中解析变量的方式,可以达到根据变量的值,来指定不同的 class名,以显示不同的样式

    例如我们的 css 样式是这样的,iconfont 是我们共用的,所以直接写在属性中就可以了,而究竟是用 icon-back 还是 icon-remove 就可以通过一个变量来操纵,例如我们下面的 isClick 就是在 js 里 data 中定义的一个 布尔类型的变量

    .iconfont {......}
    .icon-back:before {......}
    .icon-remove:before {......}
    

    当 isClick 为 true 就执行 class 就是这样的 class="iconfont icon-remove" 为 false 就是用另一个,我们就可以通过 控制变量值来进行不同的显示

    <icon class="iconfont {{isClick ? 'icon-remove':'icon-back'}}"
    

    看一下上述所有运算的执行结果(不含补充的结果)

    (四) 列表循环(列表渲染)

    (1) 模拟数据

    依旧我们给一些模拟数据,一个是 person 这样的对象内部有一些属性,还有一个就是 studentList 学生集合,其中有三个学生的数据

    Page({
      data: {
        person:{
          pid: 1,
          name: "张三",
          age: 22,
          profession: "student"
        },
        studentList:[{
            sid:1,
            name:"汤姆",
            gender:"男"
          },{
            sid:2,
            name:"杰克",
            gender:"男"
          },{
            sid:3,
            name:"玛丽",
            gender:"女"
          }
        ]
      },
    })
    

    如果我们接受到了后台的一些集合或者数组等内容,循环遍历是一个非常常用的操作

    (2) 正式使用

    组件(标签)上使用 wx:for 就可以绑定一个数组或集合内容,就可用数组中各项的数据重复渲染该组件

    先举个例子

    <view>
        <view 
        wx:for="{{studentList}}" wx:for-item="item" wx:for-index="index" wx:key="sid">
        	{{index}} --- {{item.name}} 
        </view>
    </view>
    

    我们分别来解释一下:

    • wx:for:数组或者对象

    • wx:for-item:循环项(数组或集合)的变量名称,同时一般默认为 item

    • wx:for-index:循环项(数组或集合)的索引(下标),同时一般默认为 index

    • wx:key:绑定一个唯一的值,可以提高列表渲染的性能,可以简单理解为主键的概念,例如这里我传入了 studentList 中不可能重复的值 sid

      • 如果你的数组只是一个普通的数组,例如 [11,22,65,23,3,6] 没有所谓唯一的值,就可以使用 wx:key="*this" 即表示你的数组是一个普通的数组,*this 表示的是 item 本身

    如果传这个 key 值,会有一个警告弹出

    (3) 嵌套用法的补充说明

    • 如果你的循环只有一层,那么 wx:for-item="item" wx:for-index="index" 这两个内容实际上是可以省略的,小程序会自动把这两个内容设置为 item 和 index

    • 如果你的循环是一个嵌套的效果,那么切记一定 item 和 index 的值一定不要重复…

    嵌套的正确写法

    <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i" wx:key="*this">
      <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j" wx:key="*this">
        <view wx:if="{{i <= j}}" wx:key="*this">
          {{i}} * {{j}} = {{i * j}}
        </view>
      </view>
    </view>
    

    再举一个例子(遍历对象的所有属性):

    <view>
        <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid">
        {{key}} --- {{value}} 
        </view>
    </view>
    

    看一下执行效果

    (4) 循环(渲染)block标签

    如果我们使用两种不同的组件(标签)看看最终渲染出来的结果有什么区别呢?

    方法一(view 标签)

    <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid">
        {{key}} --- {{value}} 
    </view>
    
    • 结果一
    <view> pid --- 1 </view>
    <view> name --- 张三 </view>
    <view> age --- 22 </view>
    <view> profession --- student </view>
    

    方法二(block 标签)

    <block wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid">
        {{key}} --- {{value}} 
    </block>
    
    • 结果二
    pid --- 1 name --- 张三 age --- 22 profession --- studen
    

    通过控制台中 Wxml 界面,可以看到,只有在 view 组件下遍历内容时才真正的生成了 dom 结构,而直接使用 block 则只是将内容重复写了几次,不会变成真正的dom元素

    (五) 逻辑判断(条件渲染)

    (1) 用法

    这块理解没什么难点,无非就是关于逻辑的几种判断,看一个例子就清楚了

    说明:isLogin 是在 js 中模拟的一个数据,分别赋予 true false 或者其他的 例如 null,会根据逻辑值显示不同的内容

    <view wx:if="{{isLogin == true}}">已经登录,逻辑为 true</view>
    <view wx:elif="{{isLogin == false}}">未登录,逻辑为 false</view>
    <view wx:else>不确定逻辑</view>
    

    (2) 补充 hidden

    补充用法(hidden):

    通过上面的 if else 等可以控制组件例如 view 的显示,而有一个属性 hidden 同样可以实现根据逻辑值控制组件的显示

    例如给 hidden 传入一个 false 就会显示出来

    <view hidden="{{false}}">不隐藏</view>
    

    (3) wx:if 和 hidden 选择哪个

    那么既然一定程度上都可以达到这种效果,我们选择那个呢?

    先来看一下

    <view>---- 分界线 -----</view>
    <view wx:if="{{false}}">if 隐藏</view>
    <view hidden="{{true}}">隐藏</view>
    

    看一下渲染出来的结构,关于 wx:if 的那块直接就没有渲染出来了,只有 hidden 的那个,由此可以得出:

    • wx:if 是直接把标签从页面结构中移除掉了
    • hidden 是通过添加样式的方式的隐藏,标签结构还在

    所以,当标签不总是切换显示的时候,可以考虑先用 wx:if ,标签切换频繁的时候用 hidden

    (六) 模板

    (1) 创建模板

    模板的字面意思就是,一个可以应用在多处,通用的一个版块,如何去用呢?

    使用 name 属性,作为模板的名字。然后在 <template/> 内定义代码片段

    <template name="test1">
      <view>
        <text> 这是一个 template 模块 </text>
        <text> {{id}}: {{name}} </text>
      </view>
    </template>
    

    (2) 引入模板

    我们需要在想引用模板的页面中引入模板,WXML 提供两种文件引用方式 importinclude

    如果没有效果,可以看一下是不是路径写错了,要根据自己定义的来写哦

    <import src="../../template/test1/test1" />
    
    <include src="../../template/test1/test1" />
    

    这两者的区别就是 import 有作用域的问题,官网这里写的挺清楚,我直接贴一下:

    import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。

    如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template

    (3) 调用模板

    使用 is 属性,声明需要的使用的模板,也就是与上面的 name 一致就可以了,然后将模板所需要的 data 传入,如(直接传入):

    <template is="test1" data="{{id:'0', name:'张三'}}"</template>
    

    赋值方式还有一种常用的

    它的意思就是将调用这个模板页面中的 student 对象变量赋值给这个模板,三个点就是一个扩展运算符,作用就是将这个student 对象展开

    <template is="test1" data="{{...student}}"></template>
    

    例如

    Page({
      data: {
        student: {
          id: 0,
          name: '张三',
        }
      }
    })
    

    结尾

    如果文章中有什么不足,欢迎大家留言交流,感谢朋友们的支持!

    如果能帮到你的话,那就来关注我吧!如果您更喜欢微信文章的阅读方式,可以关注我的公众号

    在这里的我们素不相识,却都在为了自己的梦而努力 ❤

    一个坚持推送原创开发技术文章的公众号:理想二旬不止

    展开全文
  • WXML

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

    WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。

    用以下一些简单的例子来看看 WXML 具有什么能力:

    数据绑定

    <!--wxml-->
    <view> {{message}} </view>
    // page.js
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })

    列表渲染

    <!--wxml-->
    <view wx:for="{{array}}"> {{item}} </view>
    // page.js
    Page({
      data: {
        array: [1, 2, 3, 4, 5]
      }
    })

    条件渲染

    <!--wxml-->
    <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
    <view wx:elif="{{view == 'APP'}}"> APP </view>
    <view wx:else="{{view == 'MINA'}}"> MINA </view>
    // page.js
    Page({
      data: {
        view: 'MINA'
      }
    })

    模板

    <!--wxml-->
    <template name="staffName">
      <view>
        FirstName: {{firstName}}, LastName: {{lastName}}
      </view>
    </template>
    
    <template is="staffName" data="{{...staffA}}"></template>
    <template is="staffName" data="{{...staffB}}"></template>
    <template is="staffName" data="{{...staffC}}"></template>
    // page.js
    Page({
      data: {
        staffA: {firstName: 'Hulk', lastName: 'Hu'},
        staffB: {firstName: 'Shang', lastName: 'You'},
        staffC: {firstName: 'Gideon', lastName: 'Lin'}
      }
    })

    事件

    <view bindtap="add"> {{count}} </view>
    Page({
      data: {
        count: 1
      },
      add: function(e) {
        this.setData({
          count: this.data.count + 1
        })
      }
    })

    具体的能力以及使用方式在以下章节查看:

    数据绑定列表渲染条件渲染模板事件引用


    展开全文
  • WXML具有什么能力?

    千次阅读 2018-05-10 08:18:05
    WXML(WeiXin Markup Language)框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。一. 数据绑定&lt;!--wxml--&gt; &lt;view&gt; {{message}} &lt;/view&gt; // ...

    WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。

    一. 数据绑定

    <!--wxml-->
    <view> {{message}} </view>
    // page.js
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })

    二. 列表渲染

    <!--wxml-->
    <view wx:for="{{array}}"> {{item}} </view>
    // page.js
    Page({
      data: {
        array: [1, 2, 3, 4, 5]
      }
    })

    三.条件渲染

    !--wxml-->
    <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
    <view wx:elif="{{view == 'APP'}}"> APP </view>
    <view wx:else="{{view == 'MINA'}}"> MINA </view>
    // page.js
    Page({
      data: {
        view: 'MINA'
      }
    })
    四.模板
    <!--wxml-->
    <template name="staffName">
      <view>
        FirstName: {{firstName}}, LastName: {{lastName}}
      </view>
    </template>
    
    <template is="staffName" data="{{...staffA}}"></template>
    <template is="staffName" data="{{...staffB}}"></template>
    <template is="staffName" data="{{...staffC}}"></template>
    // page.js
    Page({
      data: {
        staffA: {firstName: 'Hulk', lastName: 'Hu'},
        staffB: {firstName: 'Shang', lastName: 'You'},
        staffC: {firstName: 'Gideon', lastName: 'Lin'}
      }
    })
    五.事件
    <view bindtap="add"> {{count}} </view>
    Page({
      data: {
        count: 1
      },
      add: function(e) {
        this.setData({
          count: this.data.count + 1
        })
      }
    })





    展开全文
  • 微信——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 具有什么能力: 数据...
  • WXML(WeiXin Markup Language)MINA设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 用以下一些简单的例子来看看WXML具有什么能力: 数据绑定 <!--wxml--> <text> {{message}} // ...
  • 微信小程序WXML

    2018-11-18 14:54:08
    WXML(WeiXin Markup Language)框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 用以下一些简单的例子来看看 WXML 具有什么能力: 数据绑定 &lt;!--wxml--&gt; &lt;...
  • WXML——事件

    2018-06-05 14:21:05
    什么是事件事件视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如 id, dataset, ...
  • WXML---微信开发文档

    2020-05-27 22:48:22
    WXML(WeiXin Markup Language)框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 用以下一些简单的例子来看看 WXML 具有什么能力: 数据绑定 <!--wxml--> <view> {{...
  • WXML(WeiXin Markup Language)框架设计的一套标签语言,结合基础组件、系统事件,可以构建出页面的结构。 WXML可以实现数据绑定、列表渲染、条件渲染、模板、事件、引用。 用以下一些简单的例子来看看WXML具有...
  • class属性决定了它的大小、颜色、长宽高、在页面中的位置等,这些都会在wxss中定义 src顾名思义source,即决定了图像从哪里来,引用什么图像 2.input 例子: class属性如上 placeholder决定的input框里无内容的...
  • WXML(WeiXin Markup Language)框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 用以下一些简单的例子来看看 WXML 具有什么能力: 数据绑定 <!-- text标签写的不会换行。 view...
  • 前几天折腾了下。然后列出一些实验结果,供大家...并且wxml的parser会把标签上的不在白名单上的属性都去掉,class, id, data 这些应该都在白名单内,但是href什么不会有的,所以如果你用传统的html的标签构建页面
  • 什么是Wxml呢?我们首先要介绍一下Html,Html的全称为HyperTextMarkup Language,翻译过来就是超文本标记语言,这种语言目前已经普遍用于前端开发,而wxml正是从html演变而来,它基于微信这个平台,在很多方面变得...
  • (小安娜:好像很厉害的样子,那基础组件、事件系统是什么?感觉更厉害,因为必须结合它们。),基础组件类似HTML中的标签,事件系统是JavaScript中的事件,可处理逻辑反应到界面上;wxml只是一个文件格式,如果没有...
  • WXMLWXML(WeiXin Markup Language)框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。用以下一些简单的例子来看看 WXML 具有什么能力:数据绑定&lt;!--wxml--&gt; &lt;view&...
  • 小程序--配置--CSS--WXML

    2021-06-07 15:02:58
    Sass Less是什么?大家为什么要使用他们? 他们时CSS预处理器。是CSS上的一种抽象层。他们是一种特殊的语法,语言编译成CSS。 json配置文件,小程序设置,如页面注册,页面标题及tabBar; app.js整个小程序的全局...
  • 页面+页面样式:page.wxml +page.wxss 视图层将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层。  框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。  什么是组...
  • (小安娜:好像很厉害的样子,那基础组件、事件系统是什么?感觉更厉害,因为必须结合它们。),基础组件类似HTML中的标签,事件系统是JavaScript中的事件,可处理逻辑反应到界面上;wxml只是一个文件格式,如果没有...
  • 什么会衍生出WXML模板的这个概念呢?难道不是应该每一个.wxml文件对应一个布局文件?确实这个样子的,但是有些页面会存在一些相同的布局,比如首页的时候我就有一个列表,而另外一个页面也有一个列表展示,那这...
  • 同学们大家好,我小伊同学,今天带领大家学习WXML部分一个重要的知识点,数据绑定。 简单来讲,数据绑定就是通过双重花括号将一个变量绑定到界面上。 首先,我们为什么要将变量绑定到页面上呢?因为在制作...
  • 由condition的值来判断输出“当代青年的任务是什么”的答案condition的值在该页面js文件中利用数据绑定赋值,并且用了两个不同的函数。Math.floor函数是将数字往下取整,相当于c++里的float转换成int。Math.random...
  • 什么是事件 事件视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如 id, ...
  • 1.什么是微信小程序 微信手机的app软件 聊天 看视频 看直播 新闻 购物 游戏 。。。 生态圈 小程序寄托在微信app内 2.项目结构 (1)sitemap.json:用来配置小程序及其页面是否允许被微信索引的 ...
  • 什么是事件 事件视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如 id,...
  • 在app.json中新建一个页面却一直提示 “未找到 app.json 中的定义的 pages “pages/join/join” 对应的 WXML 文件”,不知道是什么原因 具体的解决办法:假设你要创建一个pages/index/index,可以先命名为pages/...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 201
精华内容 80
关键字:

wxml页面是什么