微信小程序实现留言板(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 相关文章推荐
jquery中:input和input的区别分析
Jul 13 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
微信小程序实现留言板功能
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求小于1000的所有水仙花数的代码
2012/01/10 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
vue实现购物车列表
2020/06/30 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
Python中内建模块collections如何使用
2020/05/27 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
竞选演讲稿范文大全
2014/05/12 职场文书
购房委托书范本
2014/09/18 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书