微信小程序实现留言板(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 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
javascript 有趣而诡异的数组
Apr 06 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
vue实现表单录入小案例
Sep 27 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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图片处理之图片背景、画布操作
2014/11/19 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
js中function()使用方法
2013/12/24 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
django创建超级用户过程解析
2019/09/18 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
成考报名单位证明范本
2014/01/16 职场文书
质量承诺书格式
2014/05/20 职场文书
公司委托书范本5篇
2014/09/20 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
综合管理员岗位职责
2015/02/11 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
导游词之无锡古运河
2019/11/14 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python