微信小程序实现留言板(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模块化是什么及其优缺点介绍
Sep 02 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
php桌面中心(一) 创建数据库
2007/03/11 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Flask之请求钩子的实现
2018/12/23 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Python之pymysql的使用小结
2019/07/01 Python
python爬虫 正则表达式解析
2019/09/28 Python
django实现类似触发器的功能
2019/11/15 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
剪彩仪式主持词
2014/03/19 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
教代会开幕词
2015/01/28 职场文书
学习委员竞选稿
2015/11/20 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python