FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# 支付宝小程序

# 支付宝示例小程序

# 创建方式

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

# 兼容情况

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

# 已知问题

# 部分 API 未实现

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

# 不支持 lottie 组件

  • 解决方案:暂不支持,待适配

# slot 使用方式不一致

  1. 不支持 slot-scope、$slots
  • 解决方案:暂不支持,待适配
  1. <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 中定义的支付宝生命周期(onInitderiveDataFromPropsdidMountdidUpdatedidUnmountonError)与自定义组件中定义的生命周期不会合并,会直接使用自定义组件中定义的生命周期。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 布局控制

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

  • 解决方案:暂不支持,待适配
© 2022 FinClip with ❤