微信小程序

界面层：

事件：

给组件添加bind+事件名，在js里的page({})写方法
阻止事件冒泡catch+事件名 绑定事件，阻止事件冒泡

事件传参

通过给组件设置data-xxx="",在事件处理函数中使用e.target.dataset来获取
注意：小程序里面事件处理函数的this指向的是当前页面对象

单项数据流—数据绑定this.setData()—事件

所谓单项数据流，就是逻辑层和视图层只能进行一次
逻辑层在data里面初始化了数据 data:{msg:‘123’}
在视图层想要拿到数据 {{msg }} 我们想的办法是在视图层调一个方法，可以做到在视图层改变数据的时候，将数据同步到逻辑层
bindinput=“in” 在视图层
in:function(e){
this.data.msg = e.detail.value
}
将页面当前对象this的data里面的msg属性 = 当前对象.detail.value里面的值
最后你会发现是不行，这就是因为微信小程序里面(最早的js直接赋值没有办法做到这一点)的单项数据流
那该怎么解决呢？ this.setData({msg:e.detail.value})
只是把data变为了setDate

登录页面案例

抽象共同的事件处理函数

原始代码：user:function(e){
this.setData({
msg: e.detail.value
})
psd:function(e){
this.setData({
msg:e.datail.value
})
}
重复性非常高
抽取：

var change= {}
但是吧，msg是死属性，怎么才能变活？ 利用自定义属性 data-msg = “user”
var msg = e.target.dataset.msg
change[msg] = e.detail.value
this.setData(change)
}

条件渲染

wx:if 根据布尔值来判断：只有条件为真，才会渲染。用于运行条件不大可能改变，
hidden：始终会被渲染，只是简单的显示隐藏，用于频繁的运行条件改变
有多个组件需要显示隐藏的时候，block包裹起来

wxss vs css

rpx： 响应式像素
例如iphon6：屏幕宽度是375px，共有750个物理像素，
那么1rpx = 0.5px 物理像素 750rpx

微信小程序UI开发

页面跳转 navigator url

页面间传值

传值 ?name=‘123’ 接收值： onLoad里面的参数

页面导航模式

redirect：说明，引导页，权限声明。hover-class=“none” 自己 hover-class=“”
cursor:pointer 点击任何元素都高亮

页面导航API

wx.navigateTo({})
wx.redirectTo({})
wx.navigateBack({})

TODOs

界面

flex布局

布局

抽象数据模型

界面数据绑定

界面操作交互

点击按钮执行一段代码：拿到文本框输入的值，将这个值添加到列表中
输入框输入数据，无法自动同步到js逻辑层。那么自然js逻辑层无法进行数据的单向流
在输入框绑定事件 bindchange 在逻辑层定义一个bingchange 获取到当前输入的数据,并且重新赋值给data属性： this.setData({input: e.detail.value})
此时虽然给了data，但是还没有同步到视图层。需要一个事件触发才可以执行
在按钮添加一个事件，将新得到的数据，添加到item里面： 先获取当前的TODO
var todo = this.data.todo
todo.push({todo:this.data.input,computed"false})
这一步必不可少： 将逻辑层数据传递到视图层
this.setData({todos: todos, input:’’})

新增任务逻辑

获取添加数据
将数据添加到视图层
1：输入框输入数据，先获取到
2：将获取到的数据push到试图层
1.1：this.data.input = e.detail,.value
2.1:push方法向数组的末尾添加一个或多个元素，并且返回新数组的长度
2.2：首先获取到逻辑层的todos，然后push成一个item， ({name:this.data.input, computed:false})
2.3:将push完的数据，通过setData同步到视图层

切换任务完成状态

获取当前icon的
重中之重:是要先获取当前点击的索引
data-index= “{{index}}”
var item = this.data.todos[e.currentTarget.index]
item.computed = !item.computed;
将逻辑层设置完的数据，同步到视图层
this.setData({
toos:this.data.todos;
})

剩余任务量的展示

splice：向数组中添加或删除项目，返回值是被添加或者删除的项目

删除任务的逻辑

细节优化

具体代码见码云
https://gitee.com/Big_Cat-AK-47/wx-todos