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

这篇具有很好参考价值的文章主要介绍了从0到1学习云闪付开发,云闪付小程序崛起之玩转云闪付小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

(1)环境的搭建和应用

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

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

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

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

第二步:申请能力

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

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

第四步:填写小程序配置

从0到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)导航配置

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

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

(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("定位失败,跳转手动定位页面");
                }
  );
}

复制代码

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

关于云闪付小程序开发分享到此结束,技术比较菜、代码写的有点烂。欢迎各位大佬评论区留言探讨技术~(^_^)~文章来源地址https://www.toymoban.com/news/detail-490965.html

到了这里,关于从0到1学习云闪付开发,云闪付小程序崛起之玩转云闪付小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 云表|低代码开发崛起:重新定义企业级应用开发

    nbsp; nbsp; nbsp; nbsp;低代码开发这个概念在近年来越来越受到人们的关注,市场对于低代码的需求也日益增长。据Gartner预测,到2025年,75%的大型企业将使用至少四种低代码/无代码开发工具,用于IT应用开发和公民开发计划。 nbsp; nbsp; nbsp; nbsp;那么,为什么低代码开发如此受到

    2024年02月08日
    浏览(48)
  • 《AI程序员崛起:传统程序员何去何从?》

    近日,世界上第一位AI程序员Devin诞生,号称能自主学习新技术,自己改Bug,甚至它已经成功通过一家AI公司面试。消息一出,震撼整个科技圈。不少从业者在社交媒体留言说,担心Devin这类AI程序员技术可能会让自己失去工作。 Devin在SWE-Bench 编码基准测试中独立解决了开源项

    2024年03月27日
    浏览(55)
  • 向量数据库的崛起:如何改变数据存储与机器学习的未来

      每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领域的领跑者。点击订阅,与

    2024年04月28日
    浏览(44)
  • 物联网|ARM|Keil同时安装Keil的C51、C251和MDK|增加V5编译器|物联网开发系列课程之零基础玩转Cortex-M系列CPU-学习笔记(1)

    1.物联网的定义 利用局部网络或互联网等通信技术把传感器、控制器、机器、人员和物等通过新的方式联在一起,形成人与物、物与物相联,实现信息化、远程管理控制和智能化的网络。 2.物联网的组成 3.物联网应用举例智能家居 1物联网的数据源头 2物联的局域网络源头 1

    2024年02月05日
    浏览(72)
  • 程序员怎么玩转Linux

    Linux下可以使用Python编写爬虫程序,常用的爬虫框架有Scrapy和BeautifulSoup。 Scrapy是一个基于Python的开源网络爬虫框架,可以快速高效地从网站上获取数据。它提供了强大的数据提取和处理功能,支持异步网络请求和分布式爬取等特性。 BeautifulSoup是一个Python库,可以从HTML或XM

    2024年02月07日
    浏览(55)
  • 教你用华为云玩转物联网开发

    声明:本篇文章部分资料来自直播HCSD专家讲堂 《一节课玩转物联网开发》,本课程为直播课程 本篇文章将带大家了解物联网数据在华为云loT平台上端到端流转的过程,并指导大家基于华为云IoTDA及可视化大屏服务DLV,搭建物联网可视化大屏应用,进而学习物联网开发相关知

    2024年02月16日
    浏览(35)
  • 玩转Git: 程序员的日常手册

    Git是一个分布式版本控制系统,也是一个开源项目,最初为了帮助Linux内核开发。Git主要着重于数据完整性,数据的离散存储以及支持非线性开发,例如多个并行的散射分支。它具有超强的合并和分支操作。 在开始之前,我们需要首先在Git官方网站安装 Git。完成后,打开你的

    2024年02月04日
    浏览(41)
  • 玩转DIY可视化打造专属小程序

    DIYGW可视化工具是一个傻瓜式、拖拽式、模块化开发软件工具;一个从想法到原型到源码,一步到位低代码生成源码工具。 所见即所得,拖拽设计,无编程基础的人都能轻松掌握。只需一次设计,就能拥有微信小程序、支付宝小程序、头条小程序、QQ小程序、百度小程序、F

    2023年04月22日
    浏览(56)
  • Methodot低代码开发教程——玩转表格增删改查分页

    目录 1、背景介绍  2、连接数据源 2.1 新增数据源 2.2 填写数据源信息 3、表格数据的展示 3.1 新增查询,编写查询语句 3.2 使用表格组件 3.3 同步数据源与表格列名 4、表格的数据新增 4.1 新增查询,编写新增语句 4.2 表格配置新增一行,保存事件绑定js函数 4.3 点击新增一行选项

    2024年02月12日
    浏览(25)
  • 带你玩转单向链表(学习必备)

    本篇文章主要介绍数据结构中 单向链表 各种操作,适合有 C语言基础 的同学,文中描述和代码示例很详细,干货满满,感兴趣的小伙伴快来一起学习吧! ☀️大家好!我是新人博主朦胧的雨梦,希望大家多多关照和支持😝😝😝 🌖大家一起努力,共同成长,相信我们都会

    2024年02月02日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包