当前位置：Gxlcms > JavaScript > 微信小程序实现留言板（Storage）

微信小程序实现留言板（Storage）

时间：2021-07-01 10:21:17 帮助过：7人阅读

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

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

1.到微信公众平台下载开发者工具。安装

2.appID与没有appID的区别是，appID可以用真机预览，而没有就不行

3.目录解释：

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

  1. <!--index.wxml-->
  2. <!--页面的实现，相当于html-->
  3. <view class="msg-box">
  4.  <!--留言区-->
  5.  <view class="send-box">
  6.   <input value='{{inputVal}}' bindinput='changeInputVal' class="input" type="text" placeholder='请留言...' placeholder-class='place-input' />
  7.   <button size='mini' type="primary" bindtap='addMsg'>添加</button><!--bindtap相当于onclick-->
  8.  </view>
  9.   <text>刷新后添加的数据</text>
  10.  <text class="msg-info" wx:if="{{msgData.length==0}}">暂无留言...^_^</text>   <!--当留言列表为空时显示本句--> 
  11.  <!--留言列表 -->
  12.   <view class="list-view">
  13.   <view class="item" wx:for="{{msgData}}" wx:key="{{index}}"><!--循环显示msgData中的数据，key是必须的，否则会出现警告-->
  14.    <text class='text1'>{{item.msg}}</text> <!--item是固定的，msg对应msgData中的名-->
  15.    <icon data-index="{{index}}" class="close-btn" bindtap='deleMsg' type="cancel"></icon>
  16.    </view>
  17.  </view>
  18.  
  19.  <text>从storage取出的数据</text>
  20.  <text class="msg-info" wx:if="{{msgData1.length==0}}">暂无留言...^_^</text>   <!--当留言列表为空时显示本句--> 
  21.  <view class="list-view">
  22.   <view class="item" wx:for="{{msgData1}}" wx:key="{{index}}"><!--循环显示msgData中的数据，key是必须的，否则会出现警告-->
  23.    <text class='text1'>{{item.msg}}</text> <!--item是固定的，msg对应msgData中的名-->
  24.    <icon data-index="{{index}}" class="close-btn" bindtap='deleMsg1' type="cancel"></icon>
  25.    </view>
  26.  </view>
  27. <button type="primary" size='mini' bindtap='showStorage'>storage</button>
  28.  
  29. </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

  1. /**index.wxss**/
  2. /*实现样式，类似于css*/
  3. .msg-box{
  4.  padding: 20px;
  5. }
  6. .send-box{
  7.  display: flex;
  8. }
  9. .input{
  10.  border: 1px solid #ccc;
  11.  padding: 5px;
  12.  border-radius: 5px;
  13. }
  14. .msg-info{
  15.  display: block;
  16.  margin: 10px 0 0 0;
  17.  color: #339900;
  18. }
  19. .place-input{
  20.  color: salmon;
  21. }
  22. .list-view{
  23.  margin: 20px 0 0 0;
  24. }
  25. .item{
  26.  overflow: hidden;
  27.  border-bottom: 1px dashed #ccc;
  28.  height: 30px;
  29.  line-height: 30px;
  30. }
  31. .text1{
  32.  float: left;
  33. }
  34. .close-btn{
  35.  float: right;
  36.  margin: 5px 5px 0 0;
  37. }

基本跟css没什么差别。

3.对应写js，根据wxml中的bindtab或者bindinput之类的绑定事件来进行编写

  1. //index.js
  2. //实现函数
  3. Page({
  4.  
  5.  data: {
  6.   inputVal: "",//留言框内的数据
  7.   msgData: [],//所有留言数据
  8.   msgData1:""
  9.  },
  10.   changeInputVal(ev) {
  11.    this.setData({
  12.     inputVal: ev.detail.value//将留言框的数据存储到inputVal中，方便添加留言时获取
  13.    });
  14.   },
  15.   addMsg() {
  16.    //console.log(this.data.inputVal);
  17.    var list = this.data.msgData;//获取所有留言
  18.    list.push({//向list中添加当前添加的留言
  19.     msg: this.data.inputVal
  20.    });
  21.    this.setData({//将所有留言更新到msgData中。
  22.     msgData: list,
  23.     inputVal: ""//清空留言框内的内容
  24.    });
  25.    /*获取storage中的所有数据*/ 
  26.    var list1 = this.data.msgData1;
  27.    for(var i=0;i<list.length;i++){
  28.     list1.push({
  29.      msg:list[i].msg
  30.     });
  31.    }
  32.    /*把新添加的数据添加到要存入stroage的数组中*/ 
  33.    wx.setStorage({
  34.     key: 'msgData1',
  35.     data: list1,
  36.    })
  37.    /**把数据存至stroage */
  38.    var that = this;
  39.    wx.getStorage({
  40.     key: 'msgData1',
  41.     success: function (res) {
  42.      that.setData({
  43.       msgData1: res.data
  44.      });
  45.     },
  46.    })
  47.    
  48.   },
  49.   deleMsg(ev) {
  50.    var list=this.data.msgData;
  51.    var n = ev.target.dataset.index;//获取当前留言的index
  52.    list.splice(n, 1);//删除索引号为n的数据
  53.    this.setData({//将所有留言更新到msgData中
  54.     msgData: list
  55.    });
  56.   },
  57.   deleMsg1(ev) {
  58.    var list = this.data.msgData1;
  59.    var n = ev.target.dataset.index;//获取当前留言的index
  60.    list.splice(n, 1);//删除索引号为n的数据
  61.    this.setData({//将所有留言更新到msgData中
  62.     msgData1: list
  63.    });
  64.   },
  65.  /**
  66.   * 生命周期函数--监听页面加载
  67.   */
  68.  onLoad: function (options) {
  69.   /**把storage中的内容取出并赋值给msgData1 */
  70.   var that = this;
  71.   wx.getStorage({
  72.    key: 'msgData1',
  73.    success: function (res) {
  74.     that.setData({
  75.      msgData1: res.data
  76.     });
  77.    },
  78.   })
  79.  },
  80. })

其中，整个文件必须要有的就是最外层的page({})，自带了许多函数，如onload，可以酌情使用。本例中使用了onload。

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

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

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

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

index.json

  1. {
  2.  "navigationBarTitleText": "简易留言板"
  3. }

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！