微信小程序实现留言板(存储)

本文分享微信小程序实现留言板的具体实现方法，供大家参考。具体内容如下

先说一些基本的东西，比如小程序的开发环境

1.从微信公众平台下载开发者工具。装置

2.AppID和没有appID的区别在于，appID可以用真实的机器预览，但不能没有它

3.目录说明：

a)页面放在页面上，每个页面必须包含四个文件：js\json\wxml\wxss。

Js文件类似于js文件，json是配置，比如名字颜色在整个页面的顶部，wxml类似于html，wxss类似于css。

代码格式类似。

b)将公共js放在b)utils中。

c)c)app开头需要三个文件。

留言板：

1.首先编写wxml，然后添加类和编写样式。通过bindtab绑定js中的函数。在js中添加函数。

index.wxml

！- index.wxml -！-页面实现，相当于html-view class=' msg-box '！-消息区-视图类='发送框'输入值=' { { input val } } Bindinput=' changinput val '类=' input '类型=' text '占位符='请留言.placeholder-class=' place-input '/button size=' mini ' type=' primary ' bind tap=' addmsg ' add/button！- bindtap相当于onclick-/viewtext刷新后添加的数据/text text class=' msg-info ' wx : if=' { { msg data . length==0 } } '还没有消息.^_^/text！-当消息列表为空时显示这句话-！-消息列表-视图类='列表-视图'视图类=' item ' wx : for=' { { msg data } } ' wx : key=' { { index } } '！-循环显示msgData中的数据，key是必须的，否则会出现警告-text class=' text 1 ' { item。消息} }/文本！-项是固定的，消息对应于msgData中的名称-图标数据-索引=' {{index}} '类=' close-BTN' bindtap=' delemsg '类型=' cancel '/从存储中提取的图标/视图/视图文本数据/文本文本类=' msg-info ' wx : if=' { { msgData 1。长度==0}} '还没有消息.^_^/text！-当消息列表为空时显示这句话-view class=' list-view ' view class=' item ' wx : for=' { { msgdata 1 } } ' wx : key=' { { index } } '！-循环显示msgData中的数据，key是必须的，否则会出现警告-text class=' text 1 ' { item。消息} }/文本！- item是固定的，msg对应于msgData-icon data-index中的名称=' { { index } } ' class=' close-BTN ' bind tap=' delemsg 1 ' type=' cancel '/icon/view/view按钮类型=' primary ' size=' mini ' bind tap=' show storage ' storage/button/view，其中wx:if和wx:for类似于c:if和c:for。

视图类似于div，可以嵌套。

文字类似p，按钮大小可以设置，类型可以选择微信的样式

图标是微信自带的图标，图标的种类很多。

{{msgData}}通过两个嵌套的大括号引用js中第{ data: { }页的参数。

将写入Wx:key。如果你不写，你会被警告。

项是固定的，点后面的参数可以修改

2.写作风格：

index.wxss

/**index.wxss**//*实现风格，类似于css*/。msg-box { padd : 20px；}.发送盒{ display: flex}.输入{ border: 1px solid # cccpadding: 5pxborder-radius : 5px；}.msg-info { display : }块；margin: 10px 0 0 0color: # 339900}.place-input { color : salmon；}.列表视图{ margin: 20px 0 0}.项目{ overflow:隐藏；border-bottom: 1px虚线# cccheight: 30px线高： 30px；}.text1{左侧浮动：}.close-BTN { float : right；margin: 5px 5px 0 0}与css基本相同。

3.对应编写js，按照绑定事件编写，比如wxml中的bindtab或者bindinput

//index.js//实现函数页({data: {inputval: ' '，//消息框[]中的数据msgdata://所有消息数据msgData1:''}，changinputval(ev){ this。setdata({ inputVal : ev.detail.value//将消息框的数据存储在input val中，方便添加消息时获取})；}，addMsg(){//console . log(this . data . input val)；var list=this . data . MSgdata；//所有消息的list . list . push({//add msg : this . data . input val })；This.setData({//将所有消息更新为msgData。Msgdata :列表，输入val : ' '//清空消息框中的内容})；/*获取存储中的所有数据*/var list 1=this . data . msgdata 1；for(var I=0；ilist.lengthi ){ list1.push({ msg:list[i])。msg })；}/*将新添加的数据添加到要存储在stroge中的数组*/wx . setstorage({ key : ' msg data 1 '，data:List1，})/* *将数据保存到stroge */var=this；wx . getstorage({ key : ' msgdata 1 '，success : function(RES){ that . setdata({ msgdata 1: RES . data })；}，}) }，deleMsg(ev){ var list=this . data . msgdata；var n=ev . target . dataset . index；//获取当前消息的indexlist.split (n，1)；//删除this.setData({//索引号为n({//将所有消息更新到msgData中的msg data : list)})；}，delemsg 1(ev){ var list=this . data . msgdata 1；var n=ev . target . dataset . index；//获取当前消息的indexlist.split (n，1)；//删除this.setData({//索引号为n({//将所有消息更新到msgdata 1: list in msgdata })；}，/* * *生命周期函数-监控页面加载*/onload :函数(选项){/* *取出存储的内容，分配给msgData1 */var即=thiswx . getstorage({ key : ' msgdata 1 '，success : function(RES){ that . setdata({ msgdata 1: RES . data })；}、})}、})其中，整个文件必须有最外层的页面({})，有很多功能，比如onload，可以酌情使用。在这个例子中，使用了onload。

Data用于放置数据，index.js中的数据就是index.wxml可以使用的数据。如果是app.js中的数据，则是全局变量。在wxml中，可以通过getapp()获取全局变量。参数名。

在这个例子中，实现了伴随程序生命周期而存在的msgData和存储在本地缓存中的msgData1。

其他文件的内容可以修改，无需任何修改。至此，这个留言板完成了。

4.您可以修改界面顶部显示的单词

index.json

{ ' navigationBarTitleText ' : '简单消息板' }json文件必须包含最外面的大括号。

如果在app.json中设置，所有没有自定义标题的界面都会显示“简单留言板”

如果在index.json中设置，“简单留言板”只会在index.wxml中显示

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。