微信小程序todo案例

一.微信小程序基本语法

<text></text>//它是相当于thlm在这里插入代码片中的span标签
<view></view>//它是相当于html中的div标签
<block></block>//它不会渲染到页面上相当于模板占位符

二.数组方法

1.wx:for 就是循环遍历数组（注意:它必须配合wx:key来使用，否则编辑器会报语法错误）**
2.wx:if 语法判断
wx.elif 相当于js中的if-else一个道理

三.微信开发者工具简单的介绍

 1.app.json中的介绍
	 "pages":[
		"pages/home/home",
		"pages/index/index",
		"pages/logs/logs"

]
它是用来设置页面路由的，那个路径在前面就那个页面先显示

2.整个页面的头部样式（可以自行修改）

  "window":{
    "backgroundTextStyle":"light", //下来刷新（查看官网）
    "navigationBarBackgroundColor": "#fff",  //字体颜色
    "navigationBarTitleText": "Weixin",  
    "navigationBarTextStyle":"black"  //下拉刷新颜色
  },

3.tab栏的设置（具体查看官网）注意不能少于2个tab否则会报错，最多就5个

"tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "assets/tabbar/home.png",
      "selectedIconPath": "assets/tabbar/home_active.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "购物车",
      "iconPath": "assets/tabbar/cart.png",
      "selectedIconPath": "assets/tabbar/cart_active.png"
    }
  ]
  },

基本语法的联系

//这里面的东西在你建设路由时自己会创建一个文件夹比如是建一个home页面，里面有四个东西常用的分别是 写逻辑代码：home.js文件中 html页面代码 home.wxml文件中 写页面样式 home.wxss


//逻辑代码
 data: {
    msg:"小花",
    list:'小花同学',
    add:[
      {name:"小花",age:18,zy:'学生'},
      {name:"小花同学",age:18,zy:'学生'},
    ],
    adds:"",
    todo:[],
    good:"小花同学"
  },

//html结构代码
<!-- text她是属于html的span标签 -->
<text>{{msg}}</text>
<text>{{msg}}</text>
<!-- view她是属于html的div标签 -->
<view>{{list}}</view>
<!-- wx:if -->
<text wx:if="{{true}}">小花</text>
<view wx:elif="{{false}}">小花同学</view>
<block wx:for="{{add}}" wx:key="index">
<view>
  索引值{{index+1}}
  姓名{{item.name}}
  年龄:{{item.age}}
  职业:{{item.zy}}
</view>
</block>

todolist案例练习

<input type="text"  
class="tot"
bindinput="getlist"
placeholder="请输入你要输入的内容"/>
<block>
  <view class="a" wx:for="{{todo}}" wx:key='index'>
    <text>{{item}}</text>
    <button class="sc" bindtap="sc" data-index="{{index}}">删除</button>
  </view>
</block>
<button bindtap="add">添加留言</button>

//获取input框的内容
 getlist(e){
    // console.log(e)
    let adde = e.detail.value
    // console.log(adde)
    this.setData({
      adds:adde
    })
  },
  //添加
  add(){
    this.data.todo.push(this.data.adds)
    console.log(this.data.todo)
    this.setData({
        todo:this.data.todo
    })
  },
  //删除
  sc(e){
    console.log(e)
    let todo = this.data.todo
    let index = e.currentTarget.dataset.index
    console.log(index)
    todo.splice(index,1)
    this.setData({
      todo:todo
    })
  },