微信小程序 数据交互与渲染实例详解

微信小程序 数据交互与渲染

实现效果图:

微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下。

//list.js

//获取应用实例

var app = getApp()

Page({

data: {

list:[],

hiddenLoading: true,

url: ''

},

loadList: function () {

var that = this;

that.setData({

hiddenLoading: !that.data.hiddenLoading

})

var url = app.urls.CloudData.getList;

that.setData({

url: url

});

wx.request({

url: url,

data: {},

method: 'GET',

success: function (res) {

var list= res.data.list;

if (list == null) {

list = [];

}

that.setData({

list: list,

hiddenLoading: !that.data.hiddenLoading

});

wx.showToast({

title: "获取数据成功",

icon: 'success',

duration: 2000

})

},

fail: function (e) {

var toastText='获取数据失败' + JSON.stringify(e);

that.setData({

hiddenLoading: !that.data.hiddenLoading

});

wx.showToast({

title: toastText,

icon: '',

duration: 2000

})

},

complete: function () {

// complete

}

}),

//事件处理函数

bindViewTap: function () {

wx.navigateTo({

url: '../logs/logs'

})

},

onLoad: function () {

},

onReady: function () {

this.loadList();

},

onPullDownRefresh: function () {

this.loadList();

wx.stopPullDownRefresh()

}

})

在loadList函数中进行了网络请求,请求的数据放到了data的list中。我们使用setData来修改list,在该函数调用之后,微信小程序的框架就会判断数据状态的变化,然后进行diff判断,如果有变化就渲染到界面中。这个与react.js的渲染方式相似,主要是内部维护了一个类似于虚拟文档的对象,然后通过对虚拟文档的判断来呈现界面,这样可以大大提高性能。

这里我们还做了一个下拉刷新的触发,即onPullDownRefresh函数,为了能够使用下拉刷新,我们需要进行配置,现在我们只需要当前页面生效,所以只要在对应页的json中配置即可,即在list.json中配置。

list.json

{

"navigationBarTitleText": "产品列表",

"enablePullDownRefresh":true

}

如果需要所有的页面的生效,可以在app.json中的window中配置。

app.json

{

"pages":[

"pages/index/index",

"pages/logs/logs",

"pages/list/list"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle":"black",

"enablePullDownRefresh":true

}

}

在app.json中,还有一个pages,我们需要路由的页面都需要在这里注册,否则无法路由到。

在请求数据的时候,加入了等待和获取成功失败的提示。这需要相应的页面配合,页面代码list.wxm.如下

<!--list.wxml-->

<view class="container container-ext">

<!--默认隐藏-->

<loading hidden="{{hiddenLoading}}">正在加载</loading>

<scroll-view scroll-y="true">

<view>

<block wx:for="{{list}}" wx:key="no">

<view class="widget">

<view>

<text >{{item.no}}({{item.content}})</text>

</view>

</view>

</block>

</view>

</scroll-view>

</view>

/**list.wxss**/

.widget {

position: relative;

margin-top: 5rpx;

margin-bottom: 5rpx;

padding-top: 10rpx;

padding-bottom: 10rpx;

padding-left: 40rpx;

padding-right: 40rpx;

border: #ddd 1px solid;

}

/**app.wxss**/

.container {

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

box-sizing: border-box;

padding-top: 10rpx;

padding-bottom: 10rpx;

}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

以上是 微信小程序 数据交互与渲染实例详解 的全部内容, 来源链接: utcz.com/z/352224.html

回到顶部