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

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

我最近在学习微信小程序，主要熟悉了微信开发者工具的简单使用以及小程序的开发流程。微信小程序的学习要求不高，只要有一些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) returnvar todos=this.data.todostodos.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.allCompletevar todos=this.data.todosvar that=thistodos.forEach(function(item){ //for循环  item.complete=that.data.allComplete})var leftCount=this.data.allComplete?0:this.data.todos.lengththis.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  })}
})

效果图演示

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

微信小程序蓝牙BLE开发实战——案例(二)
微信小程序蓝牙BLE开发实战(二) 上篇主要介绍在开发过程中应用到相关API操作.接下来介绍个人在项目开发中应用蓝牙BLE一些事情. 由于时间比较仓促, 有些注释没那么详细.请理解~写的不好欢迎各位大 ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
微信小程序应用号开发教程！博卡君通宵吐血赶稿
微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧对了,昨天晚间微信小程序开发文档官方版发布了微信 ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
微信小程序应该这样开发
微信小程序应该这样开发帐号相关流程注册范围企业政府媒体其他组织(换句话讲就是不让个人开发者注册) 填写企业信息不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的 ...
微信小程序前后端交互案例
微信小程序前后端交互案例首先声明一下,本人也是一个初学者(下面的案例可能会有很多不完整或说的不正确的,所以只能起到参考作用,千万不要拿我的话当标准). 我是纯自学,之前在前后端交互方面一直搞不懂,所 ...
微信小程序Taro + React开发实践
微信小程序Taro + React开发实践微信小程序原生开发有一套自己的规范和写法,开发体验十分类似Vue,但如果你想减少学习成本,那么Taro框架是一个在此基础上又封装了一层的轮子,从社区热度到开 ...
微信小程序使用云开发实现微信支付功能报错Error: 签名错误，史上最全解决办法，不服留言骂我
报错背景微信小程序使用云开发实现微信支付功能,但是报错了报错信息报错原因小程序想要使用微信支付,必须满足下面几个条件的 1,必须是非个人小程序(个人小程序用不了支付) 企业小程序需要认证! 2 ...