微信小程序的简单开发案例(记事本)

微信小程序案例之简单记事本实现

我最近在学习微信小程序，主要熟悉了微信开发者工具的简单使用以及小程序的开发流程。微信小程序的学习要求不高，只要有一些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  })
      }
})

效果图演示