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

微信开发者工具常用的API

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

<view> >> <div>

<text> >> <span>

<navigator> >> <a>

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

<view>{{message}}</view>

page.js

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

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

条件渲染：
wxml

<view wx:if="{{view == 'web'}}"> Web </view>
<view wx:elif="{{view == 'app'}}"> App </view>
<view wx:else="{{view == 'book'}}"> Book </view>
<view hidden="{{condition}}"> 我是隐藏的 </view>

page.js

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

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

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

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

列表渲染：
wxml

<view wx:for="{{arr}}" wx:for-index="index" wx:for-item="item" wx:key="item.name"> {{idx}} : {{item}} : {{item.name}} </view>
// 定义列表的各参数
<view wx:for="{{arr}}" > {{item}} </view>  
// {{item}} 为列表的每一项

page.js

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

简单交互

页面跳转传参：

app.json

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

index.wxml

<navigator url="/pages/test/test?id=1"> go to test </navigator>

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

<view> {{str}} </view>
<button bindtap="reverseStr"> 反转按钮 </button>

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

wxml

<view wx:for="{{arr}}">
	{{index}} : {{item}}  // 可以通过 {{index}} 和 {{item}} 直接访问列表的下标和每一项而不用在标签中定义
</view>
<button bindtap="pushItem"> 添加按钮 </button>

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

wxml

<view>{{obj.id}}:{{obj.name}}</view>
<button bindtap="changeObjName"> 改变按钮 </button>

改变 class：

wxml

<view class="{{condition ? 'active' : ''}}">  我会改变颜色 </view>
<button bindtap="changeColor"> 改变颜色 </button>