最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
小程序社区 首页 教程 查看内容

微信小程序留言板功能源码

Rolan 2019-2-19 00:53

微信小程序留言板功能源码?先说一下小程序开发环境之类的基础东西1.到微信公众?#25945;?#19979;载开发者工具。安装2.appID与没有appID的区别是,appID可以用真机预览,而没有就不行3.目录解释:a)pages放页面,每个都必须含有 ...

微信小程序留言板功能源码?先说一下小程序开发环境之类的基础东西

1.到微信公众?#25945;?#19979;载开发者工具。安装

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

3.目录解释:

a)pages放页面,每个都必须含有js\json\wxml\wxss四个文件。

js文件类似于js文件,json是配置,比如整个页面顶?#35828;?#21517;字颜色之类的,wxml类似于html,wxss类似于css。

其中代码格式也相似。

b)utils中放公共js。

c)app开头的三个文件必?#28014;?/p>

留言板:

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> <!--当留言列表为?#24080;?#26174;示本句-->
<!--留言列表 -->
<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> <!--当留言列表为?#24080;?#26174;示本句-->
<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可以选择微信?#28304;?#30340;样式

icon是微信?#28304;?#30340;图标,有多种。

{{msgData}}是通过嵌套的两个大括号来去js中page{data:{}}中的?#38382;?/p>

wx:key是要写的,不写会出警告。

item是固定的,可以修改的是点后面的?#38382;?/p>

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之类的绑定?#24405;?#26469;进行编写

复制代码
//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?#23567;?/span>
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);//?#22659;?#32034;引号为n的数据
this.setData({//将所有留言更新到msgData中
msgData: list
});
},
deleMsg1(ev) {
var list = this.data.msgData1;
var n = ev.target.dataset.index;//获取当前留言的index
list.splice(n, 1);//?#22659;?#32034;引号为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({}),?#28304;?#20102;许多函数,如onload,可以酌情使用。本例中使用了onload。

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

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

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

4.可以修改在界面最顶?#35828;南?#31034;字样

index.json

{
"navigationBarTitleText": "简易留言板"
}

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

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

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: hsccxt 来自: cnblogs
新时时彩软件