今天开始学微信小程序，做了一个简单的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()来把变量渲染到视图层，所以这里要特别注意它的使用
