支付宝小程序避坑指南

591 阅读3分钟

一切功能以真机效果为准!

页面跳转

1. 跳转带有tabBar的页面

必须使用 my.switchTab() ,否则跳转到页面后 tabBar 会消失。

2. my.switchTab()

路由参数不能写query字符串,如果需要跳转到带有tabBar页面并需要带入参数的,可以在跳转之前把参数存到store里,跳转到页面之后在页面中读取刚刚存store的参数。

页面配置

1. 页面标题无法居中

通过在 index.json 配置 defaultTitle 的titleBar标题是无法居中的,都是左对齐。

2. 页面标题字体颜色无法配置

titleBar标题的字体颜色是根据 index.json 配置的 titleBarColor 来自动映射的,如果 titleBarColor 设为 #fff(白色) 标题字体颜色就是 #000(黑色),titleBarColor 配置其他所有颜色标题字体颜色都是 #fff(白色)。

3. 小程序页面标题/Logo重叠

我们手动设置页面logo/标题时,当我们从外部网址跳回某一页面(logo手写css/定位),会出现外部页面标题与回到的页面logo重叠,可以默认设置json的defaultTitle为“”空字符串

4. 页面样式隔离

默认情况下,页面的样式将对外产生影响。从基础库版本 2.7.2 开始,可以在页面的 .json 文件中配置 styleIsolation,避免页面的样式影响到外部。

{
  "styleIsolation": "apply-shared"
}

该选项支持以下取值:

  • apply-shared 表示 app.acss 样式以及其他(设置了 shared 的其他页面和自定义组件)的样式将影响到当前页面,但当前页面 acss 中指定的样式不会影响外部。
  • shared(默认)表示 app.acss 样式以及其他(设置了 shared 的其他页面和自定义组件)的样式将影响到当前页面,当前页面 acss 中指定的样式也会影响到外部。

新建组件默认会配置样式隔离

小程序组件库

1. Modal、Popup(浮层组件)

(1)如果内容需要滚动,css设置 overflow: auto; 或者使用 scroll-view 在ide上是可以正常显示,但是在真机上不行,这里需要在浮层组件传入disableScroll=false,在真机就能正常滑动了。

(2)在带有tabBar页面中使用需要注意,tabBar层级是最高的,mask层无论设置多高的层级也无法覆盖。所以在使用 Modal和Popup 组件时没有办法使 tabBar 在mask层下。使用 Popup 时,在唤起时调用 my.hideTabBar();隐藏tabBar,在关闭的回调中调用 my.showTabBar() 来显示tabBar。

2. input-item(输入栏)

在真机上输入时,ios会默认唤起键盘,如果页面中有 fixed 元素,这时数字键盘就会把元素给顶上去,所以这里我们需要在 onBlur 和 onFocus 事件中控制 fixed 元素的 position。

3. checkbox-group(多项选择器组)

onChange 返回的values数组有bug,如果配合 Am-checkbox 或 checkbox 组件使用的话,建议自己新建一个变量来控制各个复选框的value值。

4. textarea

组件中加上 enableNative="{{false}}",避免 textarea 弹出键盘后出现内容上移。在 textarea 代码中加上 enableNative="{{false}}" ,可解决 Android 系统下 textarea 获取焦点的时候文字消失问题。

5. lottie(动画组件)

动画只能在真机上展示,ide上不支持

小程序API

1. my.setClipboard(设置粘贴板)

以真机为准,在ide调用时不生效无法复制。

2. my.ap.navigateToAlipayPage(跳转小程序外的固定页面)

test环境 下,ios 的安全策略问题会有限制跳转的问题。

3. my.setNavigationBar(设置导航栏标题和样式、Logo)

预发、生产环境,搜索进入页面时,当标题不是json中设置的defaultTitle 或 logo、标题 不是通过API设置时,会出现 返回首页按钮与我们手动设置的logo重叠