<view> {{message}} </view>
// page.js Page({ data: { message: 'Hello MINA!' } })
组件属性(需要在双引号之内)
<view id="item-{{id}}"> </view>
Page({ data: { id: 0 } })
控制属性(需要在双引号之内)
<view wx:if="{{condition}}"> </view>
Page({ data: { condition: true } })
关键字(需要在双引号之内)
true, b: 2, c: 3 } })
} })
, 1, 2, 3, 4], b: 2 } })
, b: 2 }, obj2: { c: 3, d: 4 } } })
, b: 2 }, obj2: { b: 3, c: 4 }, a: 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] //2个值交换一下 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 }) } })
, msg: 'this is a template', time: '2016-09-15' } } })
, "target": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "currentTarget": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "detail": { "x":53, "y":14 }, "touches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }], "changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }] }
// - 会转为驼峰写法 event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写 } })
, "y":14 },
, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }],
, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }]
changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。

WXML 提供两种文件引用方式import和include。
import
import可以在该文件中使用目标文件定义的template,如:
在 item.wxml 中定义了一个叫item的template: <template name="item"> <text>{{text}}</text> </template>
在 index.wxml 中引用了 item.wxml,就可以使用item模板:
<import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/>
import 的作用域
只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。即不会递归引用
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
include
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置,如:
<!-- index.wxml --> <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/>
<!-- header.wxml --> <view> header </view>
<!-- footer.wxml --> <view> footer </view>

小程序WXML 使用小结的更多相关文章

  1. 微信小程序支付简单小结与梳理

    前言 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点. 当然在开发之前,我们需要有下面这些东 ...

  2. 微信小程序wxml文件中调用自定义函数

    想在微信小程序的wxml文件里自如的像vue那样调用自定义的方法,发现并不成功,得利用WXS脚本语言. WXS脚本语言是 WeiXin Script 脚本语言的简称,是JavaScript.JSON. ...

  3. [转]微信小程序支付简单小结与梳理

    本文转自:https://www.cnblogs.com/onetwo/p/6667424.html 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物 ...

  4. 微信小程序wxml和wxss样式

    对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...

  5. 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 百牛信息技术bainiu.ltd整理发布于博客园 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML( ...

  6. 微信小程序 wxml 文件中如何让多余文本省略号显示?

    废话不多说,之前写小程序碰到了一个问题,如何在 wxml 页面中截取数据? 1.wxs   取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的. 那还有 cs ...

  7. 微信小程序wxml页面toFixed保留两位小数,wxs脚本语言

    在wxml页面执行toFixed函数的时候发现失效,在微信小程序的js页面是生效的,但是我不希望在data中保留这些额外的数据,于是找到了下面这种解决方案wxs脚本语言. <wxs module ...

  8. 微信小程序のwxml绑定

    一.微信小程序文件的构成 微信小程序包括js文件.json文件.wxml文件.wxss文件.wxs文件.js文件是展现界面的,注册这个程序的的页面,一般一个大写的Page({ })嵌入: json文件 ...

  9. 微信小程序WXML页面常用语法(讲解+示例)

    (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...

随机推荐

  1. java.lang.UnsupportedOperationException:This parser does not support specification "null" version "null"

    java.lang.UnsupportedOperationException: This parser does not support specification "null" ...

  2. Mapper not initialized. Call Initialize with appropriate configuration.

    System.InvalidOperationException:“Mapper not initialized. Call Initialize with appropriate configura ...

  3. P2P网络借贷系统-核心功能-用户投标-业务解说

    用户投标是P2P网络借贷系统的核心功能.相对照较复杂,为了更好地梳理业务和技术实现思路,特地具体总结分析下. 输入:用户id-uid.标的id-lid.投标金额-amount 1.依据lid,获得贷款 ...

  4. KVM Run Process之KVM核心流程

    在"KVM Run Process之Qemu核心流程"一文中讲到Qemu通过KVM_RUN调用KVM提供的API发起KVM的启动,从这里进入到了内核空间执行,本文主要讲述内核中KV ...

  5. 生成批量删除多个表sql语句

    --批量删除多个表 select 'drop table ' +name from sysobjects where type = 'U' order by name

  6. 【Linux命令】ls命令

    ls命令是Linux最常用的命令,ls命令就是list的缩写,主要作用是:打印出当前目录的清单.如果ls指定其他目录,那么就会显示指定目录下的清单. 1.命令格式 ls [选项] [目录名] 2.命令 ...

  7. PlayMaker 不支持过渡条件

    Unity Animator 自带也支持过渡条件,  我看了下PlayMaker没有这个概念.  最近研究下PlayMaker,图形化编程的确很爽. 但是PlayMaker 始于与给一些策划进行流程设 ...

  8. 【前端】jQuery

    一.jQuery是什么? 1.jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多JavaScript高手加入其team 2.jQuery是继prototype之后有一个优秀的 ...

  9. LaTeX 中换段落

    中文文章中,LaTeX 中换段落: 在LaTeX 中,一个回车表示一个空格,两个回车表示一个分段.

  10. NE2018届校招内推笔试——数据挖掘

    [单选题|2分/题] 1.在只有两类的情况下,二维特征向量通过共享相同的协方差矩阵的正态分布生成,其中协方差矩阵为: 均值向量分别为:,则根据贝叶斯分类,样本分类为:() A. 分类2 B. 无法确定 ...