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

  最近参加了银联商务开放平台举办的小程序设计比赛,这对本人来说是全新的技术领域,尝试来记录一下学习过程。由于是以比赛为导向,可能过程比较功利,直接奔着作品来。

比赛网址如下:https://open.chinaums.com/miniprogram/competition/pc

  在本人个人的认识中,“小程序”是大前端趋势下的一个体现,目前最成功的微信小程序已经积累了大量了应用和开发者,相关的开发工具和流程文档也较为全面。各大互联网公司也都纷纷瞄准了这一块可能的市场,纷纷搭建自己的小程序平台。但是本来是互联网企业的事情,银联是个怎么回事呢?于是特意了解了下“银联商务开放平台”,简而言之,这是个面向商户和企业的平台,用来提供如统计信息,媒体资源,支付管理等服务,由于银联是我国银行卡普遍支持的,所以银联也在实体支付场景中占有很大一块。然后呢银联看着自己这么多的商务用户和终端pos机,就打起了平台的主意,试图依托自己的用户和流量入口资源来进行内容分发,打造小程序平台,进而积累生态,或许还有与微信支付竞争的打算?

  在完成比赛报名等事项后,打开其提供的教程,准备开始学习。网址:https://wiki.open.chinaums.com

 

 

   首页上给了这么个介绍,对于这方面完全没接触过的我先去查了查weex是个什么东东(

  weex是一个由阿里出品并开源提交给Apache基金会管理的前端框架。它基于vue开发,并且可以直接发布到Android/iOS环境上运行,与React~ React Native类似,故也有人说它可以称作是vue native。当然,本人对目前的前端技术了解甚少,只知道确实越来越多的desktop程序开始采用基于web前端框架的方式编写,相当于是用浏览器在浏览网页,这些程序通常都很好看,有设计的很漂亮的元件和UI,但是与native的binary相比,执行效率就差了一些。而本人对html/css/js技术栈的了解仅仅停留在皮毛,根本不知道目前日新月异的框架技术究竟是什么样子了。

  具体到银联这里呢,银联自己“基于Weex深度定制”了一个ums-toolkit,与weex-toolkit相对应,针对银联商务开放平台专门设计。于是按照教程里的搭建流程开始搭建环境。

  (然后就失败了)

 

 

   哦,教程里给的服务器404了()本人连续试了若干天,一直如此,期间了解了一下node和npm包管理体系,得知了npm库和镜像源等概念(如同Ubuntu的apt源),遂发现在淘宝维护的cnpm源里只有0.0.1版本的ums-toolkit,来自于官方npm库且提交于两年前,本着死马当活马医的态度,采用npm官方库和尝试安装,结果如下:

行吧,看来ums-toolkit是没得用了,直接用weex-toolkit吧(后来发现ums-api的api库好像还能用)

反正,比赛里也写的是

 

  于是直接转投weex。本人开发环境采用Ubuntu18.04 只因bash的ui比cmd好看太多。接下来的内容就是weex开发了,与银联再无关系,既然比赛要求只需要在weex playground上调试,也就不用关心移植到Android或iOS的部分了。

  因为已经熟悉了npm的包管理机制,包的安装就不多赘述,主要就是

  

npm install weex-toolkit -g
npm install weex-debug -g
npm install webpack -g

(-g代表全局安装)

然后采用

weex create xxx_demo

(其中xxx_demo为工程名)

这样weex工具链就会在当前目录创建一个weex工程。

本人采用webstorm ide进行开发,这是银联推荐的开发工具之一。

关于调试 用npm start ,直接将初始工程进行调试 

  

 

 得到如下页面,在手机上用weex playground app扫描二维码(需要手机和电脑处于同一内网)就可以显示网页上手机框中的内容。

  到这里基础环境搭建就算完成了,接下来看到了银联教程上提到的weex-ui扩展,就尝试放了个按钮上去

(HelloWorld.vue改成如下内容)

<template>
  <wxc-button text="确定"
              @wxcButtonClicked="wxcButtonClicked"></wxc-button>
  <text
</template>

<script>
  import { WxcButton } from 'weex-ui'
  export default {
    components: { WxcButton },
    methods: {
      wxcButtonClicked (e) {
        console.log(e)

      }
    }
  }
</script>

显示效果如下:

 

  于是第一次就这样咯。

  旁敲侧击的也去了解了下weex的评价。。统一的结论就是:坑很多。说得难听的就是连阿里自己都不想用,把包袱甩给Apache,说的好点吧,也没啥好的。。然后银联方面 教程问题多多,还有错别字(

总之现在有些失望。。但是比赛还是要做下去的,于是找了个技术胖的weex视频(也是两年前的了,不知道能用几分)准备学习一下,估计也只能当做一点积累咯。

 

原文地址:https://www.cnblogs.com/aitashi/p/11749456.html