支付宝小程序 完结篇


写这篇文章之前,首先 吐槽一下支付宝小程序开发工具(蚂蚁开发者工具),希望支付宝团队能够给后来的开发者带来更好的编码体验。谢谢!!!!

1. 时不时的给我弹出扫码登录。

关键是我进入开发工具时已经扫过一次,代码编译完之后又要让我扫,而且不止一次。。。。(心里真是一万个草泥马奔腾,啥都不说了,给你个眼神自己体会,你懂得)

2.扫一扫  需要自己设定返回来的数据。  

我想支付宝这样设计的初衷应该是好的,设计数据比较自由,人性化。 可是,我想说的是(大哥,这是扫码码啊,能不能给我一点真实的体验,而且如果我是小白,不会设置又该怎么办?? 唉,宝宝心里苦,想静一静)

3.清除缓存设置

说实话,对于做过微信小程序的我来说,这一点让我实在无法忍受。不说了,直接看图,这是微信小程序清理缓存


微信小程序清除缓存

来,再来看看咱们亲爱的支付宝


支付宝小程序清除缓存

大哥,我清理个缓存还需要打开调试,然后手动清除。。。。这让我又回到了浏览器清理缓存的年代,唉!

4.调试界面 需要手动放大

打开调试(最左侧第二个,感觉像七星瓢虫的按钮),右边的窗口默认是这样的


调试界面默认打开窗口

需要手动点击左上角放大按钮,才会放大 。。。。而且我点击编译按钮接着写代码之后再次打开调试界面之后调试窗口又变得很小。。。(我只想说,my god !!!  我想调试一下js 为什么就这么难!!! 难道是我打开的姿势不对!!!!!)

好吧,吐槽完蚂蚁开发者工具的一丢丢小问题(是不是小问题,给你个眼神,自己体会。。。),接下来咱们步入正题,来谈谈我在这次支付宝小程序开发过程中遇到的一些问题,希望看到的朋友相互学习,共同进步哈(真心恳求 看过的大牛,不足之处给出指点,小生不胜感激)

1.app.json

"window": { "defaultTitle": "ABox", "titleBarColor": "#000000" }

这里是设置一下 你小程序的标题,和标题颜色,支付宝小程序目前还不能设置 标题的背景色(回顾一下微信小程序,对比一下,脸上又是一脸嫌弃。。。。)

2.app.js

onShow(query) { if(query.length){ //判断一个对象是否存在 let qrCode = query.query.qrCode let queryParms = qrCode.split("?")[1] let params = queryParms.split('&') let shelfNumber='' if (params) { params.forEach(v => { let kv=v.split("=") if (kv.length>1){ if (kv[0]==="id"){ shelfNumber=kv[1] } } }) } my.setStorageSync({ key: 'shelfNumber', data: shelfNumber }); } }

这里主要是设置一下 用支付宝扫一扫 就能获取到我们的商品banner、和商品列表。我想这是一个十分普遍而又正常的需求。这里需要后台配置好二维码的一些返回路径和一些参数 ,具体因产品而异。这里,我主要想说的是,我把这个扫完二维码获取相应的参数,放在了 app.js 的 onshow(query) 里面  ,刚开始 我放在了home.js 的 onload(query)  获取的参数不是我想要的,最后结合后台,又看了一些小程序的生命周期函数,选择放在了 app.js 的 onshow(query)( app.js 的 onshow() 比hoeme.js onload() 方法提前执行,尽管你在app.json里面配置了默认显示的是 hoeme

3. 缓存

my.setStorageSync({  key: 'shelfNumber', data: shelfNumber });

不得不说,对于做过微信小程序的我来说,这跟微信小程序还是有区别的。(还好坑不大,没摔死。。。。) 咱们下面来看一下微信小程序 的:

wx.setStorageSync("UserInfo", userInfo)

是不是简单好多。当然取缓存的时候也是有区别的,支付宝的:

let shelfNumber = my.getStorageSync({ key: 'shelfNumber' }).data;

微信的:

let JSONToken = wx.getStorageSync("JSONToken")

4.find 方法

这是es6 的方法 刚开始在我的iphone8上我们的商品列表还可以显示出来,换到我的另一款手机 Android 手机 和 产品经理的华为9 上面却是空的。最后定位为 find在安卓上报错 不是一个方法 。 

刚开始:

let layer = products.find(function (v) { return v.id == data.cid })

最后换成了这个:

let layer = {} for (var i = 0; i < products.length; i++) { if (products[i].id == data.cid) { layer = products[i] break } }

解决了问题

5.image 问题

刚开始我把购物车中 -  + 号图片的用了同一个class 名:

.oprateredimage{ width:100%; height: 100%}

+号图片 死活显示不出来。刚开始以为自己的样式写的有问题,自己检查了一下没有问题,最后实在无解,

就对 + 图片这样设置

.cart-add-image{ width: 50rpx; height: 50rpx;}

解决了问题

6.swiper高度问题

我们的头部是一个swiper和一个包括 货架编号和扫一扫的盒子 ,这样的:


商品列表页头部

刚开始我对头部进行了position:fixed定位,货架编号和扫一扫的盒子死活显示不正确,最后进行检查


swiper默认高度

swiper有默认高度 ,改成了这样:

.swiperView{ width: 100%; height: 188rpx !important; }

解决了问题

7.my.httpRequest 问题

headers 

这个说实话有点坑,因为我们去结算的时候需要请求一下后台生成订单的接口,此时需要传一下  headers当时我也传按照后台的需要传了,但是后台那边一直显示header 为空 ,自己也撸了一下逻辑,感觉没问题啊  最后冷静下来,又看了一遍支付宝小程序的网络请求 。终于找到了问题所在  headers  ,信小程序用的是 header  。由于是刚做完微信小程序又接着做的支付宝小程序,以为一样,就也写成了 header,所以才会出现错误

success

这个问题是我在用户授权的时候发现的,我在用户授权之后需要调一下后台接口,获取token,明明是新的授权码,可是一直获取不到token,看了一下后台返回额状态码 201  显示已生成token,没走 success,走了catch(用promise写的),虽然是查了一下状态码 201:请求已经被实现,而且有一个新的资源已经依据请求的需要而建立 。但好像并没有什么卵用(可能自己太菜了),最后自己灵光一闪:是不是支付宝小程序   my.httpRequest  success 只是针对 状态码是200的情况 ,于是让后台改了一下返回的状态码,果然是

解决了问题


好累,终于写完了。以上就是我对支付宝小程序的一些拙见。希望看过朋友的多多指点,相互学习。谢谢!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容