精华内容
下载资源
问答
  • 主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了微信小程序 WXML、WXSS 和JS介绍及详解的相关资料,需要的朋友可以参考下
  • 微信小程序wxml文件批量转html Install yarn add wxml-to-html # Or npm install wxml-to-html Usage Transform before example/ ├── pages/ │ ├── detail/ │ │ └── detail.wxml/ │ └──index.wxml ...
  • 微信小程序wxml中的应用 WXML 提供两种文件引用方式import和include。 01 import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的template: 代码: template ...

    微信小程序wxml中的应用


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

    01 import

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

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

    <!-- 这是item.wxml文件 -->
    <template name="item">
      <view>用户名:{{name}}</view>
    </template>
    <!--pages/test/test.wxml-->
    <!-- 引用  -->
    <import src="item.wxml"/>
    <template is="item" data="{{name:'tyl'}}"></template>

    运行结果:
    这里写图片描述
    注意:
    import 的作用域

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

    02 include

    include 可以将目标文件除了 外的整个代码引入,相当于是拷贝到 include 位置,如:
    代码:

    <!-- 这是header.wxml -->
    <view>我是header</view>
    <!-- 我是footer -->
    <view>我是footer</view>
    <!--pages/test/test.wxml-->
    <!-- 引用  -->
    <include src="header.wxml" />
    <view>我是body</view>
    <include src="footer.wxml" />

    运行结果:
    这里写图片描述


    -END-

    展开全文
  • 小程序里面直接在页面渲染文件wxml里进行格式化。在wxml做计算可参考
  • 小程序wxml管道

    2020-04-17 11:50:47
    管道就是数据的转变,例如某个选项的value是A,对应文本显示为车票预订,如何在wxml页面上将A转化为车票预订? 一、新建wxs文件 function cgAnpai(str) { if(!str||str.length==0){ return ''; } return str....

    用过Angular的都知道管道的概念。

    管道就是数据的转变,例如某个选项的value是A,对应文本显示为车票预订,如何在wxml页面上将A转化为车票预订?

    一、新建wxs文件

    function cgAnpai(str) {
      if(!str||str.length==0){
        return '';
      }
      return str.replace('A', '车票预订').replace('B', '机票预订').replace('C', '已购票').replace('D', '自驾');
    }
    module.exports.cgAnpai = cgAnpai;

    二、引入wxs

    在需要使用管道的wxml头部引入wxs文件

    <wxs src="../../utils/changetxt.wxs" module="tools" />

    src里填文件路径

    三、使用

    在wxml里使用

    {{tools.cgAnpai(item.traffic_type.value)}}

     

    展开全文
  • 页面根元素 WXML简介 标签闭合、敏感性 数据驱动 数据绑定 列表渲染 ...全称:WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言 对比:网页编程采用的是 HTML + CSS + JS 这样的组...

    页面根元素
    WXML简介
    标签闭合、敏感性
    数据驱动
    数据绑定
    列表渲染

    页面根元素
    根元素page
    每一个页面都具备一个根元素:page
    页面根元素可以在控制台的WXML选项卡中看到
    允许在wxss文件中对page根元素进行样式设置
    在这里插入图片描述
    全称:WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言
    对比:网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。
    同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。

    WXML标签
    WXML 文件后缀名是 .wxml,语句在语法上同 HTML 非常相似
    标签:一个完整的 WXML语句由一段开始标签和一段结束标签组成,在标签中可以是内容,也可以是其他的 WXML 语句,这一点上同 HTML 是一致的

    标签闭合编译:
    WXML 要求标签必须是严格闭合的,没有闭合将会导致编译错误。
    在这里插入图片描述
    在这里插入图片描述
    标签写法:
    单标签双标签等
    单标签和双标签的解析结果一样
    在这里插入图片描述
    WXML中的属性是大小写敏感
    在这里插入图片描述
    在这里插入图片描述
    WXML和 HTML 非常相似,WXML 由标签、属性等等构成。但是也有很多不一样的地方,下面来一一阐述一下:
    (1)标签名不一致
    HTML 经常会用到的标签是 div, p, span,开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件,例如弹窗等等。既然都需要这些组件,那干脆把这些常用组件包装起来,大大提高开发效率。
    小程序的 WXML 用的标签是 view, button, text 等等,这些标签就是小程序给开发者包装好的,此外还提供了地图、视频、音频等等组件。
    比如:map标签
    在这里插入图片描述
    在这里插入图片描述
    (2)属性不一致
    属性:WXML多出wx:if、wx:for等一些属性及表达式
    在网页的一般开发流程中,通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树),以引起界面的一些变化响应用户的行为。
    MVVM模式:用户点击某个按钮的时候,可以通过JS操作DOM。当项目越来越大的时候,代码会充斥着非常多的界面交互逻辑,这显然不是一个很好的开发模式,因此就有了 MVVM 开发模式(例如 React, Vue),提倡把渲染和逻辑分离。
    MVVM模式:简单来说就是不要再让 JS 直接操控 DOM,JS 只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
    小程序的框架也是用到了这个思路,例如数据绑定案例。
    数据data初始化:
    ①页面需要显示动态数据必须要定义到data对应的变量中;
    ②如果该数据在操作过程中发生变化,需要将新数据重新绑定到该变量中,语法为this.setData({属性名:属性值})
    ③获取data数据语法为this.data.属性名

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

    标签

    文本标签<text
    text
    功能:基本文本信息,类似于span标签

    WXML属性
    数据绑定案例
    home.wxml
    在这里插入图片描述
    在这里插入图片描述
    home.js
    在这里插入图片描述
    在这里插入图片描述
    数据驱动案例
    wx:if属性决定是否渲染,注意wx:if后值通过{{}}绑定
    在这里插入图片描述
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    添加按钮操作,控制显隐
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    此时便可以通过按钮控制显隐

    在原来基础上新增按钮文本切换
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    WXML属性
    数据绑定:
    通过Mustache 即双大括号{{}}语法把变量绑定到界面上,称为数据绑定。

    属性:
    仅仅通过数据绑定还不够完整描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达

    WXML语法—数据绑定
    WXML 中的动态数据均来自对应 Page 的 data
    (1)文本绑定

    (2)属性绑定(class、id、style等属性动态绑定)
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (2)属性绑定(class、id、style等属性动态绑定)
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (3)算术运算
    WXML的文本插值可以进行算术运算
    在这里插入图片描述
    data数据初始化中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (4)三目运算/三元运算
    在这里插入图片描述
    data数据初始化中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    (5)字符串运算
    在这里插入图片描述
    data数据初始化中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述

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

    案例:用户名单
    在这里插入图片描述
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    指定变量名
    wx:for-item 可以指定数组当前元素的变量名
    wx:for-index 可以指定数组当前下标的变量名

    列表渲染案例
    9*9乘法表
    在这里插入图片描述
    在这里插入图片描述
    block标签
    如果不想要标签多层嵌套,可以在外层使用
    block标签进行嵌套,block不会渲染读取出来
    在这里插入图片描述
    data数据初始化中
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    wx:key属性
    wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符
    注意:
    如果不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
    当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

    结合switch开关按钮,体会下wx:key的作用
    在这里插入图片描述

    data数据初始化
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    在这里插入图片描述
    wx:key属性
    此时,每个switch按钮都被view嵌套者,如果不想用嵌套语法,可以在外层用block标签
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    在这里插入图片描述
    wx:key属性
    添加操作按钮
    在这里插入图片描述
    在这里插入图片描述
    注意:小程序无法不支持数组push和unshift等语法。这里用concat达到数组开头添加元素的效果

    wx:key属性
    添加操作按钮
    在这里插入图片描述
    点击添加按钮
    在这里插入图片描述
    点击添加按钮后发现,之前给开关1绑定的开属性被新开关取代,没有实时跟踪到自身,所以需要添加key,给每个元素添加身份识别。
    在这里插入图片描述
    渲染结果
    在这里插入图片描述
    以上是 微信小程序WXML模板文件

    展开全文
  • 微信小程序wxml标签

    2020-07-14 09:04:42
    一、视图容器(View Container) 标签名 说明 view 视图容器 scroll-view 可滚动视图容器 swiper 可滑动的视频容器 二、基础内容(Basic Content) 标签名 说明 ... checkbox

    一、视图容器(View Container)

    标签名 说明
    view 视图容器
    scroll-view 可滚动视图容器
    swiper 可滑动的视频容器

    二、基础内容(Basic Content)

    标签名 说明
    icon 图标
    text 文字
    progress 进度条

    三、表单组件(From)

    标签名 说明
    button 按钮
    form 表单
    input 输入框
    checkbox 多项选择器
    radio 单项选择器
    picker 列表选择器
    slider 滑动选择器
    switch 开关选择器
    label 标签

    四、操作反馈组件(Interaction)

    标签名 说明
    action-sheet 上拉菜单
    modal 模态弹框
    progress 进度条
    toast 短通知

    五、导航(Navigation)

    标签名 说明
    navigator 应用内跳转

    六、多媒体(Media)

    标签名 说明
    audio 音频
    image 图片
    video 视频

    七、地图(Map)

    标签名 说明
    map 地图

    八、画布(Canvas)

    标签名 说明
    canvas 画布

     

     

    展开全文
  • 我是个入门小程序的新手,最近遇到了一点疑惑,请各路大神解答一下,十分感谢。 xxx.wxml 垃圾桶实时剩余容量 {{list.recy_left}} 可回收垃圾 有害垃圾 干垃圾 湿垃圾 在这个代码中,第三行可以取出来值,但是...
  • 微信小程序WXML语法介绍

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

    万次阅读 多人点赞 2017-04-18 14:30:29
    微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式。 一、wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件...
  • 小程序wxml语法的使用

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

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

    2019-11-14 14:39:03
    条件判断:wx:if的使用 wx:elif/wx:else的使用: 或者: wx:for的使用: 上面的item是自动生成的。 index是索引值: ......
  • 微信小程序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引用

    千次阅读 2018-11-15 15:42:38
    在微信小程序文档中有个视图层下面是wxml 有个引入,之前引入就讲了一个import,今天看到官网还有一种方式就是include这个和我们android中引入布局是一样的, WXML 提供两种文件引用方式import和include   import ...
  • 使用微信小程序wxml中想进一步对数据或者展示的内容做处理,这时候除了三元运算符之外想使用函数,只能使用wxs了。具体文档 创建一个wxs文件: var bar = function (d) { return d; } var strHandle = ...
  • 微信小程序wxml传值给js

    千次阅读 2020-08-06 19:56:32
    比较常用的是wxml文件中调用js里的数据,那么js文件该怎么调用到wxml文件里的数据呢? //wxml <block wx:for="{{cool}}" wx:key> <view class="xy" bindtap="go" data-index="{{index}}"> </...
  • 小程序wxml缩进快捷键

    千次阅读 2018-07-17 15:09:55
    不知就我一个是这样的,还是都是这样,反正我在开发小程序编写wxml的时候没有自动缩进,就像这样: 所以每次我都是边敲边调整好格式,但总是不经意间弄乱,总之很难受啊。但网上又没相关内容,应该是太低级了吧?...
  • 步骤一: 在utils文件夹里添加名为filter.wxs的文件(命名可以随便)... } module.exports = { formatDate: formatDate } 步骤二: test.wxml里引入 步骤三: 需要转换的地方,写上 {{filters.formatDate(item.date)}}
  • 微信小程序wxml与js数据绑定

    千次阅读 2020-06-23 00:29:59
    页面目录如下: 我们想在Hello Wrold下面显示 性别:男 名称:璐菲 QQ:1104775852 最直接的是在index.wxml中放三个view组件 <view>性别:男</view>...此外微信小程序中还支持wx : if =
  • 微信小程序 WXML提供import和include两种引用方式的使用,以及WXSS的导入的使用 wxss引用 wxml引用 一、学习 最近在学习微信小程序,遇到文件的引用问题,记下来。 二、WXML引用 1、WXML引用方式 import include 2、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,128
精华内容 16,851
关键字:

小程序wxml