Weex 从无到有开发一款上线应用 4

iOS调试Demo
WeexDemo
这一篇将开始用Weex请求网络数据。

从需求开始

发现页面@2x.png

设计如上图。我们需要请求这样一组杂志数据。
这里就不套路如何码UI了，不同人有不同的UI设计逻辑，这里给出这个页面的Vue文件，仅供参考。 发现页面
明确了需求，Weex使用了MVVM的思想，用数据驱动UI展示，当数据改变，UI也将会渲染改变。

设置一个数组变量

数组变量是为了记录保存请求信息，最开始是一个空值。

那么问题来了 该在何时请求信息呢？像我们在开发中 会在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

之后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改变。已达到需求。
实现的程序截图如下：

程序发现页面截图