微信小程序做留言板是不是需要服务器,微信小程序--留言板

微信小程序 — — 留言板的实现方式

主要功能点：

富文本的边框可以自动匹配屏幕大小；

显示富文本中输入的字数；

获取富文本中的内容，提交留言；

提交留言后的弹窗；

对应的.wxml内容

注意：

富文本是通过嵌套在表单内的方式，显现出来。

{{currentWordNumber|0}}/{{max}}

提交留言

对应的.wxss内容

注意：

要重写textarea标签选择器，主要就是width属性，否则本文框显示不对。

.view-liuyan {

margin: 25rpx;

border-style: solid;

border-width: 2rpx;

border-color: #ccc;

}

textarea {

cursor: auto;

/* 主要就是重写它 */

width: 700rpx;

height: 250rpx;

display: block;

position: relative;

}

/* 显示输入字符 */

.currentWordNumber {

position: absolute;

bottom: 40rpx;

right: 26rpx;

color: #888;

}

对应的.js内容

注意：

《实时显示输入字数》与《获取富文本内容并提交》是分开写的。

// 获取富文本中的内容，并提交留言

bindFormSubmit: function(e) {

var that = this;

// 获取输入的内容

var value = e.detail.value.textarea;

if (value.length < 4) {

wx.showModal({

title: '提示',

content: '字数少于4个字',

})

} else {

// 提交留言

wx.request({

// 传到自己的服务器上

url: 'xxx.com',

method: 'POST',

// 。。。。。。。

})

// 提交完成后的显示

wx.showToast({

title: '感谢留言',

icon: 'success',

duration: 2000

})

}

},

// 实时显示输入字数

bindInputText: function(e) {

var that = this

var value = e.detail.value;

var len = parseInt(value.length);

if (len > that.data.noteMaxLen) return;

that.setData({

currentWordNumber: len

})

}

显示效果：

更具体的效果显示，可以去我的小程序看看效果哦，就在留言中。

感觉有用的小伙伴，点个赞再走撒~