从0到1学习云闪付开发，云闪付小程序崛起之玩转云闪付小程序

一、技术探索 云闪付小程序开发，也是最近两年才发展起来，对于绝大多数人来说是一个新的起点、新的领域，然鹅，对于一个开发老兵来说一切都如履平地。

废话不多说，直入主题，让我带领大家一起探索云闪付开发技术，让我们一起揭开它神秘的面纱……

（1）环境的搭建和应用

所有技术框架使用都是要有自己的运行环境，这里直接参考云闪付官方文档即可，按照步骤逐步进行即可。

前提：使用公司营业执照等相关企业信息进行完成身份认证，然后去创建小程序。 第一步：获取小程序信息

注：这里小程序信息会有两个，一个是测试开发环境的信息，另外一个就是生产环境的信息，这里逐一按照要求配置相关信息即可。小程序信息这里是常量不会变的（除非人为去改动），用于授权登录使用（具体怎么使用会在技术部分做深度解刨）。

第二步：申请能力

这一步看上去十分简单实则坑巨大。这里就要从全局去统筹把控，要考虑到项目所有的功能权限是要涉及到哪些，进行一次性申请开通，否则后面申请很是鸡肋~~必要也就是基础能力包、获取用户手机号信息，其他的根据业务灵活申请配置即可。

第四步：填写小程序配置

这里就是测试环境配置测试的域名，生产配置生产的域名。（注意：开发者必须要通过域名来访问，这里就有点坑，一个域名只能绑定一个ip，要想实现多人同时开发就要申请多个小程序和域名进行开发测试，否则只能来回切换域名的ip地址或者单人操作）

（2）项目框架接入
第一种方式就是按照官网的做法简单粗暴的直接在html里面引入upsdk.js;

<script src="open.95516.com/s/open/js/u…

另外一种方式就是下载好的upsdk-vue包直接放到node_modules里面，之前官网还有提供现在没有了只能找之前下载的人借用了（^_^）

（3）授权组件应用

upsdk初始化，按照设计的原理来说只要在项目启动之时进行一次性初始化upsdk.pluginReady即可，但是官网还是建议在业务页面再次调用一次。

（4）导航配置

其中后面三个属性是最近才开放出来的，这一点很赞，平台和我们开发者都在慢慢磨合和成长，其中我们在开发中也给平台提过不少建议和意见。

（5）分享
分享在开发的过程中走了很多弯路，其一云上发右上角的胶囊里面的按钮事件我们在开发的过程中是没有办法进行监听到的，其二默认右上角的分享是分享小程序首页也就是在第一部分提到开发配置管理里面配置的首页。
分享分为两种：链接分享和海报分享（分享图片）

在开发过程都会面临两个问题:

1、云闪付小程序本身自带分享功能无法满足日常开发分享出去之后用户打开跳转到指定页面（百分之七八十的小伙伴都在这里摔过跤）。

2、分享如何配置分享的URL地址、用户参数?

经过多方面的研究发现，要想满足日常开发中所需的分享功能、URL地址配置以及用户参数配置。其实是有点技巧和波折的。内心不够强大的小伙伴，在任意一个坑里可能就放弃了。

Ok咱们先对官网提供的API进行解剖：

upsdk.pluginReady (function(){
        upsdk.setAppletShareInfo({        
          title:title,          
          desc:desc,          
          shareUrl:'https://base.95516.com/s/wl/WebAPP/helpAgree/page/help/shareRutineHelp.html?params='+ params ,//          
          picUrl:'',//分享的logo         
          success:function(data){ // 插件调用成功         
            console.log('重写分享1')           
          },          
          fail:function(data){ // 插件调用失败          
             console.log('重写分享2')            
          }         
        })       
      })
复制代码

Title:分享的标题 Desc：分享文案（副标题） shareUrl：分享的地址

官方的api文档极其的简单是吧！！？？ 其实则不然，主要核心点在于params 数据的处理，其主要思想就是获取用户终端要分享的页面链接，进行转码+加密处理然后拼接到官方api要求的base.95516的格式链接。具体的params 怎样处理咱们直接上代码：

let logo = ''
let user = localStorage.getItem('userId')
    shareList.url = shareList.url +'?userId='+user   
    let params = {"toLink": encodeURIComponent(shareList.url),"encryptAppId":AppId,};    
    let paramsData = JSON.stringify(params);
    let str = CryptoJS.enc.Utf8.parse(paramsData);
    let params = CryptoJS.enc.Base64.stringify(str);
复制代码

注释说明：shareList：来源于业务页面方法调用是传进来对象，主要包含，分享页面的简介标题、分享页面的副标题、logo

（6）分享海报

分享海报，其实和普通分享（链接）是一样的。只不过在分享的时候加上了要分享的图片，具体的说明直接参考上面的链接分享，这里不做过多的赘述，咱们直接上分享海报的代码：

upsdk.pluginReady (function(){
   upsdk.shareSinglePlugin({
       title: '银联云闪付随机立减大优惠～！',
       desc: '我刚刚使用银联云闪付, 省了30元,大家快来使用吧.',
       shareUrl:  'https://base.95516.com/s/wl/WebAPP/helpAgree/page/help/shareRutineHelp.html?params='+ base64,// 默认为当前页面链接即location.href,// 默认为当前页面链接即location.href
       picUrl: strlog, //默认显示银联云闪付图标
       shareId: shareList.shareId, // 详细见备注 //shareId, 必填，可选值为：'0','1','3','4','5','6','7';渠道shareId;短信:0,新浪微博:1,微信:3,朋友圈:4,QQ:5,QZone:6,拷贝链接 7
       shareType: '4', //'1':链接分享，'2':文字分享，'4'：图片分享， 详细见备注
       shareData: {  // 详细见备注
           content:'', //可选，当shareType为2时，必传
           image:shareList.imagesData //图片的base64数据，可选，仅当shareType为4时，传
       },
       fail:function(code){
           // code: '01':对应渠道的应用未安装，例如微信未安装，或该渠道调用失败
           // code: '02':检查shareType,shareaId是否正确
           console.log(code)
       }
   });
 })
复制代码

（7）多种链接跳转方式解刨 跳转链接，在其他环境看似极其简单不过的事情了，然而在云闪付环境中变得错综复杂，有时候搞得开发者心理不够强大的会抓狂，特别是遇到了不懂技术的领导在追问情况的时候，真叫人跳脚心理一千万个万马奔腾……好吧，抱怨是有的，问题还是要解决的。正所谓有需求就有解决的办法。下面我将给大家深度解刨一下。

1、项目内部路由跳转，这个相信大家都会，不做相信说明；

2、外部第三方http（https）链接跳转，在今年（22年）月之前官方还有一个专门跳转在小程序内部打开外部链接的api(目前已经下架)。不过也是一个非常经典的分享案例：
其主要的实现方式如下：

// upsdk.createWebView({ // 跳转h5
    //   url: item.linkUrl,   // 新webview容器中运行的目标页面地址
    //   isFinish:'0',  //是否关闭当前的窗口,'1':关闭，'0':不关闭
    //   fail:function(code){ //code=101表示appId为空,code=102表示找不到该应用
    //   }
    // });
复制代码

其内部主要的原理就是在小程序环境内部通过创建一个webview打开外部的链接，这个api用起来说实话极其的好用。但不知道为啥给下架了。当时对我们项目影响还是非常大的，我们有10几个分公司的小程序在运营。一时间咨询他们官网技术支持群里几位老师也是一筹莫展丈二和尚摸不着头脑，都说没办法。找了一圈的人在请教，甚至打电话到其总部科技支持部找人咨询。然鹅，得到一个惊人的回复：“既然下架了，肯定是有道理的，出问题了就是你们开发的问题。”又被深深的上了一课。最终用了一种最原始的方式来替代：window.location.href = “url”。用这个 就意味他们环境支持打开第三方链接。

3、打开第三小程序（包含parms的拼接数据的链接也是分享的小程序地址）。这个有区别于第二种在情况打开普通的http链接，其实一个可能是商户配置分享的地址，也有可能是云闪付内部链接，所以这里对其做了特殊处理。百变不离其宗的是优先对url地址数据进行解析、数据进行解密、采集核心的数据。代码实现方式如下：\

var data=url.slice(url.indexOf("?"),url.length)
    // 将数据字符串表现为数组
    var u=url.slice(0,url.indexOf("?"));
    var params = data.slice(8,data.length)
    var paramsData = params.replace(/\s/g,"");
      //解密
    var parsedWordArray = CryptoJS.enc.Base64.parse(paramsData);
    var parsedStr = parsedWordArray.toString(CryptoJS.enc.Utf8);
    let encryptAppId = JSON.parse(decodeURIComponent(parsedStr)).encryptAppId;
    console.log("parsed:", encryptAppId);
    upsdk.openApplet({
      appId: encryptAppId,
      url:u,
      params:params,
      fail:function(code){ //code=101表示appId为空,code=102表示找不到该应用
        console.log(code)
      }
    });

复制代码

    4、打开第三小程序（内部链接），主要取决于云上内部链接是只有在内部环境才能打开的链接，所以我这里把它当做一种新的链接方式来特殊处理，分析其链接内容，大致是这样的格式：https://**.95516.com/ueq/****/**applet/#/?id=*** 然后我们要对这个链接进行解刨并找到我们想要的有用的数据，其一就是核销的appid（16位），其二链接的路由。具体的实现方式请看实现的代码如下：\

var linkType = url.slice(0,url.indexOf("?"))
    var u=url.slice(0,url.indexOf("?")-2)
    var data=url.slice(url.indexOf("?")+1,url.length)
    var encryptAppId = url.substr(-16,16)
    upsdk.openApplet({
      appId: encryptAppId, //必填，为16位小程序应用id
      param: data,  //可选，拼在小程序首页url后的查询参数  key1=1&key2=2
      isFinish: '0', // 可选, '1'表示关闭当前页面 非'1'不做处理, 默认为0
      toLink:'', //可选，打开小程序时打开指定页，url不做编码，url要求域名在小程序安全域名范围内，仅支持云闪付9.0以上版本
      fail:function(code){ //code=101表示appId为空,code=102表示找不到该应用
      }
    });
复制代码

5、打开云闪付内部群详情链接。这种情况和第四种情况极其雷同，但是使用api却截然不同。这里主要取决于目标链接是小程序还是云闪付（app）内部的链接。实现方式如下：

var data=url.slice(url.indexOf("?"),url.length)
    var aParams = data.substr(1).split("&");
    var couponId=''
    for (var i = 0; i < aParams.length; i++) {
      var aParam = aParams[i].split("=");
      couponId = aParam[1]
    }
    console.log('跳转云闪付券详情',couponId)
    upsdk.pluginReady (function(){
      //小程序跳转云闪付APP内部
      upsdk.openRNPage({
        dest: "rncoupondetail",   // 必传，目标RN页面，示例中表示打开 转账页面（RN实现）
        isFinished: "0",     // 可选，默认为‘0’，为‘1’则关闭当前webview
        extraData:{
        couponId:couponId,//item.productId,
        upTs:'',
        prePage:"",
        billSt:'',
        billNum:'',
        KTransterRouteType:'3',
        KTransterUserMsg:{
        },
        KTransterThirdMsg:{
        }
        },
        success:function(){  // 成功跳转
        },
        fail: function(msg){  // 失败回调
        }
      });
    })
复制代码

（8）支付 相对分享、分享海报、跳转链接等等功能开发来说，支付是其中最简单的一个功能。

实现小程序应用内支付功能，唤起云闪付内支付控件实现支付。

upsdk.pay({
                tn: transNo,
                success: function(){
                  that.ispopup=true;
                },
                fail: function(err){
                    this.$toast(err.msg)
                }
              });
复制代码

1. 接入方须完成商户入网，开通银联在线支付业务（控件支付）, 入网流程参见银联手机支付控件产品 ；

2. TN号通过银联控件支付产品消费接口获取；

3. upsdk.pay 只支持生产环境 TN 号，测试环境 TN 号暂不支持；

4. 小程序支付结果最终以银联 支付后台通知 和 查询接口 为准。

transNo：服务端返回的订单号

（9）定位导航

根据官网提供的api即可实现，主要代码实现方式如下：

  upsdk.pluginReady (function(){
        upsdk.getLocationGps({
          success: function(data){
            if(data){
              if(typeof data === "string"){
                let dz = {lat:add.latitude,lon:add.longitude};
              }else{
                let dz = {lat:data.latitude,lon:data.longitude}
              }
            }
          },  //不同系统返回的数据类型是不同的，android返回的数据类型为string，IOS返回的数据类型是object。
          fail: function(e){
            //console.log('定位',e)
          }  
        });
      })
复制代码

然而，我们项目是同时兼容h5版本所以这里还使用了一套百度定位具体的实现方式：\

function getLocaltion() {
  var geolocation = new BMap.Geolocation();
  geolocation.getCurrentPosition(
    function(r) {
      let city = r.address.city;
      let myposition = { lat: r.point.lat, lon: r.point.lng };
      let position = JSON.stringify(myposition);
      getCityData(myposition);//根据经纬度获取城市
    },
    function(e) {
                  // router.push({ path: "/location" });
                  // this.$toast("定位失败，跳转手动定位页面");
                }
  );
}

复制代码

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

关于云闪付小程序开发分享到此结束，技术比较菜、代码写的有点烂。欢迎各位大佬评论区留言探讨技术~(^_^)~