简单的留言板功能一个界面即可，所以先创建一个liuyan目录，再创建一个page

结构如图：

既然入门，那干脆就把入门知识点过一下，页面跳转：

在初始index.wxml下有这样的例子：（index和app开头自带的东西就不一一介绍了）

<!--index.wxml-->
<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view>//下面是修改的部分<view class="usermotto"><navigator url='../liuyan/liuyan'><text class="user-motto">{{motto}}</text></navigator></view></view>

当然，上面页面用的是navigator表签，还可以用函数绑定的方法，具体可以阅读这篇详细查看：

https://www.cnblogs.com/yaoyuqian/p/7967472.html

现在进入liuyan的目录下进行编辑：

学过html的小伙伴可以这样理解微信小程序的元素：
div = view

js语法都一样，如果学习过vue，再学这个简直就是秒转型。

先写好界面样式和布局：

liuyan.wxml: (wx:for用来遍历liuyan.js中的数据，测试展示)

<!--pages/liuyan/liuyan.wxml--><view><view  class="head"><input type='text' class="print" bindinput='bindread' placeholder='请输入。。。'/><button  calss="liuyan" type='primary'>留言</button></view><view class='listview'><view class="item" wx:for="{{msgData}}"><text class='show'> 1111</text><button class='delete' type='default' size='mini'>删除</button></view></view>
</view>

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:

<!--pages/liuyan/liuyan.wxml--><view><view  class="head"><input type='text' class="print" bindinput='bindread' value='{{inputVal}}' placeholder='请输入。。。'/><button  calss="liuyan" type='primary' bindtap='addmsg'>留言</button></view><view class='listview'><view class="item" wx:for="{{msgData}}" wx:key="{{index}}"><text class='show'>{{item.msg}}</text><button class='delete' type='default' size='mini'>删除</button></view></view>
</view>

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:''});}})

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

微信小程序入门-简单留言板相关推荐

微信小程序入门-简单页面编写
前言今天微信小程序正式上线,抱着学习新技术的心态开始第一次接触微信小程序,无论外面怎么吹微信小程序怎么干掉大量的原生的app,作为一个新的事物,存在就必定有其存在的价值,作为一个学习者要保持一个正确 ...
做一个微信小程序给TA——程序猿小白的情人节礼物（微信小程序入门——一文学会小程序开发到发布小程序的全过程）
# 情人节可送给女朋友的礼物,或者作为两人的纪念 # 效果展示:微信搜索 "王美美与曾小帅" 小程序即可查看效果 # 微信小程序入门--使用免费后端云(Bmod)搭建留言板 ...
【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
天河微信小程序入门《四》：融会贯通，form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
微信小程序入门---01
目录微信小程序入门一.小程序简介二.第一个小程序二.小程序代码的构成三.WXML模块四.WXSS 样式五.JS 逻辑交互六.组件七.API 八.WXML 模板语法 - 数据绑定九. ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...
从零开始的微信小程序入门教程(一)
从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...

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

简单的留言板功能一个界面即可，所以先创建一个liuyan目录，再创建一个page

既然入门，那干脆就把入门知识点过一下，页面跳转：

现在进入liuyan的目录下进行编辑：

学过html的小伙伴可以这样理解微信小程序的元素：
div = view

js语法都一样，如果学习过vue，再学这个简直就是秒转型。

先写好界面样式和布局：

以上还属于静态界面，下面开始书写事件函数。

给xml中留言绑定函数： bindinput类似于 h5 中 oninput事件，监听输入框的内容。

当用户点击留言：

效果展示：

删除操作就留给入坑的同学练手了。

liuyan.wxml:

liuyan.wxss:

liuyan.js:

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

微信小程序入门-简单留言板相关推荐

最新文章

热门文章

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

简单的留言板功能一个界面即可，所以先创建一个liuyan目录，再创建一个page

既然入门，那干脆就把入门知识点过一下，页面跳转：

现在进入liuyan的目录下进行编辑：

学过html的小伙伴可以这样理解微信小程序的元素： div = view

js语法都一样，如果学习过vue，再学这个简直就是秒转型。

先写好界面样式和布局：

以上还属于静态界面，下面开始书写事件函数。

给xml中留言绑定函数： bindinput类似于 h5 中 oninput事件 ，监听输入框的内容。

当用户点击留言：

效果展示：

删除操作就留给入坑的同学练手了。

liuyan.wxml:

liuyan.wxss:

liuyan.js:

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

微信小程序入门-简单留言板相关推荐

最新文章

热门文章

学过html的小伙伴可以这样理解微信小程序的元素：
div = view

给xml中留言绑定函数： bindinput类似于 h5 中 oninput事件，监听输入框的内容。