微信小程序做留言板mysql_微信小程序实现留言板

本文展示了如何使用微信小程序创建一个留言板应用,包括CSS样式、JS交互逻辑和数据处理,允许用户选择预设留言或自定义输入,并将信息发送到服务器。
摘要由CSDN通过智能技术生成

本文实例为大家分享了微信小程序实现留言板的具体代码,供大家参考,具体内容如下

21bda43ca4b6b9a6aa78374e016eb9d1.png

CSS:

/* pages/order/message2/message2.wxss */

.msg-box{

padding: 20px;

}

.send-box{

display: flex;

}

.input{

border: 1px solid #B0C4DE;

padding: 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 #87CEFF;

height: 30px;

line-height: 30px;

}

.text1{

float: left;

}

.close-btn{

float: right;

margin: 5px 5px 0 0;

}

js:

const app = getApp();

Page({

/**

* 页面的初始数据

*/

data: {

msgData:

[

{

child_id: 1,

msg:

"我想做个眉毛,到店后求推荐。",

checked:''

},

{

child_id: 2,

msg:

"我只有2小时,您看着安排吧。",

checked: ''

},

{

child_id: 3,

msg:

"我和朋友一起过来。",

checked: ''

},

{

child_id: 4,

msg:

"美甲样式到店挑选。",

checked: ''

},

{

child_id: 5,

msg:

"给眉毛再补个颜色。",

checked: ''

},

{

child_id: 6,

msg:

"我要补睫毛哦。",

checked:''

}

],

message: '',

message_id:[],

},

bindTextAreaChange: function(e){

var that = this

that.setData({

message:e.detail.value

})

},

click:function(e){

var that = this;

let id = e.currentTarget.dataset.id;

let index = e.currentTarget.dataset.index;

var value = [];

value = this.data.message_id;

var array_i = this.in_array(id, value);

var chekeds = that.data.msgData;

var msg = chekeds[index].msg;

var message = that.data.message;

if (!e.currentTarget.dataset.checked){

chekeds[index].checked = true

that.setData({

message: message + msg

})

}else{

chekeds[index].checked = false

that.setData({

message: message.replace(msg, '')

})

}

that.setData({

msgData: chekeds

})

if (array_i) {

value.splice(array_i, 1);

} else {

value.push(id);

}

this.setData({

message_id: value,

})

},

in_array: function (search, array) {

for (var i in array) {

if (array[i] == search) {

return i;

}

}

return false;

},

submit:function(){

var value = [];

var message = this.data.message;

var msgData = this.data.msgData;

if (message == '' && !value.length) {

wx.showToast({

title: '暂无选择项目',

icon:'none'

})

return;

}

app.globalData.message = message;

for (var i = 0; i < msgData.length; i++) {

if(message.indexOf(msgData[i].msg) > -1){

value[i] = msgData[i].child_id;

}

}

wx.request({

url: 'https://www.omeiclub.com/app/public/index.php/index/index/server',

method: 'POST',

data: { message_id: value, openId: app.globalData.openId, message: message, token: app.globalData.token},

header: {

'Accept': 'application/json'

},

success: function (res) {

if(res){

// wx.showToast({

// title: '捎话成功',

// success:function(){

// }

// })

wx.switchTab({

url: '/pages/order/order',

success: function (e) {

var page = getCurrentPages().pop();

if (page == undefined || page == null) return;

page.onLoad();

}

})

app.globalData.message = message;

}

console.log(res)

}

})

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that = this;

wx.request({

url: 'https://www.omeiclub.com/app/public/index.php/index/index/serversle',

method: 'POST',

data: { openId: app.globalData.openId, token: app.globalData.token},

header: {

'Accept': 'application/json'

},

success: function (res) {

if (res.data){

var message_id = res.data.message_id;

var value = that.data.msgData;

var message = res.data.message;

that.setData({

message: message

});

for (var i = 0; i < value.length;i++) {

if (that.in_array(value[i].child_id, message_id)) {

value[i].checked = true;

that.setData({

msgData: value,

});

}

}

}

}

})

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

html

快速捎话:

{{item.msg}}

捎话

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值