如何导入支付宝小程序 示例

网友投稿 325 2024-07-02

支付宝小程序

#支付宝示例小程序

#创建方式

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

#兼容情况

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

#已知问题

#部分 API 未实现

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

#不支持 lottie 组件

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

#slot 使用方式不一致

不支持 slot-scope、$slots

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

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

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

#不支持 Page 的 events，Component 的 rootEvents

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

#不支持 Page 配置项的 onOptionMenuClick、onTitleClick

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

#不支持 Component 的 $page

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

#Component 的 deriveDataFromProps 与支付宝不一致

注意

在初始化触发时的值时默认值，并不是由父组件传入的值
在调用了 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>
        已复制代码

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

不支持非表达式

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

不支持模版字符串

<!-- 错误 --><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>
        已复制代码

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 使用可能表现不一致

注意

如果是通过 props 传入数据到 class 使用，这个数据会收样式隔离的影响。比如 props 传入的数据是 hot，但实际渲染到页面上可能会是 class-prefix--hot。
建议使用 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 布局控制

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

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

标签：示例程序小程序属性小程序插件

暂时没有评论，来抢沙发吧~