微信组件 type 定义

packages/remax-cli/src/build/plugins/components.ts

@@ -53,7 +53,7 @@ export default (adapter: Adapter) => () => ({
           return;
         }
 
-        if (id === 'picker-view-column') {
+        if (adapter.name === 'alipay' && id === 'picker-view-column') {
           return;
         }
 

packages/remax-cli/templates/wechat/component.ejs

@@ -4,7 +4,7 @@
   <<%=id%> <% for(let key of props) { %> <%=key%>="{{_h.v(i.props.<%=camelCased(key)%>)}}" <% } %>>
     <% if (id === 'swiper') { %>
     <block wx:for="{{i.children}}" wx:key="{{id}}">
-      <swiper-item key="{{item.props.key}}">
+      <swiper-item item-id="{{item.props.itemId}}" key="{{item.props.key}}">
         <block wx:for="{{item.children}}" wx:key="{{id}}">
           <template is="REMAX_TPL_<%= templateId + 1%>_CONTAINER" data="{{i: item}}" />
         </block>

packages/remax/src/adapters/wechat/components/Ad.ts

@@ -1,5 +1,13 @@
 import factory from './factory';
 
-const Ad = factory('ad');
+const Ad = factory<AdProps>('ad');
+
+export interface AdProps {
+  unitId: string; // 是 广告单元id，可在小程序管理后台的流量主模块新建 1.9.94;
+  adIntervals?: number; // 否 广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新） 2.3.1
+  onLoad?: (event: any) => void; // 否 广告加载成功的回调 2.2.1
+  onError?: (event: any) => void; // 否 广告加载失败的回调，event.detail = {errCode: 1002} 2.2.1
+  onClose?: (event: any) => void; // 否 广告关闭的回调 2.6.5
+}
 
 export default Ad;

packages/remax/src/adapters/wechat/components/Audio.ts

@@ -1,5 +1,6 @@
 import factory from './factory';
 
+// 微信已不再维护
 const Audio = factory('audio');
 
 export default Audio;

packages/remax/src/adapters/wechat/components/Button.ts

@@ -1,5 +1,38 @@
 import factory from './factory';
+import { CSSProperties } from 'react';
 
-const Button = factory('button');
+const Button = factory<ButtonProps>('button');
+
+export interface ButtonProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  size?: string; // default 否 按钮的大小 1.0.0
+  type?: string; // default 否 按钮的样式类型 1.0.0
+  plain?: boolean; // false 否 按钮是否镂空，背景色透明 1.0.0
+  disabled?: boolean; // false 否 是否禁用 1.0.0
+  loading?: boolean; // false 否 名称前是否带 loading 图标 1.0.0
+  formType?: string; //  否 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 1.0.0
+  openType?: string; //  否 微信开放能力 1.1.0
+  hoverClass?: string; // button-hover 否 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 1.0.0
+  hoverStopPropagation?: boolean; // false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0
+  hoverStartTime?: number; // 20 否 按住后多久出现点击态，单位毫秒 1.0.0
+  hoverStayTime?: number; // 70 否 手指松开后点击态保留时间，单位毫秒 1.0.0
+  lang?: string; // en 否 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 1.3.0
+  sessionFrom?: string; //  否 会话来源，open-type="contact"时有效 1.4.0
+  sendMessageTitle?: string; // 当前标题 否 会话内消息卡片标题，open-type="contact"时有效 1.5.0
+  sendMessagePath?: string; // 当前分享路径 否 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 1.5.0
+  sendMessageImg?: string; // 截图 否 会话内消息卡片图片，open-type="contact"时有效 1.5.0
+  appParameter?: string; //  否 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 1.9.5
+  showMessageCard?: boolean; // false 否 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 1.5.0
+  onClick?: (event: any) => void;
+  onGetUserinfo?: () => void; // 否 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 1.3.0
+  onContact?: () => void; // 否 客服消息回调，open-type="contact"时有效 1.5.0
+  onGetPhonenumber?: () => void; // 否 获取用户手机号回调，open-type=getPhoneNumber时有效 1.2.0
+  onError?: () => void; // 否 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 1.9.5
+  onOpenSetting?: () => void; //  否 在打开授权设置页后回调，open-type=openSetting时有效 2.0.7
+  onLaunchApp?: () => void; //  否 打开 APP 成功的回调，open-type=launchApp时有效 2.4.4
+  animation?: Record<string, any>[];
+}
 
 export default Button;

packages/remax/src/adapters/wechat/components/Camera.ts

@@ -1,5 +1,17 @@
 import factory from './factory';
 
-const Camera = factory('camera');
+const Camera = factory<CameraProps>('camera');
+
+export interface CameraProps {
+  id?: string;
+  mode?: string; // normal 否 应用模式，只在初始化时有效，不能动态变更 2.1.0
+  devicePosition?: string; // back 否 摄像头朝向 1.0.0
+  flash?: string; // auto 否 闪光灯，值为auto, on, off 1.0.0
+  frameSize?: string; // medium 否 指定期望的相机帧数据尺寸 2.7.0
+  onStop?: (event: any) => void; //  否 摄像头在非正常终止时触发，如退出后台等情况 1.0.0
+  onError?: (event: any) => void; //  否 用户不允许使用摄像头时触发 1.0.0
+  onInitDone?: (event: any) => void; //  否 相机初始化完成时触发 2.7.0
+  onScanCode?: (event: any) => void; //  否 在扫码识别成功时触发，仅在 mode="scanCode" 时生效 2.1.0
+}
 
 export default Camera;

packages/remax/src/adapters/wechat/components/Canvas.ts

@@ -1,5 +1,18 @@
 import factory from './factory';
 
-const Canvas = factory('canvas');
+const Canvas = factory<CanvasProps>('canvas');
+
+export interface CanvasProps {
+  type?: string; //  否 指定 canvas 类型，当前仅支持 webgl 2.7.0
+  canvasId?: string; //  否 canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 1.0.0
+  disableScroll?: boolean; // false 否 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 1.0.0
+  onClick?: (event: any) => void;
+  onTouchStart?: (event: any) => void; //  否 手指触摸动作开始 1.0.0
+  onTouchMove?: (event: any) => void; //  否 手指触摸后移动 1.0.0
+  onTouchEnd?: (event: any) => void; //  否 手指触摸动作结束 1.0.0
+  onTouchCancel?: (event: any) => void; //  否 手指触摸动作被打断，如来电提醒，弹窗 1.0.0
+  onLongClick?: (event: any) => void; //  否 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 1.0.0
+  onError?: (event: any) => void; //  否 当发生错误时触发 error 事件，detail = {errMsg} 1.0.0
+}
 
 export default Canvas;

packages/remax/src/adapters/wechat/components/Checkbox.ts

@@ -1,5 +1,18 @@
 import factory from './factory';
+import { CSSProperties } from 'react';
 
-const Checkbox = factory('checkbox');
+const Checkbox = factory<CheckboxProps>('checkbox');
+
+export interface CheckboxProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  value?: string; //  否 checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value 1.0.0
+  disabled?: boolean; // false 否 是否禁用 1.0.0
+  checked?: boolean; // false 否 当前是否选中，可用来设置默认选中 1.0.0
+  color?: string; // #09BB07 否 checkbox的颜色，同css的color 1.0.0
+  animation?: Record<string, any>[];
+  onClick?: (event: any) => void;
+}
 
 export default Checkbox;

packages/remax/src/adapters/wechat/components/CheckboxGroup.ts

@@ -1,5 +1,18 @@
 import factory from './factory';
+import { CSSProperties } from 'react';
 
-const CheckboxGroup = factory('checkbox-group');
+const CheckboxGroup = factory<CheckboxGroupProps>('checkbox-group');
+
+export interface CheckboxGroupProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  value?: string; //  否 checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value 1.0.0
+  disabled?: boolean; // false 否 是否禁用 1.0.0
+  checked?: boolean; // false 否 当前是否选中，可用来设置默认选中 1.0.0
+  color?: string; // #09BB07 否 checkbox的颜色，同css的color 1.0.0
+  animation?: Record<string, any>[];
+  onClick?: (event: any) => void;
+}
 
 export default CheckboxGroup;

packages/remax/src/adapters/wechat/components/CoverImage.ts

@@ -1,5 +1,17 @@
 import factory from './factory';
+import { CSSProperties } from 'react';
 
-const CoverImage = factory('cover-image');
+const CoverImage = factory<CoverImageProps>('cover-image');
+
+export interface CoverImageProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  src?: string; //  否 图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。暂不支持base64格式。 1.4.0
+  onLoad?: (event: any) => void; // 否 图片加载成功时触发 2.1.0
+  onError?: (event: any) => void; //  否 图片加载失败时触发 2.1.0
+  animation?: Record<string, any>[];
+  onClick?: (event: any) => void;
+}
 
 export default CoverImage;

packages/remax/src/adapters/wechat/components/CoverView.ts

@@ -1,5 +1,15 @@
 import factory from './factory';
+import { CSSProperties } from 'react';
 
-const CoverView = factory('cover-view');
+const CoverView = factory<CoverViewProps>('cover-view');
+
+export interface CoverViewProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  scrollTop?: number | string; //		否	设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效	2.1.0
+  onClick?: (event: any) => void;
+  animation?: Record<string, any>[];
+}
 
 export default CoverView;

packages/remax/src/adapters/wechat/components/Editor.ts

@@ -1,5 +1,22 @@
 import factory from './factory';
+import { CSSProperties } from 'react';
 
-const Editor = factory('editor');
+const Editor = factory<EditorProps>('editor');
 
+export interface EditorProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  readOnly?: boolean; // false 否 设置编辑器为只读 2.7.0
+  placeholder?: string; //  否 提示信息 2.7.0
+  showImgSize?: boolean; // false 否 点击图片时显示图片大小控件 2.7.0
+  showImgToolbar?: boolean; // false 否 点击图片时显示工具栏控件 2.7.0
+  showImgResize?: boolean; // false 否 点击图片时显示修改尺寸控件 2.7.0
+  onClick?: (event: any) => void;
+  onReady: (event: any) => void; //否 编辑器初始化完成时触发 2.7.0
+  onFocus: (event: any) => void; //否 编辑器聚焦时触发，event.detail = {html, text, delta} 2.7.0
+  onBlur: (event: any) => void; //否 编辑器失去焦点时触发，detail = {html, text, delta} 2.7.0
+  onInput: (event: any) => void; //否 编辑器内容改变时触发，detail = {html, text, delta} 2.7.0
+  onStatusChange: (event: any) => void; //否 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 2.7.0
+}
 export default Editor;

packages/remax/src/adapters/wechat/components/Form.ts

@@ -1,5 +1,18 @@
 import factory from './factory';
+import { CSSProperties } from 'react';
 
-const Form = factory('form');
+const Form = factory<FormProps>('form');
+
+export interface FormProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  reportSubmit?: boolean; // false 否 是否返回 formId 用于发送模板消息 1.0.0
+  reportSubmitTimeout?: number; // 0 否 等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId 2.6.2
+  onClick?: (event: any) => void;
+  onSubmit?: (event: any) => void; //  否 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''} 1.0.0
+  onReset?: (event: any) => void; //  否 表单重置时会触发 reset 事件 1.0.0
+  animation?: Record<string, any>[];
+}
 
 export default Form;

packages/remax/src/adapters/wechat/components/FunctionalPageNavigator.ts

@@ -1,5 +1,16 @@
 import factory from './factory';
 
-const FunctionalPageNavigator = factory('functional-page-navigator');
+const FunctionalPageNavigator = factory<FunctionalPageNavigatorProps>(
+  'functional-page-navigator'
+);
+
+export interface FunctionalPageNavigatorProps {
+  version?: string; // release 否 跳转到的小程序版本，线上版本必须设置为 release 2.1.0
+  name?: string; //  否 要跳转到的功能页 2.1.0
+  args?: object; //  否 功能页参数，参数格式与具体功能页相关 2.1.0
+  onSuccess?: (event: any) => void; //  否 功能页返回，且操作成功时触发， detail 格式与具体功能页相关 2.1.0
+  onFail?: (event: any) => void; //  否 功能页返回，且操作失败时触发， detail 格式与具体功能页相关 2.1.0
+  onCancel?: (event: any) => void; //  否 因用户操作从功能页返回时触发 2.4.1
+}
 
 export default FunctionalPageNavigator;

packages/remax/src/adapters/wechat/components/Icon.ts

@@ -1,5 +1,17 @@
 import factory from './factory';
+import { CSSProperties } from 'react';
 
-const Icon = factory('icon');
+const Icon = factory<IconProps>('icon');
+
+export interface IconProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  type: string; //  是 icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear 1.0.0
+  size?: number | string; // 23 否 icon的大小 1.0.0
+  color?: string; //  否 icon的颜色，同css的color 1.0.0
+  animation?: Record<string, any>[];
+  onClick?: (event: any) => void;
+}
 
 export default Icon;

packages/remax/src/adapters/wechat/components/Image.ts

@@ -1,5 +1,20 @@
 import factory from './factory';
+import { CSSProperties } from 'react';
 
-const Image = factory('image');
+const Image = factory<ImageProps>('image');
+
+export interface ImageProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  src?: string; //  否 图片资源地址 1.0.0
+  mode?: string; // scaleToFill 否 图片裁剪、缩放的模式 1.0.0
+  lazyLoad?: boolean; // false 否 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 1.5.0
+  showMenuByLongpress?: boolean; // false 否 开启长按图片显示识别小程序码菜单 2.7.0
+  onError?: (event: any) => void; //  否 当错误发生时触发，，event.detail = {errMsg} 1.0.0
+  onLoad?: (event: any) => void; //  否 当图片载入完毕时触发，event.detail = {height, width} 1.0.0
+  animation?: Record<string, any>[];
+  onClick?: (event: any) => void;
+}
 
 export default Image;

packages/remax/src/adapters/wechat/components/Input.tsx

@@ -25,7 +25,7 @@ export interface InputProps {
   adjustPosition?: boolean;
   placeholder?: string;
   placeholderStyle?: CSSProperties;
-  placeholderClass?: string;
+  placeholderClassName?: string;
   disabled?: boolean;
   cursorSpacing?: number;
   onInput?: (...params: any) => void;

packages/remax/src/adapters/wechat/components/Label.ts

@@ -1,5 +1,15 @@
 import factory from './factory';
+import { CSSProperties } from 'react';
 
-const Label = factory('label');
+const Label = factory<LabelProps>('label');
+
+export interface LabelProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  for?: string; //  否 绑定控件的 id 1.0.0
+  animation?: Record<string, any>[];
+  onClick?: (event: any) => void;
+}
 
 export default Label;

packages/remax/src/adapters/wechat/components/LivePlayer.ts

@@ -1,5 +1,23 @@
 import factory from './factory';
 
-const LivePlayer = factory('live-player');
+const LivePlayer = factory<LivePlayerProps>('live-player');
+
+export interface LivePlayerProps {
+  src?: string; //  否 音视频地址。目前仅支持 flv, rtmp 格式 1.7.0
+  mode?: string; // live 否 模式 1.7.0
+  autoplay?: boolean; // false 否 自动播放 1.7.0
+  muted?: boolean; // false 否 是否静音 1.7.0
+  orientation?: string; // vertical 否 画面方向 1.7.0
+  objectFit?: string; // contain 否 填充模式，可选值有 contain，fillCrop 1.7.0
+  backgroundMute?: boolean; // false 否 进入后台时是否静音（已废弃，默认退台静音） 1.7.0
+  minCache?: number; // 1 否 最小缓冲区，单位s（RTC 模式推荐 0.2s） 1.7.0
+  maxCache?: number; // 3 否 最大缓冲区，单位s（RTC 模式推荐 0.8s） 1.7.0
+  soundMode?: string; // speaker 否 声音输出方式 1.9.90
+  autoPauseIfNavigate?: boolean; // true 否 当跳转到其它小程序页面时，是否自动暂停本页面的实时音视频播放 2.5.0
+  autoPauseIfOpenNative?: boolean; // true 否 当跳转到其它微信原生页面时，是否自动暂停本页面的实时音视频播放 2.5.0
+  onStateChange?: (event: any) => void; //  否 播放状态变化事件，detail = {code} 1.7.0
+  onFullScreenChange?: (event: any) => void; //  否 全屏变化事件，detail = {direction, fullScreen} 1.7.0
+  onNetStatus?: (event: any) => void; //  否 网络状态通知，detail = {info} 1.9.0
+}
 
 export default LivePlayer;

packages/remax/src/adapters/wechat/components/LivePusher.ts

@@ -1,5 +1,31 @@
 import factory from './factory';
 
-const LivePusher = factory('live-pusher');
+const LivePusher = factory<LivePusherProps>('live-pusher');
 
+export interface LivePusherProps {
+  url?: string; //  否 推流地址。目前仅支持 flv, rtmp 格式 1.7.0
+  mode?: string; // RTC 否 SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话） 1.7.0
+  autopush?: boolean; // false 否 自动推流 1.7.0
+  muted?: boolean; // false 否 是否静音 1.7.0
+  enableCamera?: boolean; // true 否 开启摄像头 1.7.0
+  autoFocus?: boolean; // true 否 自动聚集 1.7.0
+  orientation?: string; // vertical 否 画面方向 1.7.0
+  beauty?: number; // 0 否 美颜，取值范围 0-9 ，0 表示关闭 1.7.0
+  whiteness?: number; // 0 否 美白，取值范围 0-9 ，0 表示关闭 1.7.0
+  aspect?: string; // 9:16 否 宽高比，可选值有 3:4, 9:16 1.7.0
+  minBitrate?: number; // 200 否 最小码率 1.7.0
+  maxBitrate?: number; // 1000 否 最大码率 1.7.0
+  waitingImage?: string; //  否 进入后台时推流的等待画面 1.7.0
+  waitingImageHash?: string; //  否 等待画面资源的MD5值 1.7.0
+  zoom?: boolean; // false 否 调整焦距 2.1.0
+  devicePosition?: string; // front 否 前置或后置，值为front, back 2.3.0
+  backgroundMute?: boolean; // false 否 进入后台时是否静音 1.7.0
+  mirror?: boolean; // false 否 设置推流画面是否镜像，产生的效果在 live-player 反应到 2.7.0
+  onStateChange?: (event: any) => void; //  否 状态变化事件，detail = {code} 1.7.0
+  onNetStatus?: (event: any) => void; //  否 网络状态通知，detail = {info} 1.9.0
+  onError?: (event: any) => void; //  否 渲染错误事件，detail = {errMsg, errCode} 1.7.4
+  onBgmStart?: (event: any) => void; //  否 背景音开始播放时触发 2.4.0
+  onBgmProgress?: (event: any) => void; //  否 背景音进度变化时触发，detail = {progress, duration} 2.4.0
+  onBgmComplete?: (event: any) => void; //  否 背景音播放完成时触发 2.4.0
+}
 export default LivePusher;