小程序的数据绑定

小程序的数据绑定

小程序的页面是数据的绑定，在页面js文件中的data中定义的数据，可以在wxml中利用{{ }}符号引用

// pages/test/test.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    msg: 'owen is DSB',
    name:"tank",
    num :12,
    num1:1,
    flag:false,
    name_list:[{"name":"jason",love:"piao"},{name:"tank",love:"own"},{name:"egon",love:"洗脚"}],
    tank:{name:"tank",love:"own"},
    color:"blue"
  },
})

页面的.wxml文件和html性质一样

1页面引用js的数据是用{{}}，也可以用作属性值
 
<view id="item-{{msg}}">ttt {{ msg }}</view>  // view标签类似div标签
<view>my age {{num}}</view>
 
2 如果都是字符串，{{name + msg}}，就是拼接
<view>{{name + msg}}</view>
 
3 如果一个是字符串一个是数字也是拼接
<view>{{name + num}}</view>
<view>{{num1 + num}}</view>
 
4 就想做加法运算就分开写
<view>{{num1}} + {{num}}</view>
 
5 在页面中如果属性想表达布尔值，一定要加{{}}，当然也可以直接使用变量{{布尔值变量}}
<checkbox checked = "{{false}}"></checkbox>
<checkbox checked = "{{flag}}"></checkbox>
 
 
<view wx:if = "{{num>11}}">
 
sean is sb
</view>
 
 
6 循环默认是用index -> 取键，item -> 取值，
用wx:for-index --> 来修改取键的index
用wx:for-item --> 来修改取值的item
一般都要加上wx:key ="index"来提高遍历的速度
如果只想输出内容没不想要包裹的标签，用<block>标签做承载标签
<view wx:for="{{name_list}}" wx:key ="index">
{{index}} ****{{item.name}} %%%%{{item.love}}
 
</view>
 
<view wx:for = "{{name_list}}" wx:for-index="k" wx:for-item = "v"  wx:key ="index1">
 
{{k}} :{{v.name}}  ->{{v.love}}
</view>
 
<block wx:for = "{{name_list}}" wx:for-index="k" wx:for-item = "v"  wx:key ="index1">
 
{{k}} :{{v.name}}  ->{{v.love}}</block>
 

小程序的wxss文件

标签那个和原生的html一样都有class和id，我们的样式写在wxss文件，和普通的css没有区别，只是用rpx来代替px。（1rpx = 0.5px）

.wxml文件

 
<view class="cls"></view>
#行内样式写法与原生的没有区别，可以调用变量来做属性值
<view style="color:{{color}}">asdas</view>

.wxss文件

.cls{
   400rpx;
  height: 400rpx;
  background-color: 
}

小程序的官方组件

https://developers.weixin.qq.com/miniprogram/dev/component/view.html