小程序常用的 API 以及简单交互

微信开发者工具常用的API

WXML 框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

>>

>>

>>

数据绑定：使用 Mustache 语法（双大括号）将变量包起来
wxml

{{message}}

page.js

Page ({
	data: {
		message: 'hello 小程序'
	}
})

除此之外，组件属性需要用到数据、控制属性条件渲染时、关键字(false&true)以及运算等也需要遵循此语法。

条件渲染：
wxml

 Web 
 App 
 Book 

page.js

Page ({
	data: {
		view: 'Web',
		condition: true
	}
})

wx:if 和 hidden 的区别：
wx:if 的惰性，当初始渲染条件为 false 时，框架什么都不做，组件不会被渲染到页面上，有更高的切换消耗；
hidden 的组件始终会被渲染，只是简单的控制显示与隐藏，有更高的初始渲染消耗。
如果需要频繁切换的情景：hidden
如果运行时条件不大可能改变：wx:if

block wx:if
wx:if 是一个控制属性，需要将它添加到一个标签上。
如果需要一次性判断多个组件标签，可以用 标签将多个组件包起来，并在 上使用 wx:if 控制属性。

并不是一个组件，仅仅是一个包装元素，不会再页面上做任何渲染，只接受控制属性。

列表渲染：
wxml

 {{idx}} : {{item}} : {{item.name}} 
// 定义列表的各参数
 {{item}}   
// {{item}} 为列表的每一项

page.js

Page ({
	data: {
		arr: [
			{ name: "chen" },
			{ name: "kofe" }
		]
	}
})

简单交互

页面跳转传参：

app.json

"pages": [
	"pages/index/index",
	"pages/test/test"
]

index.wxml

 go to test 

test.js

onLoad: function(options){
	console.log(options)   // {id: "1"}
}

改变data里的变量：

pages.js

Page ({
	data: {
		str: "123456",
		arr: [1,2,3,4,5,6],
		obj: {id: 1, name: "chen"}
	}
}),
reverseStr: function() {
	this.setData({ str: this.data.str.split('').reverse().join('') })
},
pushItem: function() {
	let last = this.data.str[this.data.arr.length - 1] + 1
	let newArr = [last]
	this.data.arr = this.data.arr.concat(newArr)
	this.setData({ arr: this.data.str })
},
changeObjName: function() {
	// 注意此处写法
	this.setData({ "obj.id": "2" })
},
changeColor: function() {
	this.setData({ condition: !this.data.condition })
}

示例 1：实现点击按钮反转文字

wxml

 {{str}} 
 反转按钮 

示例 2：实现点击按钮改变 data 中数组

wxml

	{{index}} : {{item}}  // 可以通过 {{index}} 和 {{item}} 直接访问列表的下标和每一项而不用在标签中定义

 添加按钮 

示例 3：实现点击按钮改变 data 中对象

wxml

{{obj.id}}:{{obj.name}}
 改变按钮 

改变 class：

wxml

  我会改变颜色 
 改变颜色