銀聯商務開放平臺小程序嘗試（weex）3

時間 2019-11-17

標籤銀聯商務開放平臺程序嘗試 weex 简体版

原文原文鏈接

　　繼續學習。10號參加了由官方舉辦的一次「技術交流沙龍」，實際上就是組辦方給本身作宣傳，明確了一些問題和技術需求。總而言之，本次比賽是一種開放嘗試，並不是與銀聯服務全面對接，而是要找創意，想點子，爲銀聯商務開放平臺的建設添磚加瓦。。html

　　回到weex自己。接下來測試了list和scroller等列表元素的使用，瞭解了一下v-for語句的遍歷方式，並加上了loading元素用來作加載效果。vue

　　list的示例代碼以下：python

 1 <template>
 2     <div class="list-box">
 3         <list class="listtest" >
 4             <cell v-for="num in lists" v-bind:key="num.id">
 5                 <div class="panel">
 6                     <text class="te">{{num}}</text>
 7                 </div>
 8             </cell>
 9             <loading class="loadingref" @loading="onloading" :display="showLoading">
10                 <text class="indicator">Loading...</text>
11                 <loading-indicator></loading-indicator>
12             </loading>
13         </list>
14     </div>
15 </template>
16 
17 <script>
18 export default {
19   name: 'list1',
20   data () {
21     return {
22       lists: [1, 2, 3, 4, 5],
23       showLoading: 'hide'
24     }
25   },
26   methods: {
27     onloading (event) {
28       this.showLoading = 'show'
29       setTimeout(() => {
30         const length = this.lists.length
31         for (let i = length; i < length + 5; i++) {
32           this.lists.push(i + 1)
33           this.showLoading = 'hide'
34         }
35       })
36     }
37   }
38 }
39 </script>
40 
41 <style scoped>
42     .list-box{
43         align-items: center;
44     }
45     .listtest{
46         height: 700px;
47     }
48     .panel{
49         width: 600px;
50         height: 300px;
51         flex-direction: column;
52         justify-content: center;
53         border-width: 10px;
54         border-style: solid;
55         border-color: chocolate;
56         background-color: aquamarine;
57     }
58     .te{
59         font-size: 50px;
60         text-align: center;
61         color: burlywood;
62     }
63     .indicator{
64         font-size: 50px;
65     }
66     .loadingref{
67         align-items: center;
68     }
69 
70 </style>

　　v-for的語法相似於python的for,須要以字符串的形式輸入"a in b"，其中a表明元素，b表明集合，須要注意的是此處的「元素」和「集合」都是相對於vue.js而言的，與weex的list、cell並沒有關係。es6

　　在es6lint語法裏，v-for後面要求給一個key，無論是技術胖的代碼仍是weex官方的demo示例都沒有這個東西，可是一直警告（反映在webStorm裏最後全都寫成error,雖然不影響渲染），因而隨便翻了翻而後找了個網上的方法填了進去，即代碼中的v-bind:key="num.id".效果見右圖：web

　　主體代碼的內容主要來自技術胖教程，須要注意的是loading元素，該元素不太好用，常常拉着拉着，就退不回去了（或者退不徹底），而list和scroller自己還有loadmore事件來進行進一步加載。apache

　　而loadmore則比較難作出loading的加載動畫效果，只能用toast湊合。json

　　接下來是scroller示例，採用了loadmore事件：服務器

  1 <template>
  2     <div class="scroller-box">
  3         <scroller class="scroller" @loadmore="onloadmore" :loadmoreoffset="10">
  4             <div class="cell" v-for="num in lists" v-bind:key="num.id">
  5                 <div class="panel">
  6                     <text class="text">{{num}}</text>
  7                 </div>
  8             </div>
  9             <!--
 10             <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
 11 
 12                 <text class="indicator-text">Loading ...</text>
 13                 <loading-indicator class="indicator"></loading-indicator>
 14             </loading>
 15                 -->
 16         </scroller>
 17 
 18     </div>
 19 
 20 </template>
 21 
 22 <script>
 23 const modal = weex.requireModule('modal')
 24 export default {
 25   data () {
 26     return {
 27       loadinging: false,
 28       lists: [1, 2, 3, 4, 5]
 29     }
 30   },
 31   methods: {
 32     /*
 33     onloading (event) {
 34       this.loadinging = true
 35       setTimeout(() => {
 36         const length = this.lists.length
 37         for (let i = length; i <= length + 4; i++) {
 38           this.lists.push(i + 1)
 39           // this.lists = this.lists.concat(i + 1)
 40         }
 41         this.loadinging = false
 42       }, 500)
 43     }
 44     */
 45 
 46     onloadmore (event) {
 47       setTimeout(() => {
 48         modal.toast({message: 'loading', duration: 0.6})
 49         const length = this.lists.length
 50         for (let i = length; i < length + 5; i++) {
 51           // this.lists.push(i + 1)
 52           this.lists = this.lists.concat(i + 1)
 53         }
 54       }, 500)
 55     }
 56 
 57   }
 58 }
 59 </script>
 60 
 61 <style scoped>
 62     .scroller-box{
 63         height: 700px;
 64     }
 65 
 66     .scroller {
 67         width: 750px;
 68         show-scrollbar: false;
 69     }
 70     .loading {
 71         width: 750px;
 72         display: -ms-flex;
 73         display: -webkit-flex;
 74         display: flex;
 75         -ms-flex-align: center;
 76         -webkit-align-items: center;
 77         -webkit-box-align: center;
 78         align-items: center;
 79     }
 80     .indicator-text {
 81         color: #888888;
 82         font-size: 42px;
 83         text-align: center;
 84     }
 85     .indicator {
 86         margin-top: 16px;
 87         height: 40px;
 88         width: 40px;
 89         color: blue;
 90     }
 91     .panel {
 92         width: 600px;
 93         height: 250px;
 94         margin-left: 75px;
 95         margin-top: 35px;
 96         margin-bottom: 35px;
 97         flex-direction: column;
 98         justify-content: center;
 99         border-width: 2px;
100         border-style: solid;
101         border-color: #DDDDDD;
102         background-color: #F5F5F5;
103     }
104     .text {
105         font-size: 50px;
106         text-align: center;
107         color: #41B883;
108     }
109 </style>

loading和toast的效果比較難捕捉，就不放了。weex

　　接下來準備嘗試網絡通訊，這個功能主要經過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也一點也無法用。。只能求助各路大神。。好比這個：http://www.javashuo.com/article/p-tupmuoxm-ke.html