微信小程序案例之简单记事本实现
我最近在学习微信小程序,主要熟悉了微信开发者工具的简单使用以及小程序的开发流程。微信小程序的学习要求不高,只要有一些web前端等知识基础即可。
1,小程序简介
微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。
开发工具下载地址:https://mp.weixin.qq.com/wiki
2,微信小程序项目结构
3,微信小程序案例之记事本
我在微信开发者工具中创建了一个TODOS DEMO项目这个项目的结构如下图所示。
app.json
{ "pages":[ "pages/todos/todos" ],
"window":{ "backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "记事本",
"navigationBarTextStyle":"black" },
"style": "v2", "sitemapLocation":
"sitemap.json"}
todos.wxml
<view class="container" ><view class="header">
<image src="../../images/plus.png" bindtap="addTodoHandle"></image>
<input type="text" placeholder="请输入..." value="{{input}}" bindinput="inputChangeHandle" bindconfirm="addTodoHandle">
</input>
</view>
<block wx:if="{{todos.length}}">
<view class="todos">
<view class="item{{item.complete?' complete':' '}}" wx:for="{{todos}}" bindtap="toggleToHandle" data-index="{{index}}"><!--wx:for的任务就是遍历数组的对象个数-->
<!-- 图标显示 -->
<icon type="{{item.complete?'success':'circle'}}"></icon>
<text>{{item.name}}</text>
<icon type="clear" size="16" catchtap="DeleteHandle" data-index="{{index}}"></icon> <!--图标的大小利用size属性即可调整-->
</view>
</view>
<view class="footer">
<text bindtap="toggleAllHandle">全选</text>
<text wx:if="{{leftCount}}">{{leftCount}} {{leftCount>1?'未完成':'未完成'}} 事件</text>
<text bindtap="clearHandle">清空完成事件</text>
</view>
</block>
<view wx:else>
<text>您还没有开始记录任何事件呢哦</text>
</view>
</view>
todos.wxss
.container{ border-top: 1rpx solid #e0e0e0;
}
.header{ border: 1rpx solid #e0e0e0;
margin: 20rpx;
border-radius: 10rpx; /*边框圆角平滑度*/
box-shadow: 0 0 5px #e0e0e0; /*边框阴影*/
display: flex;/*伸缩布局*/
padding: 20rpx; /*内边距*/
align-items: center; /*侧轴对其,就是说的y轴*/
}
.header image{
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
.todos{
border: 1rpx solid #e0e0e0;
margin: 20rpx;
border-radius: 10rpx; /*边框圆角平滑度*/
box-shadow: 0 0 5px #e0e0e0; /*边框阴影*/
}
.todos .item{
padding: 20rpx;
border-bottom: 1rpx solid #e0e0e0;
display: flex;
align-items: center; /*侧轴对齐,主要用作图标对齐一致*/
}
.todos .item:last-child{
/*防止最后一个项目与外边框线重合加深颜色*/ /* color: red; */
border-bottom: 0;
}
.todos .item text{
flex: 1; /*采用固比模型*/
font-size: 35rpx;
color: #444;
margin-left: 20rpx;
}
.todos .item.complete text{
color: #888;
text-decoration: line-through; /*内容添加中划线*/
}
.footer{ display: flex;
justify-content: space-between; /*内容的一种对齐方式,元素与元素之间的缝隙是默认相等的*/
/* justify-content: space-around; 元素与元素左右之间的缝隙是相等的 */
margin: 20rpx;
font-size: 30rpx;
}
todo.js
Page({
data:{
//文本框的数据模型
input :'',
//任务清单数据模型
todos:[
{
name : '学习html', //任务名称
complete: false //任务完成状态
},
{
name : '学习math', //任务名称
omplete: false //任务完成状态
},
{
name : '学习hadoop', //任务名称
complete: true //任务完成状态
}
],
leftCount:2
},
//1,先让按钮点击时执行一段代码
addTodoHandle:function(){
//点击按钮之后执行事件
// console.log(this.data.input) //拿到文本框的值
if(!this.data.input) return
var todos=this.data.todos
todos.push({
name:this.data.input,
complete:false,
allComplete:false
})
wx.setStorage({
key:"todos",
data:todos
})
console.log(wx.getStorageSync('todos'))
//必须显式的通过setData来改变数据,这样界面才会得到变化
this.setData({todos:todos,input:'',leftCount: this.data.leftCount+1})
},
//2,拿到文本框里面的值
//2.1由于小程序的数据绑定是单向的,必须要给文本注册改变事件
inputChangeHandle:function(e){
// console.log(e.detail)
this.setData({
input:e.detail.value
})
},
toggleToHandle:function(e){
//切换当前点中item的完成状态
//console.log(e.currentTarget)
var item=this.data.todos[e.currentTarget.dataset.index]
item.complete=!item.complete
var leftCount=this.data.leftCount+(item.complete?-1:1)
//console.log(item)
this.setData({todos:this.data.todos,leftCount:leftCount})
},
//这个方面需要注意冒泡问题
DeleteHandle:function(e){
//删除任务操作
console.log(e.currentTarget)
var todos=this.data.todos
//item就是splice方法中删除掉的元素
var item=todos.splice(e.currentTarget.dataset.index,1)[0] //删除数组中对象的方法,1是从固定下标开始删除几个数组元素
var leftCount=this.data.leftCount-(item.complete?0:1)
this.setData({todos:todos,leftCount:leftCount})
},
toggleAllHandle:function(){
//this在这里永远指向的当前的页面对象
this.data.allComplete=!this.data.allComplete
var todos=this.data.todos
var that=this
todos.forEach(function(item){ //for循环
item.complete=that.data.allComplete
})
var leftCount=this.data.allComplete?0:this.data.todos.length
this.setData({todos:todos,leftCount:leftCount})
},
clearHandle:function(){
var todos=[] //定义空数组
this.data.todos.forEach(function(item){
if(!item.complete){
todos.push(item) //把所有未完成的任务存储到一个新的数组
}
})
this.setData({ todos:todos })
}
})
效果图演示