此次编写留言,记事本demo,涉及到的小程序的技术主要是存入缓存和读取缓存。还有小程序基本组件知识。
wxml代码如下:!--pages/test/test.wxml--textpages/test/test.wxml/textview class="mes_view"input type="text" placeholder="请输入留言内容" bindinput="getval"/button size="mini" bindtap="sbumit" 提交/button/viewview class="mes_list" ul li wx:for="{{meslist}}" wx:for-item="item"{{item.mes}} icon data-index="{{index}}" class="rightClass" type="cancel" size="16" bindtap="dellist" //li /ul/view
data初始化数据如下:// pages/test/test.jsPage({ /** * 页面的初始数据 */ data: { getval:'', hello:'hello', meslist:[] },
input框中填写内容时触发bindinput 执行getval函数,getval函数获取input框中的值赋值给data的getval,代码如下:getval:function(e){ this.setData({ getval:e.detail.value }) },
点击提交时,执行submit函数,首先将data的meslist数据赋值给变量list进行存储,每次提交时,将获取到的mes:data.getval值用数组push函数,自动添加到最后一行。
最后将得到的list数组信息赋值给meslistsbumit: function (options) { var that =this; console.log('-----设置前-------'); console.log(that.data.getval); var list = that.data.meslist; list. push({ mes:that.data.getval}); that.setData({ meslist:list }); },
数据删除按钮,给按钮icon提供一个变量信息index,当进行循环输出时,index自增,用来区分不同留言信息。data-index="{{index}}"
点击删除按钮时,执行dellist函数,获取页面上的index值,区分要删除的留言数。
首先将目前的留言条数赋值给newlist,对newlist进行删除用户点击的具体信息,用的是splice函数。此函数的返回值是删除的该元素信息,因此不可直接赋值。dellist:function(res){ var u =res.target.dataset.index; var newlist = this.data.meslist; newlist.splice(u,1); // var newlist = this.data.meslist.splice(u,1); // 这样的方法是错误的,splice方法返回的是被删除的元素, this.setData({ meslist:newlist }); },
onHide函数为生命周期函数--监听页面隐藏,当页面隐藏时,将用户信息存储到缓存中,key为查找的关键字。onHide: function () { var res = this.data.meslist; console.log('页面隐藏了'); wx.setStorage({ key:"meslist", data:res, success: function(res) { console.log('存储缓存成功') } }) },
从缓存中取数据,当打开页面时,执行onLoad函数,获取缓存,缓存数据的结果存放在res.data中,同时改变页面显示内容,用setData函数。/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log('页面显示了'); var that = this; wx.getStorage({ key: 'meslist', success: function(res) { console.log(res.data) that.setData({ meslist:res.data }) } }) },
整个demo功能比较简单,用到的知识也是小程序常用的,这个小demo做出后,对小程序的理解也加深了一步。
补充,完善功能点:测试demo时,发现,留言提交后,input框的内容不会进行改变,点击提交还会无限提交,效果非常不好。
因此修改了这个bug。
wxml代码如下:viewclass="mes_view"inputtype="text"placeholder="请输入留言内容"bindinput="getval"value="{{inputval}}"/buttonsize="mini"bindtap="sbumit" 提交/button/view
给value加了一个变量,当value值为空的时候placeholder的值才会出现。data: { getval:'', hello:'hello', meslist:[], inputval:""},
js代码如下:sbumit: function(options) {var that =this; console.log('-----设置前-------'); console.log(that.data.getval);var list =that.data.meslist;if(that.data.getval){ list. push({ mes:that.data.getval}); that.setData({ meslist:list, inputval:"", getval:""}); }else{ wx.showModal({ title:'提示', content:'请输入留言内容', }) } },
点击提交时,先判断,value值是否有值,没有值直接弹出窗口提示。有值时执行下一步操作,此处记住setData的时候,一定要将inputval和getval两个值初始化,设为空。
因为在进行了一次提交时,getval值已经取得值,因此,如果getval不初始化,仍然可以提交。此处研究了半个小时。