支付宝小程序

支付宝示例小程序

创建方式

1. 打开支付宝的小程序开发者工具
2. 新建小程序
3. 选择支付宝端
4. 选择小程序示例模版
5. 填写项目名称和项目路径

兼容情况

1. node_modules 中的库需要先使用 构建 npm
2. 扩展组件在开发兼容中
3. 其他兼容情况查看下方详细列表

已知问题

部分 API 未实现

• 解决方案：可以使用 canIUse 来判断兼容性，不兼容的 API 建议避免使用或者查询文档使用 FinClip 小程序提供的 API

不支持 lottie 组件

• 解决方案：暂不支持，待适配

slot 使用方式不一致

1. 不支持 slot-scope、$slots

• 解决方案：暂不支持，待适配

2. <slot></slot> 标签内部元素在任何情况下都不会渲染

• 解决方案：暂不支持，待适配

不支持 Page 的 events，Component 的 rootEvents

• 解决方案：暂不支持，待适配

不支持 Page 配置项的 onOptionMenuClick、onTitleClick

• 解决方案：暂不支持，待适配

不支持 Component 的 $page

• 解决方案：暂不支持，待适配

Component 的 deriveDataFromProps 与支付宝不一致

注意

1. 在初始化触发时的值时默认值，并不是由父组件传入的值
2. 在调用了 setData 但 data 或 props 值未改变也会触发

Component 的 didUpdate 与支付宝不一致

注意

参数并不是修改前的数据，触发时机可能不正确

组件嵌套生命周期执行会不一致

示例代码

  <comp-a>
    <comp-b/>
  </comp-a>

注意

• 像 page 中的这种结构，FinClip 的方案是 comp-b 属于 page 的，所以不管 comp-a 中是否有 slot 节点，都会去创建 comp-b，只是不会渲染到页面上（这样会触发 created、attached，不会触发 ready）。
• 支付宝的方案是需要渲染才创建，相当于 comp-b 是属于 comp-a 的，当 comp-a 没有 slot 节点的时候就不会执行 comp-b 的生命周期。

axml 属性格式不一样

 <!-- 错误 -->
<video id="myVideo" src={{src}}></video>

 <!-- 正确 -->
 <!-- 必须使用引号 -->
 <video id="myVideo" src="{{src}}"></video>

数据绑定解析的方式不一样

1. 不支持非表达式

   <!-- 错误 -->
   <view style="{{ height: activeTab === 1 ? 'auto' : 0 }}"></view>
   
   <!-- 正确 -->
   <view style="height:{{ activeTab === 1 ? 'auto' : 0 }}"></view>
   

2. 不支持模版字符串

   <!-- 错误 -->
   <view style="{{`width: ${size}; height: ${size};`}}"></view>
   
   <!-- 正确 -->
   <view style="width: {{size}};height: {{size}}"></view>
   
   <!-- 错误 -->
   <view style="{{(src ? `background-image: url('${src}'); background-color: transparent` : '')}}"></view>
   
   <!-- 正确 -->
   <view style="{{src ? 'background-image: url('+ src +'); background-color: transparent' : ''}}"></view>
   

3. style 不支持传入对象

   <!-- 错误 -->
   <view style="{{{width:size,heigth:size}}}"></view>
   
   <!-- 正确 -->
   <view style="width: {{size}};height: {{size}}"></view>
   

Mixin 不支持支付宝生命周期的合并

注意

Mixin 中定义的支付宝生命周期（onInit、deriveDataFromProps、didMount、didUpdate、didUnmount、onError）与自定义组件中定义的生命周期不会合并，会直接使用自定义组件中定义的生命周期。lifetimes 中定义的会正常走合并逻辑。

background-image 不支持使用本地路径

• 解决方案：暂不支持，待适配，或者使用 image 组件

dataset 不支持设置对象

• 解决方案：暂不支持，待适配，或者将数据使用 JSON.stringify 序列化，使用时再使用 JSON.parse 解析

通过 props 传入数据到 class 使用可能表现不一致

注意

1. 如果是通过 props 传入数据到 class 使用，这个数据会收样式隔离的影响。比如 props 传入的数据是 hot，但实际渲染到页面上可能会是 class-prefix--hot。
2. 建议使用 externalClasses 代替。

createSelectorQuery 表现不一致

注意

my.createSelectorQuery() 不支持直接在整个页面中查找，无法穿透组件。需要改成 this.createSelectorQuery()，或者多调用 .in(this)，限制在对应组件中查找，或者在组件的上一层添加 class，然后 selector 使用 >>> 选择器查找到组件内部的元素节点

pickerview 组件需要设置宽高才能正常渲染

注意

在支付宝小程序中 pickerview 可以不设置宽高就渲染，在 FinClip 小程序中需要设置宽高，否则会按照宽高为 0 来渲染。

input 组件 maxlength 默认值

注意

在 FinClip 小程序中 input 组件 maxlength 绑定了 undefined 会转换成 0，导致 input 无法输入.如果不需要设置 maxlength 请不要设置成 undefined

scroll-view 组件 flex 布局使用方式不一致

注意

scroll-view 如果需要通过 flex 来控制内部元素的布局方式，需要在 scroll-view 开启 enable-flex

canvas 创建方式不同

注意

支付宝小程序中的 canvas 创建方式在 FinClip 小程序中是旧版，需要改成新版 canvas API

第三方库的使用

注意

支付宝不用构建 npm，所以可以在开发时直接引用 node_modules 内的文件，在 FinClip 小程序需要先构建 npm，这样只能引用 npm 包指定的 main 文件

自定义组件渲染方式

• 因为实际创建的节点元素的方式不一样，支付宝自定义组件并不会创建一个真实的 dom 节点来包裹，这样导致 flex 布局可以直接控制内外部元素。微信的是会创建一个真实 dom，这样会隔离组件，内外部元素就无法直接用 flex 布局控制

暂不支持支付宝小程序插件功能

• 解决方案：暂不支持，待适配