1.数据绑定
数据绑定的运行与逻辑
小程序里面都是通过数据绑定的形式进行显示数据
小程序的数据只有出现在data中的数据才能进行数据绑定,才能进行数据显示
小程序只能单向数据绑定(自动)
就是页面上的值改动,不能自动改变JS。但是可以通过其他方式进行改变,比如事件的方式
一般是页面加载时就要从服务器去取数据了也就是在onLoad函数里。setData函数的作用是把从服务器获取的数据复制到data里边,这样才能实现数据绑定。this.setData()
以下将展示小程序提供的更加多元化的复杂的数据绑定方式。
index.wxml
<!--数据绑定--内容-->
<view>{
{message}}</view>
<!--数据绑定--组件属性-->
<view id="item-{
{id}}">组件属性id-{
{id}}</view>
<!--数据绑定---控制属性-->
<view wx:if="{
{condition}}">控制属性{
{condition}}</view>
<!--数据绑定---三元运算-->
<view hidden="{
{flag ? true : false}}">Hidden--{
{flag}}</view>
<!--数据绑定---算数运算-->
<view>{
{a + b}} + {
{c}} + d</view>
<!--数据绑定---逻辑判断-->
<view wx:if="{
{length > 5}}">6</view>
<!--数据绑定---字符串运算-->
<view>{
{"Hello " + name}}</view>
<!--数据绑定---数组组合-->
<view wx:for="{
{[zero, 1, 2, 3, 4, 5, 6]}}">{
{item}}</view>
<!--数据绑定---对象-->
<!--最终组合成的对象是{for: 1, bar: 2}-->
<template is="objectCombine" data="{
{for: x, bar: y}}"></template>
<!--数据绑定---扩展运算符 ... 来将一个对象展开-->
<!--最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}-->
<template is="objectCombine" data="{
{...obj1, ...obj2, e: 5}}"></template>
<!--数据绑定---对象的 key 和 value 相同-->
<!--最终组合成的对象是{foo: 'my-foo', bar:'my-bar'}-->
<template is="objectCombine" data="{
{foo, bar}}"></template>
index.js
Page({
data:{
//内容
message:'Hello MINA!',
//组件属性
id: 0,
//控制属性
condition: true,
//三元运算
flag:false,
//算数运算
a: 1,
b: 2,
c: 3,
//逻辑判断
length: 6,
//字符串运算
name: 'MINA',
//数组组合
zero: 0,
//对象
x: 0,
y: 1,
//对象展开
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
},
e: 5,
//对象key和value相同
foo: 'my-foo',
bar: 'my-bar'
},
})
附注:小程序中的true/false
vertical = 'false'
vaertical = '{
{false}}'
JS补充知识:引号说明值是字符串,字符串’false’值会被判定是true,非空字符串在js中判定是true。 如果要用的话加上’{ {false}}’。 例如 vertical = ‘{ {false}}’
2.调试工具 AppData panel
微信小程序调试工具:Wxml Panel、Sources Panel、AppData Panel、Storage Panel、Network Panel、Console Panel、Sensor Panel
AppData panel 用于显示当前项目运行时小程序 AppData 具体数据,实时地反映项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。
3.缓存
本地数据缓存是小程序存储在当前设备上硬盘上的