uni-app 开发支付宝百度小程序注意事项及解决

admin管理员组

文章数量:1654379

开发文档

• 支付宝小程序开发文档

• 百度智能小程序开发文档

百度小程序

已知的差异/问题：

• 不支持属性选择器
• 不支持 scoped
• login / getUserInfo 等功能在模拟器（开发工具）上不能模拟
• 支付功能模拟不了
• map 组件在开发工具上预览效果不对，但是手机上是对的。
• getSystemInfo 获取到的 windowHeight 在模拟器中值不正确，真机预览是正确的。
• v-if 和 v-for 不可在同一标签下同时使用
• 页面中引入自定义组件时，渲染的结果中外层会有一个 template 标签，这会导致部分选择器对应的样式匹配不上。

支付宝小程序

支付宝小程序的规范差异相对较多，API 部分的差异请仔细参考文档说明：
https://uniapp.dcloud.io/api/README

比较明显的一个点就是，媒体部分支付宝小程序只有图片，而没有音视频。

支付宝分包，需要HBuilderX 2.2.3 alpha以上版本才支持。

已知的差异/问题：

• showLoading 是不透传的，也就是说 loading 显示的时候无法点击页面内容。
• 文件名或文件夹名中不允许出现 @ 符号
• 网络请求返回的数据会严格按照 dataType 进行处理，如果不符合规范则会跑错错误，而不是按照原格式返回。
• canvas 组件的标识是 id，而不是 canvas-id。目前还未进行处理，所以需要主动添加 id 属性。
• 目前测试的结果，导航栏只有设置背景颜色为 #FFF(FFF) 时才会变成黑色文字。
• 支付宝小程序的导航栏是支持透明渐变效果的，后面会提供相关的配置。
  使用伪元素做边框时，高度值不能用 1upx，需要直接用 1px。
• 不支持 ECharts
• 支付功能模拟不了

支付宝小程序问题及解决

问题：调试报错问题

请求成功但报错

解决办法：

不使用调试包,使用发行包进行调试

问题：图标引用问题

解决办法：

加上支付宝小程序条件编译

问题：scroll-view高度问题

解决办法：

给swiper加上指定高度,

问题：swiper 轮播插件 和 notice 滚动通知插件 样式冲突

解决办法：

加 ！important 来处理样式冲突

问题：image图片样式出错

解决办法：

设置image标签的mode属性为widthFix

问题：垂直分类左侧滚动分类宽度塌陷(样式冲突)

解决办法：

min-width: 180rpx !important; max-width: 180rpx !important;

问题：支付宝不支持picker的mode属性，仅支付单项picker

解决办法：

将多项picker进行拆分

问题：不支持自定义头部导航

不支持的定义在于，无法通过navigationStyle的配置去掉顶部的默认返回按钮

解决办法：

始终左上角会有返回按钮盘踞，但是可以通过设置

达到一种类似与自定义导航的效果，但是点击左上角，还是会返回

看似自定义，实际上在左上角仍然有默认的返回按钮

问题：span 标签上不能绑定事件

uni-app上是支持使用span标签写代码的，在编译时会被编译成label标签，而支付宝小程序在label上绑定事件不生效。

解决办法：

不用span

问题：picker组件内部只能包含一个子元素

解决办法：

如果业务场景需要多个的话，就在外面包一个父元素

问题：rich-text的nodes仅支持Array类型

解决办法：

注意：html-parser针对一些复制过来的富文本内容可能会产生解析错误的问题，而使用原始string不会出问题。

问题：class不支持[],object的形式进行动态绑定

解决办法：

可以使用string的形式绑定

问题：input组件具有默认的白色背景和padding还有一些默认样式

解决办法：

可以在公共样式中覆盖

问题：避免在slot内嵌元素上使用v-if条件渲染

解决办法：

问题：uni.request的statusCode

uni.request发起请求，如果返回的statusCode是400

支付宝：会认为是请求失败

微信小程序：会认为请求成功

解决办法：

可以让后端接口请求，如果请求通过，统一返回statusCode200，然后在返回的数据中再进行逻辑判断

问题：label标签具有默认的行高

label{
	line-height:1.8
}

解决办法：

支付宝中label有1.8的行高，所有表现样式会比微信小程序高一些，可以在公共样式中重置

label{
	line-height:1
}

问题：navigateBack的delta的值不能为-1

解决办法：

在微信小程序中如果想返回上一个页面,可以使用delta为-1或者1都行,但是H5和支付宝小程序使用-1会导致无法正常返回

问题：支付宝小程序不支持多列选择器(日期，时间，地区)

解决办法：

使用单列选择器 (年月日，时分秒，省市镇)

问题：switch滑块组件使用报错 ……‘color’

解决办法：

在onReady生命周期种加入判断 用v-if等页面加载完成后再渲染组件

问题：全局注册自定义组件(main.js中)可能会失败

解决办法：

页面使用单独引入

问题：文本隐藏超出内容失败

解决办法：

将元素改为块级元素 display:block;

问题：uniapp开发不能使用支付宝小程序的ontitleclick函数 点击不生效

解决办法：

暂未解决

更多差异

大家如果有其它发现，欢迎评论。

本文标签： 支付宝注意事项程序Uniapp