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

先说一下小程序的开发环境之类的基础东西

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

2.appID与没有appID的区别是,appID可以用真机预览,而没有就不行

3.目录解释:

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

a)pages放页面,每个都必须含有js\json\wxml\wxss四个文件。

js文件类似于js文件,json是配置,比如整个页面顶端的名字颜色之类的,wxml类似于html,wxss类似于css。

其中代码格式也相似。

b)utils中放公共js。

c)app开头的三个文件必备。

留言板

1.先写wxml,然后加入class后写样式。通过bindtab绑定js中的函数。在js中添加函数。

index.wxml

<!--index.wxml--> <!--页面的实现,相当于html--> <view> <!--留言区--> <view> <input value='{{inputVal}}' bindinput='changeInputVal' type="text" placeholder='请留言...' placeholder-class='place-input' /> <button size='mini' type="primary" bindtap='addMsg'>添加</button><!--bindtap相当于onclick--> </view> <text>刷新后添加的数据</text> <text wx:if="{{msgData.length==0}}">暂无留言...^_^</text> <!--当留言列表为空时显示本句--> <!--留言列表 --> <view> <view wx:for="{{msgData}}" wx:key="{{index}}"><!--循环显示msgData中的数据,key是必须的,否则会出现警告--> <text>{{item.msg}}</text> <!--item是固定的,msg对应msgData中的名--> <icon data-index="{{index}}" bindtap='deleMsg' type="cancel"></icon> </view> </view> <text>从storage取出的数据</text> <text wx:if="{{msgData1.length==0}}">暂无留言...^_^</text> <!--当留言列表为空时显示本句--> <view> <view wx:for="{{msgData1}}" wx:key="{{index}}"><!--循环显示msgData中的数据,key是必须的,否则会出现警告--> <text>{{item.msg}}</text> <!--item是固定的,msg对应msgData中的名--> <icon data-index="{{index}}" bindtap='deleMsg1' type="cancel"></icon> </view> </view> <button type="primary" size='mini' bindtap='showStorage'>storage</button> </view>

其中wx:if和wx:for都是类似于c:if和c:for的写法。

view类似于div,可以嵌套。

text类似于p,button中的size可以设置大小,type可以选择微信自带的样式

icon是微信自带的图标,有多种。

{{msgData}}是通过嵌套的两个大括号来去js中page{data:{}}中的参数。

wx:key是要写的,不写会出警告。

item是固定的,可以修改的是点后面的参数

2.编写样式:

index.wxss

/**index.wxss**/ /*实现样式,类似于css*/ .msg-box{ padding: 20px; } .send-box{ display: flex; } .input{ border: 1px solid #ccc; padding: 5px; border-radius: 5px; } .msg-info{ display: block; margin: 10px 0 0 0; color: #339900; } .place-input{ color: salmon; } .list-view{ margin: 20px 0 0 0; } .item{ overflow: hidden; border-bottom: 1px dashed #ccc; height: 30px; line-height: 30px; } .text1{ float: left; } .close-btn{ float: right; margin: 5px 5px 0 0; }

基本跟css没什么差别。

3.对应写js,根据wxml中的bindtab或者bindinput之类的绑定事件来进行编写

//index.js //实现函数 Page({ data: { inputVal: "",//留言框内的数据 msgData: [],//所有留言数据 msgData1:"" }, changeInputVal(ev) { this.setData({ inputVal: ev.detail.value//将留言框的数据存储到inputVal中,方便添加留言时获取 }); }, addMsg() { //console.log(this.data.inputVal); var list = this.data.msgData;//获取所有留言 list.push({//向list中添加当前添加的留言 msg: this.data.inputVal }); this.setData({//将所有留言更新到msgData中。 msgData: list, inputVal: ""//清空留言框内的内容 }); /*获取storage中的所有数据*/ var list1 = this.data.msgData1; for(var i=0;i<list.length;i++){ list1.push({ msg:list[i].msg }); } /*把新添加的数据添加到要存入stroage的数组中*/ wx.setStorage({ key: 'msgData1', data: list1, }) /**把数据存至stroage */ var that = this; wx.getStorage({ key: 'msgData1', success: function (res) { that.setData({ msgData1: res.data }); }, }) }, deleMsg(ev) { var list=this.data.msgData; var n = ev.target.dataset.index;//获取当前留言的index list.splice(n, 1);//删除索引号为n的数据 this.setData({//将所有留言更新到msgData中 msgData: list }); }, deleMsg1(ev) { var list = this.data.msgData1; var n = ev.target.dataset.index;//获取当前留言的index list.splice(n, 1);//删除索引号为n的数据 this.setData({//将所有留言更新到msgData中 msgData1: list }); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { /**把storage中的内容取出并赋值给msgData1 */ var that = this; wx.getStorage({ key: 'msgData1', success: function (res) { that.setData({ msgData1: res.data }); }, }) }, })

其中,整个文件必须要有的就是最外层的page({}),自带了许多函数,如onload,可以酌情使用。本例中使用了onload。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/9d4184c54f3a321e76351ba73fd34cda.html