⼩程序留⾔板功能源码
⼩程序留⾔板功能源码？先说⼀下环境之类的基础东西
1.到公众平台下载开发者⼯具。安装
2.appID与没有appID的区别是，appID可以⽤真机预览，⽽没有就不⾏
3.⽬录解释：
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 class="msg-box">
<!--留⾔区-->
<view class="send-box">
<input value='{{inputVal}}' bindinput='changeInputVal' class="input" type="text" placeholder='请留⾔...' placeholder-class='place-input' /> <button size='mini' type="primary" bindtap='addMsg'>添加</button><!--bindtap相当于onclick-->
</view>
<text>刷新后添加的数据</text>
<text class="msg-info" wx:if="{{msgData.length==0}}">暂⽆留⾔...^_^</text><!--当留⾔列表为空时显⽰本句-->
<!--留⾔列表 -->
<view class="list-view">
<view class="item" wx:for="{{msgData}}" wx:key="{{index}}"><!--循环显⽰msgData中的数据，key是必须的，否则会出现警告-->
<text class='text1'>{{item.msg}}</text><!--item是固定的，msg对应msgData中的名-->
<icon data-index="{{index}}" class="close-btn" bindtap='deleMsg' type="cancel"></icon>
</view>
</view>
<text>从storage取出的数据</text>
<text class="msg-info" wx:if="{{msgData1.length==0}}">暂⽆留⾔...^_^</text><!--当留⾔列表为空时显
⽰本句-->
<view class="list-view">
<view class="item" wx:for="{{msgData1}}" wx:key="{{index}}"><!--循环显⽰msgData中的数据，key是必须的，否则会出现警告-->
<text class='text1'>{{item.msg}}</text><!--item是固定的，msg对应msgData中的名-->
<icon data-index="{{index}}" class="close-btn" 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;
}
js获取json的key和value基本跟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;
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;
key: 'msgData1',
success: function (res) {
that.setData({
that.setData({
msgData1: res.data
});
},
})
},
})
其中，整个⽂件必须要有的就是最外层的page({})，⾃带了许多函数，如onload，可以酌情使⽤。本例中使⽤了onload。
data⽤来放置数据，在index.js中的数据是index.wxml可以使⽤的数据。如果是在app.js中带有的data，则是全局变量。在wxml中要获取可以通过getapp().参数名来获取全局变量。
本例是实现了随着程序的⽣命周期⽽存在的msgData和存放到本地缓存的msgData1两种。
其他⽂件的内容可以不做任何修改。⾄此，本留⾔板完成。
4.可以修改在界⾯最顶端的显⽰字样
index.json
{
"navigationBarTitleText": "简易留⾔板"
}
json⽂件中必须含有最外层的⼀个⼤括号。
如果是在app.json中设置，那么所有没有⾃定义标题的界⾯都是显⽰“简易留⾔板”
如果是在index.json中设置，那么只有index.wxml中显⽰“简易留⾔板”

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。