精华内容
下载资源
问答
  • 微信小程序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引用介绍

    2018-10-26 17:44:04
    WXML 提供两种文件引用方式import和include。   import import在该文件中使用目标文件定义的template中如: ...在 item.wxml 中定义了一个叫item的template: ...在 index.wxml 中引用了 item.wxml,就可以使用ite...

    文章来自:源码在线https://www.shengli.me/wxxcx/122.html

    WXML 提供两种文件引用方式importinclude

     

    import

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

    在 item.wxml 中定义了一个叫itemtemplate

     

    在 index.wxml 中引用了 item.wxml,就可以使用item模板:

     

    include

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

     

     

    展开全文
  • 主要介绍了微信小程序 WXML、WXSS 和JS介绍及详解的相关资料,需要的朋友可以参考下
  • 这篇文章主要介绍了微信小程序 WXML、WXSS 和JS介绍及详解的相关资料,需要的朋友可以参考下前几天折腾了下。然后列出一些实验结果,供大家参考。使用开发工具模拟的和真机差异还是比较大的。也建议大家还是真机调试...

    这篇文章主要介绍了微信小程序 WXML、WXSS 和JS介绍及详解的相关资料,需要的朋友可以参考下

    前几天折腾了下。然后列出一些实验结果,供大家参考。

    使用开发工具模拟的和真机差异还是比较大的。也建议大家还是真机调试比较靠谱。

    1. WXML(HTML)

    1.1 小程序的WXML没有HTML的宽容度那么高,单标签必需是 /> 结尾的。不然会报错。

    1.2 官方推荐使用的基础标签是块标签,给了作为文本标签,但是使用其他标签比如p也是可以使用的,并且都是inline标签。并且wxml的parser会把标签上的不在白名单上的属性都去掉,class, id, data 这些应该都在白名单内,但是href什么的是不会有的,所以如果你用传统的html的标签构建页面理论上也是可行的,不过这些都是inline标签,需要自行设定display。

    1.3 scroll-view 的scroll-top, scroll-left 是可以修改scroll-view的滚动位置的。但是用户自己滚动了之后小程序并不会去改变 scroll-top, scroll-left 的赋值(并不是双向同步的)。如果这时使用setData去修改的话,scroll-top, scroll-left 的赋值和上一次的值相同,小程序是不会运用这个修改的,所以表现就是设置没有生效。这时只能先设置一个其他值,再设置回去(这里还可以体现setData方法是同步的)。scroll-view 获取scroll位置,只能通过bindscroll的回调函数获取,所以需要取scroll位置的请自行预存好。scroll-view 还是有webview的 scroll 的臭毛病,在居顶位置如果第一个动作是向下滚动的,会导致之后手怎么滑都滚不动,设置scroll-top 不为0,设个1就好了。

    1.4 input 目前只支持文字居左,其他都是不行的(模拟器可以)。如果你做表单,建议把input等表单元素都放在form中,from触发submit时会返回内部所有表单元素的name-value。不然只能绑定所有表单元素的 change 事情来获取,甚是麻烦。

    1.5 只有 checkbox-group 有 change 事件,单个的checkbox是没有的,如果你只有一个checkbox, 觉得外面套一个checkbox-group麻烦又不美观的话,可以用 switch type="checkbox" 代替。(微信小程序应用号交流群 563752274)

    1.6 map 组建目前直接在app第一个页面加载会出现加载失败。需要在onLoad之后再加在。可以先wx:if="false" 然后onLoad的之后改成 true 就行了。

    1.7 map, canvas 像是在webview上面盖一个native组件的感觉。它们是没法被overflow 以及 上面盖元素的,你可以认为z-index写多高都没法在他上面。所以不建议在页面上做弹层和蒙层。canvas 无法放在scroll-view中滚动会定位在初始位置,如果你给canvas设置背景颜色的话,你会发现背景色块跟着滚了,图没滚。

    2. WXSS(CSS)

    2.1 WXSS 和 CSS很像,基本所有的CSS都支持,小程序还提供了 rpx 这个单位。一屏幕宽是750rpx。推荐使用这个来作为布局。不过有一些细小的差别我下面会列出

    2.2 WXSS不支持 大括号嵌套({{}} )。所以key-frames,CSS animation 就不可用了,不过transition 是可用的。

    2.3 目前测试引入字体也是不可用的,前面WXML中提到的内容看SVG也是没法使用的。所以icon目前只能用图的方式做了。

    2.4 WXSS中是不能引入本地资源的, 只能使用线上资源(模拟器是可以,但是别信),可以使用base64。(微信小程序应用号交流群 563752274)

    2.5 WXSS的 rule 是不支持集联的。所以不能 body .main {background:#000;} 这么写。所以写起来还是比较费劲的。每个class都得很长,不然怕重名。不过支持 li.current {color: red;} 这样的写法,支持after, before伪类,但是不支持 first-child last-child nth-child 这类伪类。

    2.6 app.wxss 和每个 page 的wxss 的覆盖关系是: 如果有同名 rule 的话,page 会覆盖 app 的,不是merge是覆盖。

    3. JS

    3.1 JS 的运行环境和view的运行环境是隔离的。JS只能通过事件获取时机和setData方法修改数据来改变view。

    3.2 JS 目前有个很大的问题是无法获取到页面px级的宽度高度, 所有事件回调的单位都是px级的而不是rpx的,但是又不知道当前rpx,px的转换关系。比如过你用canvas画图。你都不知道边界在哪里,这个很蛋疼。

    3.3 上面有说过 setData方法如果上一个值和下一个值相同时,是不会触发view修改的(见1.3)

    3.4 使用 navigate 跳转的时候可以使用queryString的方式跟在相对地址上,onLoad事件会在入参中传入(会转化成object),但是 navigate back的时候没有一个官方给出的数据通讯机制。可以使用getApp() 获取到全局对象,给上面加点东西,自行实现。navigate 最多5个什么的就不说了。

    3.5 canvas getActions被调用之后,actions是会被清空的。即连续调用两次getActions,第二次是空数组。

    3.6 开发者工具是nw写的,我就看了看裙底的源码,开发者工具中WXML确实是有parser再拼装的过程的。但是并不能说明小工具是native的,从css的支持力度到webview的一些bug相似度来看,我还是觉得像webview,但是组件比如map,canvas什么的用的是原生view,然后盖在webview上的感觉。但是不管怎么说 auto-focus 能自动呼出键盘就已经是个很大的好评了。

    【相关推荐】

    展开全文
  • 网页编程的多种方式中,HTML + CSS + JavaScript 算是... 微信小程序也采用类似的方式,只是 WXML 充当的就是 HTML 的角色,而 WXSS 承担 CSS 的职责。 今天的内容小程序构成的第二篇,介绍 WXML 页面文件和 WXSS...

    网页编程的多种方式中,HTML + CSS + JavaScript 算是比较流行的一种组合。在这个组合中,HTML 用来描述页面的结构,CSS 用来描述页面要素的属性,而 JavaScript 通常是用来处理各种逻辑。

    微信小程序也采用类似的方式,只是 WXML 充当的就是 HTML 的角色,而 WXSS 承担 CSS 的职责。

    今天的内容小程序构成的第二篇,介绍 WXML 页面文件和 WXSS 页面样式文件。JavaScript 的内容我们下篇文章说明。

    XML 速成

    WXML(WeiXin Markup Language)是为微信小程序框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。这里的设计,实际是对 XML(EXtensible Markup Language)的一种扩展。

    鉴于这种渊源关系,我们首先参照实例简单介绍 XML。

    <!--XML 实例-->
    <连载 分类="GitChat">
      <作者>
        <姓名>面向对象思考</姓名>
        <年龄>-</年龄>
      </作者>
      <文章>
        <标题>01:微信小程序介绍</标题>
        <概要>介绍小程序的基本概念</概要>
      </文章>
      <文章>
        <标题>02:开发环境的准备</标题>
        <概要>介绍登录小程序账号和安装开发环境的过程<概要>
      </文章>
    </连载>
    

    这是描述本连载信息的 XML。不需要参照其他的说明资料,应该就能够理解上面结构中包含的信息。接下来围绕 XML 的特点,对各个要素等进行简单的说明。

    标签

    标签是 XML 的最基本要素,它由 <(或 </)和 > 以及包含在其中的名称和属性等构成。以 < 开始的是开始标签,以 </ 开始的称为结束标签。

    <标题></标题>
    <概要></概要>
    

    元素

    从(且包括)开始标签直到(且包括)结束标签的部分结合在一起成为一个元素。元素也可以拥有属性。这些属性记载在元素的开始标签中,其格式如下:

    属性名 = "属性内容"
    

    例如:

    <连载 分类="GitChat">
    </连载>
    

    上面例子中的“分类”就是属性信息。

    元素可包含其他元素、文本或者两者的混合物。各个元素的开始,结束标签必须严格匹配。

    WXML 内容介绍

    index.wxml

    打开 pages/index/index.wxml,你会看到以下的内容:

    <!--index.wxml-->
    <view class="container">
      <view class="userinfo">
        <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    

    可以看出,WXML 完全符合 XML 的特征。我们稍微细致一点说明一下 index.wxml 的内容。

    注释

    首先是注释行,它的格式是:

    <!--index.wxml-->
    

    这部分的内容来自 XML。

    页面构成

    小程序的页面是由相互包含的容器和组件构成。以 index 页面为例,各个要素的包含关系,可以表示为下图:

    ffa2ed00-50e2-11ea-a847-a5aa0d0597f8

    大多数要素定义中包含一个 class 信息。例如最外层 view 的 class 为 "container",它的含义是这个 view 的属性由本文后面会讲到的 WXSS 来描述。当然也可以直接定义容器或者要素的属性,只要你不怕麻烦。

    要素的嵌套关系是一个树状结构,很容易理解。只有一处需要特别说明:class 为 userinfo 的 view 有内部两个要素,分别是 button 和 block。它们的属性又分别包含了 ws:ifs:else,两个元素是否表示出来要根据 ws:if 后面的条件来判断。

    当小程序还没有取得用户信息时,只显示“获取头像昵称”按钮:

    35cfa3a0-50e3-11ea-b315-dd4a0f63c225

    用户信息取得成功之后,显示头像和昵称:

    3d1f4840-50e3-11ea-b2e1-7d26d62747f1

    有关条件的部分我们下篇文章说明。

    logs.wxml

    接下来是另一个页面文件 logs.wxml:

    <!--logs.wxml-->
    <view class="container log-list">
      <block wx:for="{{logs}}" wx:for-item="log">
        <text class="log-item">{{index + 1}}. {{log}}</text>
      </block>
    </view>
    

    在这个文件中,出现了一个新内容:wx:for,微信小程序中称之为列表渲染。不用太在意渲染这个词,称之为列表表示,列表显示区别都不大。它的含义是将 {{logs}} 数组中的内容循环显示,对于数组中的每一项,将其命名为 log。显示的具体形式通过下面的语句决定。

      <text class="log-item">{{index + 1}}. {{log}}</text>
    

    其中,index 便是当前项的下标变量名。更多内容可以参照本文最后的链接。

    CSS 概要

    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。说到样式文件大家都知道的是 CSS(CascadingStyleSheet)。

    在 HTML 文档中需要通过使用很多属性来控制字体、颜色、间距。对于不同的画面元素,经常需要指定不同的属性组合。但是在一个一定规模的画面中或者是不同的画面之间经常存在着共同的组合。通过将属性组合定义在 HTML 以外的 CSS 文件中可以为属性设定提供更大的共通性和灵活性。

    CSS 样式表的基本元素是样式规则,它们由选择器和包裹在一对 {} 中的 CSS 属性值所组成。例如:

    body {
      color: #000;
      background: #fff;
      margin: 0;
      padding: 0;
      font-family: Georgia, Palatino, serif;
      }
    

    属性由 [属性名:属性值] 构成,注意这里的属性名并不包含双引号,这是和 JSON 不同的地方。

    WXSS

    WXSS 具有 CSS 大部分的特性,同时也做了一些扩充和修改。

    1. 新增了尺寸单位。WXSS 在底层支持新的尺寸单位 rpx,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可。但是由于换算采用的是浮点数运算,所以运算结果会和预期结果有一点点偏差。
    2. 提供了全局的样式和局部样式。和前边 app.json、page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面。

    编程语言的变量定义都有一个作用域的概念,一个变量被重复定义时,语义上距离近的定义有效。同样的道理,如果页面式样表中定义了与全局式样表中相同的内容,那么对于这个页面来说,页面式样表中的定义优先。

    全局样式

    以下是 HelloLightApp 的全局样式文件:

    /**app.wxss**/
    .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 200rpx 0;
        box-sizing: border-box;
    }
    

    本例中 .container 就是选择器,它表示任何以“container”类命名的元素(例如 index 页面的最外层要素)都适用 {} 中的属性。

    页面样式

    在 HelloLightApp 例子中有两个页面样式文件,我们只是拿出 index.wxss 来说明。

    /**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;
    }
    

    式样表中分别定义了名为 userinfo、userinfo-avatar、userinfo-nickname、usermotto 的属性组合。这些组合都在上面说明过的 index.wxml 文件中被使用,其作用是控制要素的表示方式。关于属性的具体信息,微信文档中并没有提供,读者可以到本文最后的参考文献中列出的 CSS 参考手册和教程中去确认。

    参考文献

    本文中关于 CSS 的描述引用了《JavaScript 权威指南》中的一部分内容。微信小程序出现的时间还不长,很多信息都需要到下面的 CSS 教程和 WXML 教程去找。例如:

    展开全文
  • 小程序wxml语法的使用

    2021-02-08 10:48:18
    一、WXML介绍 WXML全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。 WXML 文件后缀名是 .wxml,简单的 WXML 语句在语法上同 HTML 非常...
  • 一、wxml文本介绍 此处只列举了一些常用的标签 具体可查阅 微信小程序开放文档 1、<text> text 相当于 web 的 span 标签 行内元素 不会换行 小程序 只有 text能长按复制 <!-- 1 长按文字复制 selectable ...
  • 微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式。 一、wxml 界面结构wxmL比较容易理解,主要是由八大类基础...
  • 一、WXML模板 1. 什么是 WXML WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的 HTML。 2. WXML 和 HTML 的区别 ① 标签名称不同 HTML ...
  • 我在实现“黄蔷的记事本”功能时,在.wxml文件中主要使用 </view> </txt> </button> </navigator> <opendata> </scroll-view>等组件,也写了对应的.wxss类。官方文档内容较多,...

空空如也

空空如也

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

wxml介绍