微信小程序的简单应用-Todolist

今天开始学微信小程序，做了一个简单的todolist小demo，先上效果图

wxml文件：

<!--index.wxml-->
<view class="container">
  <view class="base">
    <view class="input">
      <input bindinput="oninput" value="{{intupbase}}" ></input>
    </view>
    <view class="button">
      //bindtap绑定点击事件
      <button type="primary" bindtap='onclick'>添加</button>
    </view>
  </view>
  <view>
  </view>
  //遍历数组，用法和vue类似
  <view wx:for='{{list}}' wx:key='index'>
  {{item}}
  <view class="line">-----------------------------------------</view>
  </view>
  <!-- <view>{{test}}</view> -->
</view>

js文件：

//index.js
//获取应用实例
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[],
    intupbase:'',
    test:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },
  /**
   * 获取输入框的值
   */
  oninput:function(e){
   const baseValue= e.detail.value;
  //通过this.setData()将数据渲染到视图层
    this.setData({
     test:baseValue
    });
  },
  /**
   * 点击添加
   */
  onclick:function(){
   this.data.list.push(this.data.test);
   console.log(this.data.list)
   this.setData({
     list:this.data.list,
     intupbase:''
   })
  }
})

wxss文件：

/**index.wxss**/
.input{
  border: 1px solid black;
  padding: 5px 10px;
  width:250px;
  border-radius: 2px;
  margin-left: 10px
}
.base{
  display: flex
}
.button{
  margin-left: 10px
}

特别注意的时，微信小程序没有像vue那样可以双向数据绑定，它是通过this.setData()来把变量渲染到视图层，所以这里要特别注意它的使用