iOS调试Demo
WeexDemo
这一篇将开始用Weex请求网络数据。
从需求开始
发现页面@2x.png
设计如上图。我们需要请求这样一组杂志数据。
这里就不套路如何码UI了，不同人有不同的UI设计逻辑，这里给出这个页面的Vue文件，仅供参考。发现页面
明确了需求，Weex使用了MVVM的思想，用数据驱动UI展示，当数据改变，UI也将会渲染改变。
设置一个数组变量
数组变量是为了记录保存请求信息，最开始是一个空值。
<script>
export default
{
data () {
return {
magazines:[],
}
}
}
</script>
那么问题来了 该在何时请求信息呢？像我们在开发中 会在viewDidLoad时请求，那么Vue文件中我们需要在created(){}中请求。
created () {
let self = this;
self.day = new Date().getDate();
this.host=this.getHost().replace('8081','8083')
self.c;
},
来分析一下self.getAllData();方法，来看Weex中的网络请求
首先需要引用请求Module
<script>
let stream = weex.requireModule('stream')
</script>
之后stream使用如下
getData (callback) {
return stream.fetch({
method: 'GET',//不用解释
url: apiHost + '/api/recommend/list?type=12&start='+this.start+'&take=' + this.take,//这个也不用解释
type: 'json',//这个也是
// 请求头处理
headers: {
accessKey: this.accessKey
}
}, callback)//callback 请求完成回调
},
getAllData(){
this.getData(res => {//请求完成回调的实现
this.magazines = res.data.result.items;//初始化赋值this.magazines
this.start = this.start + this.take;//更改请求page
})
},
onloading() {
//此处变量控制显示和隐藏
this.loadingDisplay = 'show';
let self = this;
this.getData(res => {
if (res.data.result.items.length > 0) {
// 遍历添加数据
res.data.result.items.forEach(function (item) {
self.magazines.push(item);
})
this.start = this.start + this.take;
}
this.loadingDisplay = 'hide';
})
},
这样数据请求下来，新的数据就会驱动UI改变。已达到需求。
实现的程序截图如下：
程序发现页面截图
