支付宝小程序 完结篇


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

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的情况 ,于是让后台改了一下返回的状态码,果然是

解决了问题


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 228,412评论 6 532
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 98,514评论 3 416
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 176,373评论 0 374
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 62,975评论 1 312
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,743评论 6 410
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,199评论 1 324
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,262评论 3 441
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,414评论 0 288
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,951评论 1 336
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,780评论 3 354
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,983评论 1 369
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,527评论 5 359
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,218评论 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,649评论 0 26
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,889评论 1 286
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,673评论 3 391
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,967评论 2 374

推荐阅读更多精彩内容