初学微信小程序 TodoList

BearyChat 发布于2019-08-22 17:12 / 2222人阅读

摘要：微信小程序的学习微信小程序的开始尝试微信开发者工具生成目录如下主页日志页面工具大体为每一个即是一个页面文件，每个页面有一个文件规定描述页面的这四个文件必须具有相同的路径与文件名。

微信小程序的学习 微信小程序的开始尝试 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


    
    全部
    
    未完成
    已完成

2/scoll-view scroll-y class="lists"

    
        
            
            {{item.title}}
            {{item.time}}

3/addForm

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框架就做好了

云服务器 idc机房托管微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94961.html

微信小程序todolist

摘要：微信小程序列表页面简单的列表页面和数据添加，此时有一些问题在清除一些用户交互的页面的时候有些问题。一个微信小程序，同时只能有个网络请求连接。可能要在服务器上配置一些参数，可以让微信小程序调用基本上是没有问题的。 weixinApp 微信小程序toDoList 列表页面简单的列表页面和数据添加，此时有一些问题 setData在清除一些用户交互的页面的时候有些问题。 inputA 是一...

XUI 2019-08-20 12:24 评论0 收藏0
微信小程序实现运动步数排名与发布个人动态&服务器部署

摘要：项目规划本项目为基于微信手机应用平台的一款运动互动型小程序，实现了用户即时运动步数群内与个人动态的发布，小程序前端采用原生框架，后端采用基于的框架，数据库采用，对象存储采用七牛云，服务器采用阿里，域名采用认证。 1. 项目规划本项目为基于微信手机应用平台的一款运动互动型小程序，实现了用户即时运动步数群内PK与个人动态的发布，小程序前端采用原生框架，后端采用基于Node的koa2框架，...

laoLiueizo 2019-08-26 13:22 评论0 收藏0
用mpvue写个玩意儿玩玩

摘要：微信开发工具仅用于调试。下面可以配置一个微信小程序的参数，文件就是我们要编辑的页面了。补充一下，调用之后获取了经纬度之后，还可以玩玩微信的组件。试着用微信写一个组件。下周公司要搞黑客马拉松了，组里可能会做个小程序。然后看到了mpvue感觉还不错，于是就打算试试水。用vue写小程序听上去美滋滋。那么先开始吧！全局安装 vue-cli $ npm install --global vu...

lauren_liuling 2019-08-22 16:32 评论0 收藏0