初学微信小程序 TodoList
微信小程序的学习
微信小程序的开始尝试 TodoList
微信开发者工具生成 目录如下:
.
|-- app.js
|-- app.json
|-- app.wxss
|-- pages
| |-- index # 主页
| | |-- index.js
| | |-- index.json
| | |-- index.wxml
| | `-- index.wxss
| `-- log # 日志页面
| | |-- log.js
| | |-- log.json
| | |-- log.wxml
| | `-- log.wxss
`-- utils # 工具
`-- util.js
大体为:
每一个page即是一个页面文件 ,每个页面有一个js/wxml/wxss/json文件 规定:描述页面的这四个文件必须具有相同的路径与文件名。
全局下同路,为公共的逻辑,样式,配置
与html不同:用view text navigator
代替 div span a
官方文档
*.wxml: 数据驱动的视图层 + 微信提供了大量的组件 表单 导航 媒体 ...
好,那现在正式尝试TodoList~
开始完成wxml ,我在这里主要分成三部分
1.titleBar
<view class="titleBar">
<div class="status">
<!-- wxml 是一个模板 {{数据状态}} 数据的绑定
动态的 可编译的 活的 data 是活的 setData 只要状态一变 界面立即改变 -->
<text class="{{status=='1'?'active':''}}" data-status="1" bindtap="showStatus">全部</text>
<!--用data- 表示数据属性-->
<text class="{{status=='2'?'active':''}}" data-status="2" bindtap="showStatus">未完成</text>
<text class="{{status=='3'?'active':''}}" data-status="3" bindtap="showStatus">已完成</text>
</div>
<div class="add">
<button class="mini-btn" size="mini" type="warn" bindtap="addTodoShow">添加</button>
</div>
</view>
2/scoll-view scroll-y class="lists"
<scoll-view scroll-y class="lists">
<view class="item" wx:for="{{curLists}}" wx:key="index">
<div class="content">
<icon class="icon-small" bindtap="changeTodo" data-item="{{index}}" size="23" type="{{item.status ==='1'? 'success':'circle'}}"></icon>
<text class="title">{{item.title}}</text>
<text class="time">{{item.time}}</text>
</div>
</view>
</scoll-view>
3/addForm
<view class="addForm {{addShow?'hide':''}}">
<view class="addForm-div">
<input type="text" placeholder="请输入任务" class="weui-input" bindinput="setInput" value="{{addText}}" />
<view class="addForm-btn">
<button type="warn" size="mini" class="weui-btn mini-btn" bindtap="addTodo">确定添加</button>
<button type="default" size="mini" class="weui-btn mini-btn" bindtap="addTodoHide">取消</button>
</view>
</view>
</view>
</view>
wxml 是一个模板 {{数据状态}} 数据的绑定
动态的 可编译的 活的 data 是活的 setData 只要状态一变 界面立即改变
我们在这里使用了data 来表示数据属性
写完了wxml 那让我们加上wxss样式看看效果把
TodoList wxss
在wxss中我们使用了弹性布局flex:1, 这种布局的方式使得我们不用计算大小了
我们当然不能只做一个切图仔啦
话不多说看看js的实现部分
数据 对应着 界面状态
默认的status是1是全部
setData改变 比如改成2 setData 2 已完成 3 未完成
界面状态,全部被data接管起来
当前点击条目的status要变成 success 数据 lists 跟当前条目相关的数据
将status的值 更新为 1
这样一个简单的TodoList框架就做好了
初学微信小程序 TodoList的更多相关文章
- 初学微信小程序
最近微信推出了微信小程序,为此我学了几天,基本了解了组件及简单语法,但是今天我自己想要独立写一个demo时,忽然发现难道我的不是微信小程序的语法(我以前是iOS 开发,不用css),而是css样式的设 ...
- 初学微信小程序——配置问题(1)
一.注册: 微信小程序账号注册:登录https://mp.weixin.qq.com 点击“立即注册”->”小程序” 注册完成后,下载微信小程序开发者工具: 依次点击:“首页”->“文档 ...
- 微信小程序-TodoList
TodoList 博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE2020 作业要求 https://edu.cnblogs.com/campus/zjcsx ...
- 初学微信小程序——配置问题(2)
六.生命周期函数: 在微信公众平台指南中搜索生命周期,找到页面生命周期 比如,我打开cate.js并编写,代码如下: ** * 生命周期函数--监听页面加载 */ onLoad: function ...
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 小程序——微信小程序初学踩过的坑
微信小程序初学踩过的坑 一.前言 最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...
- 微信小程序的应用及信息整合,都放到这里了
微信小程序终于开始公测了,这篇文章也终于可以发布了. 这篇文章可以说是微信小程序系列三部曲最后一篇.8 月份,小程序推出前,我写了<别开发 app 了>详细阐述了为什么创业应该放弃原生 a ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
随机推荐
- 关于自增id 你可能还不知道
导读:在使用MySQL建表时,我们通常会创建一个自增字段(AUTO_INCREMENT),并以此字段作为主键.本篇文章将以问答的形式讲述关于自增id的一切. 注: 本文所讲的都是基于Innodb存储引 ...
- echarts 实例demo 详细讲解
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- Luogu P1195/P1892 口袋的天空/BOI团伙 【最小生成树/并查集】By cellur925
其实这俩题挺水的,团伙拿下了一血,但是感觉还是写一下博客比较好x. 一.团伙 题目描述 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是 ...
- 状压入门--bzoj1087: [SCOI2005]互不侵犯King【状压dp】
Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上 左下右上右下八个方向上附近的各一个格子,共8个格子. Input 只有一行, ...
- c语言程序设计案例教程(第2版)笔记(五)-软件开发基础知识
零散知识点: 软件的主要特征 软件是一种逻辑产品,而不是有型的物质: 软件需要设计.开发,但不是传统意义上的产品制造: 软件不会磨损,但软件需要维护,即:修改代码或增加模块: 虽然软件行业正在向基于组 ...
- [luogu4931]情侣?给我烧了!
题解 有\(i\)对情侣全都不和谐那里推不出来只好写了一个暴力容斥然后大力卡常卡过去了== 容斥太过暴力,还是说正解吧 可以考虑直接计算\(n\)对情侣有\(k\)对和谐的方案数 设\(g[i]\)表 ...
- 洛谷 P1430 序列取数
如果按照http://www.cnblogs.com/hehe54321/p/loj-1031.html的$O(n^3)$做法去做的话是会T掉的,但是实际上那个做法有优化的空间. 所有操作可以分解为由 ...
- ACM_送气球(规律题)
送气球 Time Limit: 2000/1000ms (Java/Others) Problem Description: 为了奖励近段时间辛苦刷题的ACMer,会长决定给正在机房刷题的他们送气球. ...
- bootmanager is missing
问题描述: 在计算机管理->存储->磁盘管理中,因误操作,将D盘设置了"将分区标记为活动分区(M)",导致重启时无法无法进入系统,提示"bootmanager ...
- 表达式语言EL简单学习
Jsp2.0最重要的特性就是表达式语言EL.jsp用户可以用它来访问应用程序数据. EL表达式以${开头并以}结束. ${expresion} ${x+y} 它也常用来连接两个表达式,取值将从 ...