留言板微信小程序开发MVC思路分析

最新推荐文章于 2024-07-06 18:08:59 发布

sylmoon

最新推荐文章于 2024-07-06 18:08:59 发布

阅读量5.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： wx小程序

本文链接：https://blog.youkuaiyun.com/sylmoon/article/details/78645402

2 篇文章

订阅专栏

本文介绍了使用MVC思想开发微信小程序留言板的功能实现，包括查询、新增、删除留言的步骤。详细讲解了如何通过JS处理数据，WXML展示视图，并强调了每次修改数据后需同步更新的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. item class over

/* overflow: hidden;清浮动！ */

2 查询功能：

2.1js 里面data 里面添加：

msgData:
[

{
 msg:
"xxxxxx"
},//双引号

{
 msg:
"xxxxxx"
},

{
 msg:
"xxxxxx"
},

{
 msg:
"xxxxxx"
}

]

},

2.2前端添加：

<view
class="item"
wx:for ="{{msgData}}"
wx:key="{{index}}">

<text>{{item.msg}}</text>

2.3暂无留言功能：

<text
class="msg-info"
wx:if ="{{msgData.length==0}}">暂无留言……</text>

[注意]注意， 这里的 wx:if 要写上双花括号！

3新增功能：

3.1.1首先 点击按钮添加， 用bindtap

<button
class="btn1"
size="mini"
type="primary"
bindtap='addMsg'>添加</button>

3.1.2然后 写bindtap 里面的函数到 JS 里面

addMsg(){

console.log(111);

},

3.2 input 里面添加（ChangeInputVal controller把值写入msgData, 写入MODEL)

3.2.1
bindinput

：

<input
bindinput="changeInputVal"
class="input"
type="text"
placeholder='请留言'
placeholder-class='place-input'
/>

3.2.2JS DATA 里面添加

inputVal:''，

3.2.3 js 添加函数changInputVal

changeInputVal(ev){//每个事件都带的EV

console.log(ev);

}

ev 在console 里面看到 其中一个input-detail-value

this.setData({inputVal:ev.detail.value});//inputVal
 是Data 里面的

3.3 addMsg()里面添加

console.log(this.data.inputval);//看看能不能拿到

[注意]，区分大小写 inputval

3.4 在addMsg() 里面 msgData push （js里面操纵数组的方法）到json 如果要同步数据的话， 用this.setData({})

var list
=
this.data.msgData;

list.push({
 msg:
this.data.inputval
});

//renew

this.setData({

msgData:
 list,

inputval:
''
});

微信小程序 模拟器 黑圆点?

4删除功能

4.1 前台 icon 上面进行 bindtap,:

<icon
type="cancel"
class="btn2"
bindtap='delMsg'>delete</icon>

4.2 js 里面写代码

delMsg(){

console.log('del
 msg......');

},

4.3 dataset

下一步，如何获取删除行的iD ， 以确认该删除哪个？

icon 里面加上 data-index=“{{index}}”

然后EV ， console.log

console.log(ev.target.dataset.index);

4.4要删除的索引 就是ev.target.dataset.index

var vdel=ev.target.dataset.index

delMsg(ev)
{

console.log('del
 msg......');

console.log(ev.target.dataset.index);

var
 vdel = ev.target.dataset.index;

var
 list =
this.data.msgData;

list.splice(vdel,
1);

this.setData({
 msgData: list
});

},

【注意】 每次删除完必须同步数据

有两个问题， 1. 点击完新增按钮文本框的值还在

method 1: setData ???

method 2:bindreset(form)

<input
class="input"
type="text"
placeholder="请留言"
placeholder-class='place-input'
bindinput="changeInputVal"/>

加上VALUE 属性即可？value='inputvalue'
 错

要写成
value="{{inputval}}"
 取JS 里面的DATA写法

2.刷新完数据不保存

用 wx.setStorage({

key:'name',

data:'value'})

再次总结一下：

微信小程序开发的思路是类似MVC ， M 就是JS 里面的DATA 结构

data:{msgData:[],

inputval:'',

cleardata:''

},

， V 就是WXML ， 主要以<view>为区块类似于DIV 组合进行前端展示 ，

C 就是JS 里面的代表方法setData()， 每次修改，必须同步数据