微信小程序实现留言板(Storage)
作者:Evilinzz 发布时间:2024-04-16 09:31:16
本文为大家分享了微信小程序实现留言板的具体实现方法,供大家参考,具体内容如下
先说一下小程序的开发环境之类的基础东西
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
<!--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中显示“简易留言板”
来源:https://blog.csdn.net/qq_37370501/article/details/80943432
猜你喜欢
- 本文实例讲述了Python基于列表模拟堆栈和队列功能。分享给大家供大家参考,具体如下:之前的文章https://www.jb51.net/a
- 本文实例讲述了python协程用法。分享给大家供大家参考。具体如下:把函数编写为一个任务,从而能处理发送给他的一系列输入,这种函数称为协程d
- IE测试通过,FF有点小BUGCls_Leibie.asp代码如下:<% '数据库字段为类属性,添加、删除、修改、操
- python简单的学生信息管理系统-文件版,供大家参考,具体内容如下功能如下主函数部分增加学生信息修改学生信息删除学生信息查询学生显示所有学
- 一、SQL 连接(JOIN)1、笛卡尔积(1)当多张表进行连接查询,没有任何条件限制的时候,最终查询结果条数,是多张表条数的乘积如A表15条
- 前言上篇文章 一文掌握 Go 文件的读取操作 介绍了如何使用 Go os 包和 bufio 包里的几个函数和方法,通过案例展示如
- 映射Go编程提供的一个重要的数据类型就是映射,唯一映射一个键到一个值。一个键要使用在以后检索值的对象。给定的键和值,可以在一个Map对象存储
- 1、切片使用切片来实现列表的倒序排序,mylist[start:end:step],不改变原列表。#!/usr/bin/env python
- 四、 用户注册(reg.php)在看用户注册之流程之前,我把表的用途做个简单说明,现在只是大概的说明,后面我们再仔细了解,大家可以记下这个说
- 在获取贝壳分的时候用到了时间处理函数,想要获取上个月时间包括年、月、日等# 方法一:today = datetime.date.today(
- 一、需求分析我们首先有一个成绩表单,但是学生的成绩是按照学号进行排序的,现在,我们希望清晰明了的知道每一个学生的名次,并且需要将学生按照成绩
- 条条框框的报表页面枯燥乏味?不妨给页面加点“新意”!前阵子,在看天气预报的时候,发现免费天气预报的调用代码,瞬间想到可以给我开发的报表“润润
- arguments.callee关于callee的解释:callee 是 arguments 对象的一个属性。可以用于引用该函数的函数体内当
- 处理下拉列表需要使用selenium中的工具类Select,常用方法如下:示例网站:http://sahitest.com/demo示例场景
- pyc的破解相对容易,使用cython将python文件编译成.so文件,能在一定程度上增强python源码的私密性。编译成.so文件环境准
- 1.环境mysql 8.0Django 3.2pycharm 2021.112. (No changes detected)及解决2.1 问
- 持久化文件读写:f=open('info.txt','a+')f.seek(0)str1=f.read()i
- SQL中Case的使用方法Case具有两种格式。简单Case函数和Case搜索函数。--简单Case函数CASE sex &nbs
- 算法优缺点:优点:容易实现缺点:可能收敛到局部最小值,在大规模数据集上收敛较慢使用数据类型:数值型数据算法思想k-means算法实际上就是通
- 简述mat参照了函数设计,plot表示绘图的作用,lib则表示一个集合。今年在开源社区的推动下,Matplotlib在科学计算领域得到了广泛