初学微信小程序 TodoList
2023-09-27 14:26:44 时间
微信小程序的学习
微信小程序的开始尝试 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框架就做好了
相关文章
- 基于微信小程序“筑巢”管理系统的开发与研究_kaic
- jackson实现java对象转支付宝/微信模板消息
- 精品微信小程序计算机维修服务+后台管理系统|前后分离VUE
- 精品微信小程序ssm户外体能训练教学平台+后台管理系统|前后分离VUE
- 精品微信小程序ssm校友录网站+后台管理系统|前后分离VUE
- 精品微信小程序ssm的大学生科技竞赛管理系统vuejs前后分离
- 精品微信小程序预约挂号小程序+后台管理系统|前后分离VUE
- 精品微信小程序ssm户外体能训练教学平台+后台管理系统|前后分离VUE
- 微信小程序尝鲜一个月现状分析
- 微信推出群聊消息置顶功能;软银调整 Arm 上市计划,同时登陆英国美国;MIT 工程师构建类似乐高的 AI 芯片|极客头条
- 微信小程序获取位置
- 仿:Android - 微信 - 朋友圈 - 小视频播放,多 4 句废话算我输
- 『微信小程序』优秀教程、轮子、开源项目 资源汇总,长期维护更新中... ... ...
- 微信小程序精品demo:有调商城(礼物挑选神器)(适用1304)
- 如何在微信小程序中实现今日头条App那样的Topbar