页面:
事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如 id, dataset,。
可以在微信页面使用列表来动态展示数据,然后将动作绑定在列表的每一个元素上面,同时给JS传递相应的data或者dataset。
(1)在wxml页面输入数据,使bindinput实时监听input的输入
<input type="text" placeholder="写一条自己的动态吧~" name="search" value="" placeholder-class="plac" bindinput="inputValue" /></view>
(2)在JS页面获取在wxml页面输入的数据
/**输入函数 */inputValue: function (event) {this.setData({inputValue: event.detail.value})console.log(this.data)console.log(event.detail.value)},
(3)将JS获取的数据发送给后台
var content = that.data.inputValue;var time = that.data.time;var radio = that.data.radio;wx.request({url: app.globalData.url + '/zonepost',method: "POST",data: {userid: wx.getStorageSync("userid"),userhead:wx.getStorageSync("imageurl"),username:wx.getStorageSync("nickname"),radio: radio,time: time,content: content},header: {"Content-Type":"application/x-www-form-urlencoded"},success: (res) => {console.log(res.data);},})
(4)获取向后台发送的数据,将从后台获取的数据存放在result数组里
var that = this//当页面加载时请求数据wx.request({url: '*******************',method: "POST",header: {'content-type': 'application/x-www-form-urlencoded',},success(res) {console.log(res)that.setData({result: res.data})}})console.log(that.data)},
(5)在wxml页面动态展示数据
文中的语法<view wx:for="{{result}}" wx:for-item="item">
是for循环,item是每次循环的元素
<view wx:for="{{result}}" wx:for-item="item"><view class='condition'><view class='condition_word'><image src='{{item.userhead}}' class='condition_img2'></image> <view class='condition_txt'> <view class='condition_dktitle'><text style='font-size:28rpx'>{{item.title}}</text></view> <view><text style='font-size:25rpx;color:grey'>{{item.tim}} </text></view> </view></view> <view class='condition_neirong' bindtap='readcd'><text style='font-size:30rpx;color:grey'><text class='txt_tiaozhuan' bindtap='readcd'>{{item.content}}</text></text></view> <image src='{{item.img}}' class='condition_img'></image> <view class='condition_word'></view>
微信小程序从前端wxml页面数据获取 到JS页面数据对象字符化 传递给后台 前台再从后台获取数据并在wxml页面动态展示数据(前后台交互实现发表动态功能)