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


Posted in Javascript onNovember 02, 2018

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

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

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 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;
}

基本跟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。

data用来放置数据,在index.js中的数据是index.wxml可以使用的数据。如果是在app.js中带有的data,则是全局变量。在wxml中要获取可以通过getapp().参数名来获取全局变量。

本例是实现了随着程序的生命周期而存在的msgData和存放到本地缓存的msgData1两种。

其他文件的内容可以不做任何修改。至此,本留言板完成。

4.可以修改在界面最顶端的显示字样

index.json

{
 "navigationBarTitleText": "简易留言板"
}

json文件中必须含有最外层的一个大括号。

如果是在app.json中设置,那么所有没有自定义标题的界面都是显示“简易留言板”

如果是在index.json中设置,那么只有index.wxml中显示“简易留言板”

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

Javascript 相关文章推荐
JavaScript 高级语法介绍
Jun 15 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
js获取json元素数量的方法
Jan 27 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
微信小程序实现留言板功能
Nov 02 #Javascript
小程序实现留言板
Nov 02 #Javascript
js中的闭包实例展示
Nov 01 #Javascript
微信小程序实现登录遮罩效果
Nov 01 #Javascript
在vue里使用codemirror遇到的问题
Nov 01 #Javascript
vue中使用codemirror的实例详解
Nov 01 #Javascript
vue-lazyload使用总结(推荐)
Nov 01 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
详解Python文本操作相关模块
2017/06/22 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
妇女儿童发展规划实施方案
2014/03/16 职场文书
化妆品活动策划方案
2014/05/23 职场文书
质量负责人任命书
2014/06/06 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
课题研究阶段性总结
2015/08/13 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL