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

1. item class over/* overflow: hidden;清浮动！ */

2 查询功能：

2.1js 里面data 里面添加：

msgData:[

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

{ msg:"xxxxxx"},

{ msg:"xxxxxx"},

{ msg:"xxxxxx"}

]

},

2.2前端添加：

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

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

2.3暂无留言功能：

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

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

3新增功能：

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

<buttonclass="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.1bindinput

：

<inputbindinput="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,:

<icontype="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)

<inputclass="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()， 每次修改，必须同步数据