多端跳转

该功能由两个组件组成，分别是 UrlInput 和 AppLink， UrlInput 用于编辑卡组件，AppLink 用于视图卡组件。

UrlInput 三端跳转

用于配置 PC、M、APP 的跳转链接，支持配置多个链接，可根据设备类型自动跳转到对应的链接。

代码演示

基本使用

import { useState } from 'react';
import UrlInput from '../../components/UrlInput';

function Card() {
  // 三端跳转链接组件 Data
  const [urlInputData, setUrlInputData] = useState({
    mUrl: '',
    appUrl: '',
    pcUrl: '',
    usedcarUrl: '',
    urlPvareaid: false,
    callApp: false,
    URLScheme: '',
    AdrDown: '',
    IosDown: '',
    copyText: '',
  });

  retrun(
    <UrlInput
      title="跳转链接"
      data={urlInputData}
      onChange={(data: any) => {
        setUrlInputData(data);
      }}
    />,
  );
}

进阶使用

URLInputWrap 组件配置 keyName 与 dispatch 后，组件会自动将数据同步到魔方编辑器的 store 中

import { URLInputWrap } from '../../components/UrlInput';

function Card({ confData, dispatch }) {
  retrun(
    <URLInputWrap
      //  三端跳转链接组件 Data
      data={confData.data.conf.list[index]}
      // store 数据存储路径
      keyName={`data.conf.list.${index}`}
      dispatch={dispatch}
    />,
  );
}

API

UrlInput 组件接受的参数如下：

参数	类型	说明	默认值
title	string	组件标题	'跳转链接'
verify	boolean	是否校验链接	true
style	object	样式	-
data.appUrl	string	APP 跳转链接	-
data.mUrl	string	M 端跳转链接	-
data.pcUrl	string	PC 端跳转链接	-
data.usedcarUrl	string	二手车跳转链接	-
data.urlPvareaid	boolean	携带页面的 url 参数	false
data.callApp	boolean	M 端主动唤起 APP	false
data.URLScheme	string	唤起 APP 路径拼接的协议地址	-
data.AdrDown	string	安卓下载链接	-
data.IosDown	string	IOS 下载链接	-
data.copyText	string	复制文案	-
onChange	(data: any) => void	链接改变回调	-

URLInputWrap 组件接受的参数如下：

参数	类型	说明	默认值
title	string	组件标题	'跳转链接'
verify	boolean	是否校验链接	true
style	object	样式	-
keyName	string	store 数据存储路径	-
dispatch	(action: { type: string, payload: any }) => void	store 数据改变回调	-
data.appUrl	string	APP 跳转链接	-
data.mUrl	string	M 端跳转链接	-
data.pcUrl	string	PC 端跳转链接	-
data.usedcarUrl	string	二手车跳转链接	-
data.urlPvareaid	boolean	携带页面的 url 参数	false
data.callApp	boolean	M 端主动唤起 APP	false
data.URLScheme	string	唤起 APP 路径拼接的协议地址	-
data.AdrDown	string	安卓下载链接	-
data.IosDown	string	IOS 下载链接	-
data.copyText	string	复制文案	-
onChange	(data: any) => void	链接改变回调	-

AppLink 三端跳转

用于消费 UrlInput 组件配置的数据，面向不同终端进行路径跳转。

代码演示

import AppLink from '../../components/AppLink';

function ViewCard() {
  return (
    <AppLink
      data={{
        mUrl: 'https://mcar.mall.autohome.com.cn/frontEndPageStatic/productDetail/index.html?itemId=2656501',
        appUrl:
          'https://mcar.mall.autohome.com.cn/frontEndPageStatic/productDetail/index.html?itemId=2656501',
        pcUrl: 'https://mall.autohome.com.cn/detail/2656501-0-0.html',
        usedcarUrl: '',
        urlPvareaid: false,
        callApp: false,
        URLScheme: '',
        AdrDown: '',
        IosDown: '',
        copyText: '',
      }}
    >
      <button>三端跳转</button>
    </AppLink>
  );
}

API

通过 UrlInput 进行配置后，会生成以下数据结构示例。

示例

{
  "mUrl": "https://v.m.autohome.com.cn/v-2240771.html",
  "appUrl": "autohome://insidebrowserwk?url=https%3A%2F%2Fv.m.autohome.com.cn%2Fv-2240771.html",
  "pcUrl": "https://v.autohome.com.cn/v-2240771.html",
  "usedcarUrl": "https://v.m.autohome.com.cn/v-2240771.html",
  "urlPvareaid": false,
  "callApp": false,
  "URLScheme": "",
  "AdrDown": "",
  "IosDown": "",
  "copyText": ""
}

字段名	类型	说明
appUrl	string	主软环境下的跳转链接
mUrl	string	M 端环境下的跳转链接
pcUrl	string	PC 端环境下的跳转链接
usedcarUrl	string	二手车平台环境下的跳转链接
urlPvareaid	boolean	是否自动携带页面参数
callApp	boolean	是否唤起 APP
URLScheme	string	唤起 APP 路径拼接的协议地址
AdrDown	string	主软安卓端包地址
IosDown	string	主软 IOS 端包地址
copyText	string	唤起主软 APP 路径拼接的复制文本

FAQ

为什么要使用 URLInputWrap 组件？

阅读链接