银联商务开放平台小程序尝试（weex）3

　　继续学习。10号参加了由官方举办的一次“技术交流沙龙”，实际上就是组办方给自己做宣传，明确了一些问题和技术需求。总而言之，本次比赛是一种开放尝试，并非与银联服务全面对接，而是要找创意，想点子，为银联商务开放平台的建设添砖加瓦。。

　　回到weex本身。接下来测试了list和scroller等列表元素的使用，了解了一下v-for语句的遍历方式，并加上了loading元素用来做加载效果。

　　list的示例代码如下：

<template>
    <div class="list-box">
        <list class="listtest" >
            <cell v-for="num in lists" v-bind:key="num.id">
                <div class="panel">
                    <text class="te">{{num}}</text>
                </div>
            </cell>
            <loading class="loadingref" @loading="onloading" :display="showLoading">
                <text class="indicator">Loading...</text>
                <loading-indicator></loading-indicator>
            </loading>
        </list>
    </div>
</template>

<script>
export default {
  name: 'list1',
  data () {
    return {
      lists: [1, 2, 3, 4, 5],
      showLoading: 'hide'
    }
  },
  methods: {
    onloading (event) {
      this.showLoading = 'show'
      setTimeout(() => {
        const length = this.lists.length
        for (let i = length; i < length + 5; i++) {
          this.lists.push(i + 1)
          this.showLoading = 'hide'
        }
      })
    }
  }
}
</script>

<style scoped>
    .list-box{
        align-items: center;
    }
    .listtest{
        height: 700px;
    }
    .panel{
        width: 600px;
        height: 300px;
        flex-direction: column;
        justify-content: center;
        border-width: 10px;
        border-style: solid;
        border-color: chocolate;
        background-color: aquamarine;
    }
    .te{
        font-size: 50px;
        text-align: center;
        color: burlywood;
    }
    .indicator{
        font-size: 50px;
    }
    .loadingref{
        align-items: center;
    }

</style>

　　v-for的语法类似于python的for,需要以字符串的形式输入"a in b"，其中a代表元素，b代表集合，需要注意的是此处的“元素”和“集合”都是相对于vue.js而言的，与weex的list、cell并无关系。

　　在es6lint语法里，v-for后面要求给一个key，不管是技术胖的代码还是weex官方的demo示例都没有这个东西，但是一直警告（反映在webStorm里最后全都写成error,虽然不影响渲染），于是随便翻了翻然后找了个网上的方法填了进去，即代码中的v-bind:key="num.id".效果见右图：

 

 

 

 

　　主体代码的内容主要来自技术胖教程，需要注意的是loading元素，该元素不太好用，经常拉着拉着，就退不回去了（或者退不完全），而list和scroller本身还有loadmore事件来进行进一步加载。

　　而loadmore则比较难做出loading的加载动画效果，只能用toast凑合。

　　接下来是scroller示例，采用了loadmore事件：

 

<template>
    <div class="scroller-box">
        <scroller class="scroller" @loadmore="onloadmore" :loadmoreoffset="10">
            <div class="cell" v-for="num in lists" v-bind:key="num.id">
                <div class="panel">
                    <text class="text">{{num}}</text>
                </div>
            </div>
            <!--
            <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">

                <text class="indicator-text">Loading ...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </loading>
                -->
        </scroller>

    </div>

</template>

<script>
const modal = weex.requireModule('modal')
export default {
  data () {
    return {
      loadinging: false,
      lists: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    /*
    onloading (event) {
      this.loadinging = true
      setTimeout(() => {
        const length = this.lists.length
        for (let i = length; i <= length + 4; i++) {
          this.lists.push(i + 1)
          // this.lists = this.lists.concat(i + 1)
        }
        this.loadinging = false
      }, 500)
    }
    */

    onloadmore (event) {
      setTimeout(() => {
        modal.toast({message: 'loading', duration: 0.6})
        const length = this.lists.length
        for (let i = length; i < length + 5; i++) {
          // this.lists.push(i + 1)
          this.lists = this.lists.concat(i + 1)
        }
      }, 500)
    }

  }
}
</script>

<style scoped>
    .scroller-box{
        height: 700px;
    }

    .scroller {
        width: 750px;
        show-scrollbar: false;
    }
    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }
    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }
    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
    .panel {
        width: 600px;
        height: 250px;
        margin-left: 75px;
        margin-top: 35px;
        margin-bottom: 35px;
        flex-direction: column;
        justify-content: center;
        border-width: 2px;
        border-style: solid;
        border-color: #DDDDDD;
        background-color: #F5F5F5;
    }
    .text {
        font-size: 50px;
        text-align: center;
        color: #41B883;
    }
</style>

 

loading和toast的效果比较难捕捉，就不放了。

　　接下来准备尝试网络通信，这个功能主要通过weex的stream组件的fetch方法来完成。https://weex.apache.org/zh/docs/modules/stream.html

　　然后最坑的地方就来了，很明显是阿里不够用心（

 

 

 

 

　　（这是weex文档里给出的函数说明，可以看到，有三个参数）而不论是weex自己的demo(比如http://dotwe.org/vue/892bd1c977b61762baca8e02a65b6d97?spm=a2c7j.-zh-docs-modules-stream.0.0.6c5c5b72hzpNfl）或者技术胖的视频，都显示出fetch方法只有两个参数，而且本身webStorm的参数错误提示又是下面画一条很软的虚线，导致本人很久很久才发现（

　　其实可以看到，这第三个参数progressCallback的解释都还是英文，很明显是后加的，但是自己的demo都没有完全跟上(http://dotwe.org/vue/a6e1a234170fadb20a6f334042a6427b比如这个demo就有第三个参数了），真是笨死啦。

　　（此处再额外吐槽一下官方的很多demo都有着const self=this这样的写法。。）

　　个人补充了下官方的解释：

　　fetch(options, callback, progressCallback)

　　@options:请求的配置选项

　　@callback:响应结果回调，即获得请求的返回结果

　　@progressCallback:进程中相应，即在请求过程中执行的一个函数，可以获得当前的请求状态

　　后两个获得的内容都是放在对应回调函数的形参（请原谅我只会用这个词来理解）里的。

　　但是jspang的json服务器已经关咯，weex的demo也一点也没法用。。只能求助各路大神。。比如这个：https://www.cnblogs.com/sunjianfei/p/7298950.html