logo

Flamingo

快速接入

阅读时间约 5 分钟

目前一码多端仅支持 build-scripts 框架项目, 以及 fusion pc & mobile 组件库(其他组件库需要自行做跨端适配)

初始化项目

  • 项目出了使用 cone-cli 初始化外， 也可以使用 ice 框架初始化，支持 ice1 和 ice2 （vite 暂不支持）
  • 最新版 cone-cli 初始化项目使用 cone 平台，请直接在 https://work.cone.cainiao-inc.com/myApp 上初始化应用

使用cone-cli初始化

  • 安装 cone-cli

    npm i -g @alife/cone-cli （申通使用 @alicd/cone-cli）

  • 初始化

    可根据各业务模板进行自行初始化，具体可以参考 cone-cli

    cone create
或者
cd project_name
cone init
  • 申通初始化
	npx @alicd/cone-cli init --sto --template @sto/cone-micro-app
	// 无线优先可以使用
	npx @alicd/cone-cli init --sto --template @sto/cone-micro-app-mobile

使用ice初始化

ice初始化参考: https://ice.work/docs/guide/start/

	// 初始化项目， 一般选择  “TypeScript + Fusion Design”  模板
	npm init ice <projectName>
注意

ice初始化的项目除了下面引入改造外，还有一些额外的改造：

** 1. 入口global.css改成 global.scss**

为了保证pc和无线样式变量冲突， pc请使用scss变量，无线使用css变量 也可以不改scss，只是css变量pc使用时尽量和无线不要有冲突

// 改造前
@import '@alifd/theme-design-pro/variables.css';
@import '@alifd/theme-design-pro/dist/next.var.css';

// 改造后
@import '@alifd/theme-design-pro/variables.scss';
@import '@alifd/theme-design-pro/dist/next.css';

@import '@alifd/meet-react/es/core/index.css';

  1. build.json 关闭vite配置

    // build.json, 或者直接删除vite配置
{
"vite": false
}

一码多端插件引入

默认 cone 应用都引入了 build-plugin-cone-app 插件，我们只需引入跨端插件即可。 ice 框架需要同时安装两个插件

// build.json 配置文件
{
  "targets": ["web", "web-mobile"], // 增加targets打包任务，pc和无线同时打包
  "cone": {
    "oneCode": true,// 开启一码多端，主要是组件替换和样式适配能力
    "pcToMobile": {// 自定义组件映射规则
      "@alifd/next/lib/upload": "@alifd/next/lib/upload"
    },
  },
  "plugins": [
	["build-plugin-one-code", {
      "windi": true// 开启windicss支持
    }]
  ]
}

上面配置实现功能如下：

  • 项目会同时打包 pc 和无线资源， 默认 pc 和无线入口一致， 也可在 src 下单独增加 mobile/index.(t|j)sx, pc 和无线打包入口将不同
  • 项目会开启一码多端替换，next 和 meet-react 互换，pc 走 next，无线走 meet-react。没有映射沿用默认值
  • 业务组件 bussComp, 默认 pc 会走 bussComp，无线会走 bussComp/mobile。 不需要额外配置

模板引入flexible插件

因为无线使用了rem单位，所以需要引入flexible插件进行 根节点的font-size控制。

<!-- 内网:  -->
<script src="//g.alicdn.com/code/npm/@alife/cone-flexible/0.0.1/index.min.js" crossorigin></script>

<!-- 申通:  -->
<script>
  // rem的bodyfont-size设置为16px, 默认插件body的font-size是16px的，如有需要可以自行设置
  window.bodyStyleFontSize = 16;
</script>
<script src="//assets.sto.cn/cone/sto-flexible/0.1.4/index.min.js" crossorigin></script>

注意 一码多端的rem规则和一般的flexible规则不同，cone搭建以及一码多端rem规则是 1rem = 100px

模板引入无线主题

fusion导出rem主题包方式 fusion导出rem主题

<link href="https://unpkg.alibaba-inc.com/@alife/mobile-theme-42660@0.1.0/index.css" rel="stylesheet" />

至此一码多端能力引入完成，可以快乐开启跨端之旅了

本地启动调试