银联商务开放平台小程序尝试(weex)3

Posted aitashi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了银联商务开放平台小程序尝试(weex)3相关的知识,希望对你有一定的参考价值。

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

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

  list的示例代码如下:

 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并无关系。

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

技术图片

 

 

 

 

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

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

  接下来是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的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

 

以上是关于银联商务开放平台小程序尝试(weex)3的主要内容,如果未能解决你的问题,请参考以下文章

第3方支付ddd

B2B商城电子商务平台网上商城系统支付通道申请第三方支付接口对接搭建 支付宝微信扫码网关网银银联快捷支付

SAP云战略:从ERP走向全面开放的商务网络平台

微信小程序已经开放个人开发者申请了,还不快上车?

什么叫银联下属机构

中国银联旗下还都有哪些子公司?