微信小程序入门-简单留言板

简单的留言板功能一个界面即可，所以先创建一个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:''
    });
  }
 
})

简单的入门案例，不喜勿喷。有什么问题留言我会及时回答。