为啥标题要叫指北呢?
因为初入云闪付小程序开发真的会让你找不到北...
因为产品需要,突然有一天接到一个开发云闪付小程序的需求。因为陆续开发过微信小程序和支付宝小程序,然后该死的代入感来了,没错,第一直觉就是去找云闪付的Api,然后过完一遍API后发觉,哎呀,这个好像有点不一样,这个好像有点懵逼,这API怎么就那么简单呢?怎么就云里雾里了呢?
好了,话不多说,咱们按照正常流程开发吧
注册平台账号
先打开云闪付开发者平台,使用云闪付App扫码登录,创建小程序,完善小程序的主体信息。这里主要要注意的就是小程序的类目信息和小程序简介要一一对应,不能牛头不对马嘴,不然就会有被拒的风险。
扫码登录有个坑,如果账号管理权限不在我们手里,那真的是噩梦啊,半小时不操作就会登录超时,然后又双叒叕得找他们要扫码登录,为了这次开发,我一天标配两次要同事扫码...
下载开发者工具
这一步其实完全可以省略的!!!但是咱们先按正常开发思路继续
云闪付官方文档,起初看到这个文档我以为是第三方的。
开发者工具小程序目前采用通用语言开发,开发者可自行选择IDE或使用云闪付小程序开发者工具开发(非必须)。云闪付小程序开发者工具提供vue/react 脚手架,并支持导入本地已有项目
看完这段话心里是不是还是有点打鼓,你都有自己的开发者工具了,又说开发者工具是非必须的,然后又要接你们的sdk,还要调用你们的真机功能,我哪敢不用你的开发者工具啊。然后真的就老老实实的用他们的开发者工具开发项目了
开始开发项目先先看看他们的demo示例,里面有很多sdk的示例方法,大多数都可以满足开发需要,这里用的Vue和React项目模板也能运行起来,用的打包工具打包命令也正常(又是被微信开发者工具的打包上传命令给代入了)
项目开发
前面不是说可以导入vue/react 脚手架项目吗,导入最新的模板后确实可以运行起来的,但是用自带的开发者工具一大包,一堆懵逼的报错,这突然给了我一个新版本的vue/react 脚手架不能使用的信号,然后就只能老老实实的用他们工具内集成的低版本模板进行开发,说多了都是泪啊
开发用的Vue/React都是通用的框架,这里就不做过多介绍了.../%$#^@&#//
要调用云闪付的sdk,通常有两种方式集成,一种是根模板引入script
<script src="https://open.95516.com/s/open/js/upsdk.js"></script>
另一种是npm
安装包
> npm install upsdk-vue
怎么使用大家看sdk示例或者官方文档都行,唯一要注意的就是每次使用sdk方法前都需要初始化一下
upsdk.pluginReady (function(){
// 前端API调用
upsdk.setTitleStyle({ ... })
upsdk.setNavigationBarTitle({ ... })
... ...
});
这里先说第一个大坑
,云闪付开发者工具如果开太久没有关闭的话,你怎么引用sdk的方法都会报错,完全懵逼那种,一直提示找不到upsdk
,最后折腾了半天我重启电脑了,然后莫名其妙又好了。后来又陆续中过开发者工具的毒,我才发现这个开发者工具会罢工,要适时重启...
真机联调
这里说的联调是真机联调,本地联调的那一套都一致的
开发者工具自带的真机调试,简直就是灾难,这里面的3个步骤调试,估计支持windows + Android,苹果生态系统被无情的抛弃了,windows + Android我其实也用备用电脑试过,关键也跑不通啊...
不卖关子了,说下正常操作吧
先切换到开发者管理平台,找到开发管理 -> 测试管理,填好小程序首页链接
和小程序安全域名
,小程序首页链接即我们项目要展示出去的首页地址,可以直接填写history路由和hash路由的任何页面地址,唯一。小程序安全域名也是必填的,开发环境就填你开发环境下代理的服务端本地域名,这里支持本地IP地址的,这样你在小程序里的请求都是合法的,不会被拦截,跟微信小程序的白名单一个道理。
填好后就可以直接保存,提示你两个小时左右会生成可使用的二维码信息。
生成二维码这里也是个大坑,后面假使你开发得差不多要切换各中环境调试的时候,比如开发、测试、准生产、生产这四大环境,每一个环境都要修改小程序首页链接地址然后再重新生成测试二维码,然后每次真的都要至少等上半个小时以上修改信息二维码才会生效,wtf!!!生产环境的二维码更坑,至少要一小时,wtf!!! time is money啊~
然后二维码就会生成这样的链接地址, applet.open.95516.com/小程序应用ID
注意,测试环境和生产环境的小程序应用ID
是不一致的,千万别等到了上线之后才发觉,那就晚了,我就犯了这么个低级错误
这个时候你就可以愉快的真机调试啦,不限苹果安卓系统,本地开发设备同局域网即可,完美。
上线
同真机联调的步骤一样,唯一多的步骤就是多了提交审核这一部。区别就是真正审核通过之后,页面里面的调试控制台才会消失!
等你真的审核通过后,要静静的等个把小时(至少),二维码才会生效,这绝对是漫长的等待~
这里还有个乌龙经验,上线审核成功后,我突然想改一下首页对外链接,然后又跑到开发者上下线管理模块修改小程序首页链接,然后发现又要提交审核???我瞬间懵逼了,生怕改了之后又要经历漫长的等待期。最后在勇敢尝试后才发觉,只要第一次审核上线了,后面的修改同域名下的路劲信息就会变得轻车熟路,个把小时后就能自动生效了,不用再重新提审。
这样倒是有个风险点,可以随意改路劲信息的话,那AB面岂不是轻而易举了?尤其那些打擦边球的项目???还是觉得有风险。不过大家都是好公民,还是乖乖的做合理的项目哈
总结、踩坑
到了这里就不藏着掖着了,大揭秘来了。什么云闪付小程序,什么云闪付开发者工具,真的就是H5套了个壳!!!套了个什么壳,云闪付这三个字的壳
云闪付小程序,无非就是一个H5的项目,你可以用传统jQ,可以用Vue/React/Angular都行,只要你头部引入它的sdk文件,你就能调用它的真机功能(支付、扫一扫...),其实总结就是,云闪付小程序就是混合开发的H5。
至于云闪付开发者工具,刚开始开发的时候不懂非必须是啥意思,然后被微信小程序的上线打包场景自动代入,以为要上线就必须借助他们的开发者工具。实际上是完全一点关系都没有,下载下来更多的是给自己添堵,开发云闪付小程序完全可以不用他们的开发者工具啊,VSCode、Webstorm...都可以,因为从头到尾就只引用了他们的一个脚本script引用sdk而已啊,所有的打包和编译命令,只要用终端命令就可以了。
踩坑:
路漫漫其修远兮,吾将上下而求索......
坑...不少,这个sdk安卓和iOS上面的表现不同步,那就有兼容性问题存在。
- 踩坑第一条:
以前可以通过H5引流页联系业务方(云闪付)开启白名单在云闪付扫一扫后直接打开H5页面,然后在H5 跳转到小程序里,类似于活动页注册登录引流跳转小程序,现在这个入口已经被官方通道关闭了
- 踩坑第二条:
小程序的生命周期还无法使用,例如微信的onLaunch、onShow、onHide,以而在安卓中容易造成不关闭小程序的情况下二次打开页面依然是上一次的内容,而且不执行当前页面的任何生命周期方法
- 踩坑第三条
纯静态页面扫一扫打开小程序,iOS端A -> B页,关闭B页后再扫一扫,依然会回到B页面而非首页
......
最后的最后,云闪付小程序,虽然没有想象中的那么容易,但也绝对没有你想象中的那么难,无非就是踩坑、填坑,再踩坑、再填坑然后就可以上线了...