1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序从前端wxml页面数据获取 到JS页面数据对象字符化 传递给后台 前台再从后

微信小程序从前端wxml页面数据获取 到JS页面数据对象字符化 传递给后台 前台再从后

时间:2019-05-28 22:12:19

相关推荐

微信小程序从前端wxml页面数据获取 到JS页面数据对象字符化 传递给后台 前台再从后

页面:

事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息,如 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页面动态展示数据(前后台交互实现发表动态功能)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。