<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. centos7安装后的防火墙问题

    centos7 默认使用firewall作为防火墙 停止并关闭开机自启动: systemctl stop firewalld.service #停止firewall systemctl disable ...

  2. ElasticSearch reindex报错:the final mapping would have more than 1 type

    ElasticSearch reindex报错:the final mapping would have more than 1 type 学习了:https://blog.csdn.net/qq_2 ...

  3. Oracle一些查询的习题,初学者一定要练习,蛮不错的

    1. select * from emp; 2. select empno, ename, job from emp; 3. select empno 编号, ename 姓名, job 工作 fro ...

  4. Java基础大家必看啊

    写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java语言代码把思路体现出来.   学习 ...

  5. TJU Easier Done than Said?

    Password security is a tricky thing. Users prefer simple passwords that are easy to remember (like  ...

  6. python的基本知识点

    一.数据类型 1.整数2.浮点数3.字符串4.布尔值:True/False5.空值:None 二.变量 变量名必须是大小写英文.数字和_的组合,且不能以数字开头 三.常量 全部大写的变量名表示常量,p ...

  7. Vue 组件通信(子组件向父组件传递数据)

    1.自定义事件 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="U ...

  8. 学习-短信的上行(MO)和下行(MT)详解

    基础知识: SP服务提供商: 通常是指在移动网内运营增值业务的社会合作单位, 它们建立与移动网络建立相连的服务平台, 为手机用户提供一系列信息服务, 如:娱乐.游戏.短信.彩信.WAP.彩铃.铃声下载 ...

  9. C语言 (内存) 四道经典题目

    void GetMemory(char *p) { p = (); "没有释放内存" } void Test(void) { char *str = NULL; GetMemory ...

  10. myeclipse中配置schemaLocation路径,实现xml文件自动提示

    在开发中,XML的xsi:schemaLocation路径都是指向网络,但是这个网络地址有时候很不给力导致工程检验XML格式缓慢.所以有必要再myeclipse中配置本地xsd文件路径,以免每次校验都 ...