微信小程序新手教程生命周期模块化数据绑定( 二 ) _睿知

// 通过暴露的接口调用模块化方法
return util.formatTime(new Date(log))
})
})
}
})
二：数据绑定

文章插图
数据绑定有一部分前几个看着还行，后面的几个可能有几个不理解，界面展示的数据有的也因为条件没法显示。看不懂的可以先记着，后面真正用到时就会明白，反正我是这样想的。这里先记录下
data.wxml
{{message}}
组件属性
控制属性
三元运算符
我是运算结果－－-{{ab}}{{c}}d
asdf
{{"Hello "name}}
{{item}}
data.js
Page({
data:{
//内容绑定
message: 'Hello WeApp',
//组件属性绑定
id: 0,
//控制属性绑定
condition: true,
//三元运算
flag:false,
//算数运算
a: 1,
b: 2,
c: 3,
//逻辑判断
length: 6,
//字符串运算
name: '顺子',
//数组组合
zero: 0,
//对象
x: 0,
y: 1,
//对象展开
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
},
p: 5,
//对象key和value形同时
foo: 'my-foo',
bar: 'my-bar'
},
})
三：view组件

文章插图
刚看到这个效果的时候还真是和ReactNative的效果一致，属性也基本的一样.
view这个组件就是一个视图组件使用起来非常简单。
主要属性：
flex-direction：主要两个特性”row”横向排列”column”纵向排列
justify-content 主轴的对齐方式(如果flex-direction为row则主轴就是水平方向)
【微信小程序新手教程生命周期模块化数据绑定】可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’,‘space-around’)
align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向)
可选属性 (‘flex-start’, ‘flex-end’, ‘center’)
wxml
view
弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时，该组件则为弹性容器，弹性容器的子组件为弹性项目。
flex-direction: row
flex-direction: column
justify-content: flex-start