微信小程序入门-简单留言板
简单的留言板功能一个界面即可，所以先创建一个liuyan目录，再创建一个page
结构如图：
既然入门，那干脆就把入门知识点过一下，页面跳转：
在初始index.wxml下有这样的例子：（index和app开头自带的东西就不一一介绍了）
{{userInfo.nickName}}
//下面是修改的部分
{{motto}}
当然，上面页面用的是navigator表签，还可以用函数绑定的方法，具体可以阅读这篇详细查看：
https://www.cnblogs.com/yaoyuqian/p/7967472.html
现在进入liuyan的目录下进行编辑：
学过html的小伙伴可以这样理解微信小程序的元素：
div = view
js语法都一样，如果学习过vue，再学这个简直就是秒转型。
先写好界面样式和布局：
liuyan.wxml: (wx:for用来遍历liuyan.js中的数据，测试展示)
1111
liuyan.wxss: flex是盒模型布局，不了解的话，关注我的博客里有相关介绍。
/* pages/liuyan/liuyan.wxss */
.head{
display: flex;
margin: 10px;
align-items: center;
}
.print{
border: 1px solid black;
padding: 5px;
flex-grow: 1;
border-radius:5px ;
margin: 10px
}
.liuyan{
width: 10px;
}
.listview{
}
.item{
display: flex;
width: 100%;
border-bottom: 1px dashed #ccc;
align-items: center;
}
.show{
padding-left: 20px;
line-height: 30px;
flex-grow: 1;
}
.delete{
margin-right: 20px
}liuyan.js: 自带的函数是生命周期函数，都可以清空。
// pages/liuyan/liuyan.js
Page({
/**
* 页面的初始数据
*/
data: {
msgData:[
{msg:"xxxx"},
{ msg: "xxxx" },
{ msg: "xxxx" }
]
},
})页面展示如图：
以上还属于静态界面，下面开始书写事件函数。
给xml中留言绑定函数： bindinput类似于 h5 中 oninput事件 ，监听输入框的内容。
监听数据并存储：
当用户点击留言：
先用list 存储当前msgData，在list中添加集合，再给msgData赋值,这是微信小程序的一个特点。
效果展示：
删除操作就留给入坑的同学练手了。
最后有些代码不完全，我重新贴一下：
liuyan.wxml:
{{item.msg}}
liuyan.wxss:
/* pages/liuyan/liuyan.wxss */
.head{
display: flex;
margin: 10px;
align-items: center;
}
.print{
border: 1px solid black;
padding: 5px;
flex-grow: 1;
border-radius:5px ;
margin: 10px
}
.liuyan{
width: 10px;
}
.listview{
}
.item{
display: flex;
width: 100%;
border-bottom: 1px dashed #ccc;
align-items: center;
}
.show{
padding-left: 20px;
line-height: 30px;
flex-grow: 1;
}
.delete{
margin-right: 20px
}liuyan.js:
// pages/liuyan/liuyan.js
Page({
/**
* 页面的初始数据
*/
data: {
inputVal:'',
msgData:[
{msg:"xxxx"},
{ msg: "xxxx" },
{ msg: "xxxx" }
]
},
bindread(ev){
this.setData({
inputVal:ev.detail.value
});
},
addmsg(){
var list = this.data.msgData;
list.push({
msg:this.data.inputVal
});
this.setData({
msgData:list,
inputVal:''
});
}
})简单的入门案例，不喜勿喷。有什么问题留言我会及时回答。