微信小程序的学习

微信小程序的开始尝试 TodoList


微信开发者工具生成 目录如下:


  1. .
  2. |-- app.js
  3. |-- app.json
  4. |-- app.wxss
  5. |-- pages
  6. | |-- index # 主页
  7. | | |-- index.js
  8. | | |-- index.json
  9. | | |-- index.wxml
  10. | | `-- index.wxss
  11. | `-- log # 日志页面
  12. | | |-- log.js
  13. | | |-- log.json
  14. | | |-- log.wxml
  15. | | `-- log.wxss
  16. `-- utils # 工具
  17. `-- util.js

大体为:
每一个page即是一个页面文件 ,每个页面有一个js/wxml/wxss/json文件 规定:描述页面的这四个文件必须具有相同的路径与文件名。

全局下同路,为公共的逻辑,样式,配置

与html不同:用view text navigator 代替 div span a
官方文档

*.wxml: 数据驱动的视图层 + 微信提供了大量的组件 表单 导航 媒体 ...

好,那现在正式尝试TodoList~


开始完成wxml ,我在这里主要分成三部分
1.titleBar

<view class="titleBar">


  1. &lt;div class="status"&gt;
  2. &lt;!-- wxml 是一个模板 {{数据状态}} 数据的绑定
  3. 动态的 可编译的 活的 data 是活的 setData 只要状态一变 界面立即改变 --&gt;
  4. &lt;text class="{{status=='1'?'active':''}}" data-status="1" bindtap="showStatus"&gt;全部&lt;/text&gt;
  5. &lt;!--用data- 表示数据属性--&gt;
  6. &lt;text class="{{status=='2'?'active':''}}" data-status="2" bindtap="showStatus"&gt;未完成&lt;/text&gt;
  7. &lt;text class="{{status=='3'?'active':''}}" data-status="3" bindtap="showStatus"&gt;已完成&lt;/text&gt;
  8. &lt;/div&gt;
  9. &lt;div class="add"&gt;
  10. &lt;button class="mini-btn" size="mini" type="warn" bindtap="addTodoShow"&gt;添加&lt;/button&gt;
  11. &lt;/div&gt;

</view>

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

<scoll-view scroll-y class="lists">


  1. &lt;view class="item" wx:for="{{curLists}}" wx:key="index"&gt;
  2. &lt;div class="content"&gt;
  3. &lt;icon class="icon-small" bindtap="changeTodo" data-item="{{index}}" size="23" type="{{item.status ==='1'? 'success':'circle'}}"&gt;&lt;/icon&gt;
  4. &lt;text class="title"&gt;{{item.title}}&lt;/text&gt;
  5. &lt;text class="time"&gt;{{item.time}}&lt;/text&gt;
  6. &lt;/div&gt;
  7. &lt;/view&gt;

</scoll-view>

3/addForm

<view class="addForm {{addShow?'hide':''}}">


  1. &lt;view class="addForm-div"&gt;
  2. &lt;input type="text" placeholder="请输入任务" class="weui-input" bindinput="setInput" value="{{addText}}" /&gt;
  3. &lt;view class="addForm-btn"&gt;
  4. &lt;button type="warn" size="mini" class="weui-btn mini-btn" bindtap="addTodo"&gt;确定添加&lt;/button&gt;
  5. &lt;button type="default" size="mini" class="weui-btn mini-btn" bindtap="addTodoHide"&gt;取消&lt;/button&gt;
  6. &lt;/view&gt;
  7. &lt;/view&gt;
  8. &lt;/view&gt;

</view>


wxml 是一个模板 {{数据状态}} 数据的绑定


  1. 动态的 可编译的 活的 data 是活的 setData 只要状态一变 界面立即改变
  2. 我们在这里使用了data 来表示数据属性

写完了wxml 那让我们加上wxss样式看看效果把

TodoList wxss

在wxss中我们使用了弹性布局flex:1, 这种布局的方式使得我们不用计算大小了

我们当然不能只做一个切图仔啦


话不多说看看js的实现部分

数据 对应着 界面状态


  1. 默认的status1是全部
  2. setData改变 比如改成2 setData 2 已完成 3 未完成

界面状态,全部被data接管起来
当前点击条目的status要变成 success 数据 lists 跟当前条目相关的数据
将status的值 更新为 1


这样一个简单的TodoList框架就做好了

初学微信小程序 TodoList的更多相关文章

  1. 初学微信小程序

    最近微信推出了微信小程序,为此我学了几天,基本了解了组件及简单语法,但是今天我自己想要独立写一个demo时,忽然发现难道我的不是微信小程序的语法(我以前是iOS 开发,不用css),而是css样式的设 ...

  2. 初学微信小程序——配置问题(1)

    一.注册: 微信小程序账号注册:登录https://mp.weixin.qq.com  点击“立即注册”->”小程序” 注册完成后,下载微信小程序开发者工具: 依次点击:“首页”->“文档 ...

  3. 微信小程序-TodoList

    TodoList 博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE2020 作业要求 https://edu.cnblogs.com/campus/zjcsx ...

  4. 初学微信小程序——配置问题(2)

    六.生命周期函数:   在微信公众平台指南中搜索生命周期,找到页面生命周期 比如,我打开cate.js并编写,代码如下: ** * 生命周期函数--监听页面加载 */ onLoad: function ...

  5. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  6. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  7. 小程序——微信小程序初学踩过的坑

    微信小程序初学踩过的坑 一.前言     最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...

  8. 微信小程序的应用及信息整合,都放到这里了

    微信小程序终于开始公测了,这篇文章也终于可以发布了. 这篇文章可以说是微信小程序系列三部曲最后一篇.8 月份,小程序推出前,我写了<别开发 app 了>详细阐述了为什么创业应该放弃原生 a ...

  9. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

随机推荐

  1. CentOS中设置Windows共享文件夹

    在CentOS中设置Samba可实现和Windows共享文件夹.常见的需求:1)用户能够在Windows机器上通过共享文件夹访问远程Linux服务器上自己的主目录:2)用户能够在Windows机器上访 ...

  2. Centos 下php安装配置xdebug扩展

    2018年05月02日 19:54:42 杨汉松 阅读数:44   1.下载安装xdebug 获取xdebug wget http://www.xdebug.org/files/xdebug-2.3. ...

  3. shiro 登录

    @Controllerpublic class LoginController { @RequestMapping(value="/login") public @Response ...

  4. 员工管理系统(集合与IO流的结合使用 beta3.0 BufferedReader / ObjectOutputStream)

    Employee.java package cn.employee_io; public class Employee { private String empId; private String n ...

  5. 转 Docker 组件如何协作?- 每天5分钟玩转容器技术(8)

    http://www.cnblogs.com/CloudMan6/p/6774519.html 记得我们运行的第一个容器吗?现在通过它来体会一下 Docker 各个组件是如何协作的. 容器启动过程如下 ...

  6. .vue文件在phpstorm中红线解决办法

    主要原因是js版本太低, 1,安装vue.js插件, 2,设置file type,vue.js添加 *.vue, 3,切换js版本为es6,

  7. javascript之input获取的时间减1秒&&t时间恢复

    将输入得到的时间减少1秒:20:00:00  ———  19:59:59    方法一:普通时间转换 endDateMap(date){ var h = new Date(date).getHours ...

  8. 如何向妻子解释OOD (转)

       此文译自CodeProject上<How I explained OOD to my wife>一文,该文章在Top Articles上排名第3,读了之后觉得非常好,就翻译出来,供不 ...

  9. springmvc 获取数组

    spingmvc 获取数据有这几种方式:1.通过HttpRequestServlet的方法获取数据.2.form表单传递对象字段,springmvc自动获取.3.ajax 请求通过注解的方式直接获取数 ...

  10. 基于ANGULAR.JS的下一代WEB应用开发-01-yeoman

    Angularjs 个人认为这是一款很好的框架!它将我们从AJAX应用的开发中解救了出来!嗯....废话就说道这里下面我们开始把! 首先我们必须了解一些核心的概念: 客户端模版 MVC 数据绑定 依赖 ...