小程序的多端表现差异(支付宝/微信)

1. showModal:在showCanceltrue时,支付宝/微信success返回一致,均为{confirm: true/false}showCancel为false时,微信返回照旧,支付宝返回{success: true},影响判断res.confirm

2. showLoadingshowToast:微信使用同一套机制,hideLoading时会销毁toastshowToast也会顶掉showLoading,支付宝在开发工具上showToastshowLoading是共存状态,两者互不干涉。
导致问题:添加hideLoading后,微信会销毁toast,造成toast闪现即消失,不添加则支付宝loading不消失
解决hideLoading前置,销毁loading后再toast,或判断环境,仅支付宝hideLoading
Plus: wx.hideLoading2.22.1版本已增加noConflict参数用于区别loadingtoast

3. readFileSyncFileSystemManager.readFileSync(file,'base64'):没啥可说的,文档定义不同。以base64举例,微信调用后直接返回的string,支付宝返回的{ "data": "文件内容", "dataType": "string", "success": true }。以构建环境区分取值即可。

4. 支付:微信使用requestPayment,支付宝使用tradePay,传参各有差异,详询文档。需注意微信的success回调代表支付成功,而支付宝的success回调仅代表API调用成功,是否支付成功需判断返回体,更靠谱的做法是等支付宝的异步回调通知。

另:TaroJs中并未声明tradePay类型,导致标红。issue已提,已有相关commit,待Taro发版后修复。

5. 自定义导航栏

微信设置为custom即可,支付宝配置如图。

需要注意微信的表现是整个导航栏除胶囊外都消失,支付宝则是除胶囊外单项配置,而且返回按钮不支持配置隐藏。

这意味微信需要配返回按钮,支付宝不需要配,否则会有两个返回。
此处未解决的问题是:支付宝的返回按钮在导航栏隐藏后没有背景,只有一个箭头图标,虽然可以配置颜色,但是在不定背景下没办法预知应该配重色还是白色

设计效果
支付宝下没有自定义返回时白背景的表现
黑色背景的表现
尝试提高返回组件层级,未果,根本盖不住
无法遮挡箭头
暂时把自定义的返回箭头去掉了,只留一个白圈,但是白圈和原生的返回箭头对不对得准就两说了。
补充:实测不同机型返回箭头位置是不一样的,更别说对准了。
返回处不再使用圆形背景,暂时就这样吧

6. compressImage:同3,文档定义不同,传参有差异,且Tarojs类型上没有支付宝参数,需要自行适配。
API在支付宝开发者工具上不生效,真机生效。微信表现待补充。
注:该API较新,原有压缩方案为canvas手动缩长宽然后toDataUrl(),支付宝转换表现为base64体积三倍增大,且canvasContext不再维护,故弃用。

7. 样式问题:支付宝的 acss 样式不支持属性选择器,错误使用属性选择器可能无法展示预期的效果。如input[type='search']

8.分包:支付宝分包包名 root 不能是 main 或者 whole (main)

9.城市选择:有虑于城市选择组件的数据更新问题,决定使用官方提供的选择器。微信使用插件实现,详见地址,支付宝使用API实现my.chooseCity

城市选择

10.定位:微信根据合规要求提高了精确定位的准入门槛,申请成功后可用,可暂时使用模糊定位;
支付宝精确定位仍能使用,且有更为便捷的my.ap.getMainSelectedCity可以获取到当前支付宝用户设置的主城市

主城市

11.支付宝小程序ahooks/lodash使用报错
小程序框架Taro 3.6.5 支付宝开发工具版本3.7.4
现象:项目引用了ahooks中的useDebounceFn,报错Cannot read properties of undefined (reading 'now'),定位是ahooks使用lodash/now.jsDate对象为undefined

报错
解决:如下图,在app.ts中覆盖原生对象

12.支付宝小程序,键盘弹起,输入框被挡住
全局配置,添加 enableInPageRenderInput: 'YES',Input组件,添加 alwaysSystem:true;另外可设置Input组件cursor-spacing指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

13.安卓手机微信小程序调用camera组件,相机无法显示
问题:安卓手机,微信小程序调用camera组件,相机无法显示,但是可以调用拍照api,ios正常
原因:层级问题
解决:1、window 下配置添加renderingMode属性,属性值为seperated,·这个会关闭所有组件的同层,如果有组件希望同层可以再配置 mixedRenderComponents: ["video"] 给特定组件开启同层
2、设置相机和相机上的cover-view的层级,相机层级最小

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

推荐阅读更多精彩内容