NutUI 3.0 助力企业业务售后门户建设

NutUI 是一套京东风格的轻量级移动端 Vue 组件库。Vue 3.0 正式发布后,势必导致 Vue 2x 周边框架的一波集体更新,NutUI 作为 Vue 生态中最流行的 UI 组件库之一,及时推出基于 Vue 3 语言版本的 NutUI 3.0。这不,NutUI 3.0 刚发布,我们就赶上一个新项目「企业业务售后门户」移动端。

项目背景

退换/售后作为企业采购业务中不可或缺的一项流程,供企业业务各交易通路使用。为降低企业业务售后的研发成本,对售后相关数据及操作进行统一迭代和维护。我们打造了一套京东企业业务售后 SaaS 系统,业务涉及范围包含:申请售后,特色业务介绍,售后政策,报表平台。

企业售后门户 SaaS 化的平台建设,可实现以下核心功能:
NutUI 3.0 助力企业业务售后门户建设
先来视觉效果上感受一下售后 SaaS 平台~
NutUI 3.0 助力企业业务售后门户建设

初窥 SaaS 化平台后,除了满足退换/售后,选择售后类型等基础业务功能外,再来看下此次开发尝鲜的技术栈,以及所落地业务场景的新实现~

Vue 3.0 及其周边生态

2021 新年伊始,尤大就在知乎问答 2021 前端新变化中回复:''会有很多人抛弃 Webpack 开始用 Vite "。

随着 Vue 3.0 正式发布,其技术栈的周边生态逐渐完善,如路由插件 Vue-Router,状态管理插件 Vuex,以及紧随生态建设步伐的 NutUI 3.0 版本。借此机会,我们此次开发采用技术栈为:Vue 3.0 + Vuex4 + Vue-Router4.x + Vite2.2.x + NutUI 3.0 + TS,通过与 Vue3.0 完美结合,开启了新的开发体验~

其中, Vite 使用原生 ESM 文件,基于 ECMAScript 标准原生模块系统(ES Modules)实现,开发环境中无需打包;Vue 3.0 + Vite 这一开发模式构建速度比传统开发提升了 30 倍,兼具更轻、更快的 Web 应用开发工具性能;开发模式由 Option api 升级为 Vue3.0 带来的 Compisition api ,函数式编程更友好划分功能模块开发。

NutUI 3.0 助力企业业务售后门户建设

全新技术栈的发布,项目基础架构的升级,区别于普通的售后模块 SaaS 化售后平台的其他特色业务特征包括:
NutUI 3.0 助力企业业务售后门户建设

先来体验一波平台特色功能的实现~

特色业务开发

支持交易平台嵌入使用

京东慧采是为企业级客户打造的研发零投入的专属采购平台,旗下包括 (小程序/H5/APP)三端不同的落地场景。其中,我们使用 Taro 技术栈同时开发微信小程序和 H5,实现相同业务场景下两端落地需求。中心化、SaaS 化的售后模块,将实现一个企业业务移动端为所有商城类提供售后服务的业务赋能。

慧采移动端(小程序/H5/APP)将率先接入企业售后门户:
NutUI 3.0 助力企业业务售后门户建设
在京东慧采个人中心页面,点击【退换/售后】即可进入第三方接入的售后门户,从操作上来讲一个点击跳转即可完成,那么在逻辑实现上需要做些什么操作?

NutUI 3.0 助力企业业务售后门户建设

第三方平台的接入需要打通登陆态处理,在 H5/App 中使用 Cookie 来实现,而小程序的运行环境与浏览器不同,无法通过同源策略保证安全,在小程序请求接口不会自动带 Cookie ,那么怎样同时兼容两者?

H5/APP 登录态的打通

我们都知道,H5 跳转第三方页面,打开一个 iframe 标签就可以实现:

<iframe src={webViewUrl}></iframe>

但是要实现不同账户切换下的数据连通,还需要进行登录态的打通处理。

慧采:a.jd.com

售后: b.jd.com

二者的域名不完全相同,Cookie 是不可以跨域名的,正常情况下,同一个一级域名下的两个二级域名也不能交互使用 Cookie

比如:如果想要跳转到售后的 b.jd.com 名下的二级域名都可以使用慧采的 Cookie 信息,需要设置 Cookiedomain 参数为 .jd.com,这样使用 a.jd.comb.jd.com 就能访问同一个 Cookie 了。

document.cookie = "testCookie=hello;  domain=.jd.com;path=/";

小程序登录态的特殊处理

小程序中第三方页面的跳转依赖 WebView 标签实现:

<WebView src={webViewUrl}></WebView>

那么问题来了,小程序运行环境不是浏览器,在 H5 中登陆态使用的 Cookie 去实现登陆态,Cookie 是通过 请求的 header 带上去的,而在小程序中它的做法是取消了自动携带的 Cookie,需要手动设置,并且没有了浏览器的同源策略限制。

来看下我们的解决方式,慧采页面点击【退换/售后】前,拿到用户的 pt_key 字段进行加密后,拼接在 url 上,传递到【售后】模块,用作打通登录态的必需信息:

tmpUrl = this.afterSaleUrl + `&pt_key=${pt_key}`;
Utils.openWebView(tmpUrl);

售后模块页面,获取到对应字段后,将 Cookie 种在 jd 域名下,这样的话就可以实现 Cookie 共享了~

//加入cookie
const pt_key = this.queryString("pt_key") || "";

if (pt_key) {
  document.cookie = `pt_key=${encodeURIComponent(
    pt_key
  )};domain=.jd.com;path=/`;
}

可定制化配置页头

作为一个 SaaS 化平台,应对不同的业务场景总会有不同的客户接入需求,就拿标题栏来讲就有多种需求:

  • 隐藏/展示【售后】平台自带标题栏;
  • 使用原场景自带的标题栏,但是读取【售后】标题栏信息;
  • 自定义【售后】标题栏信息
  • ...
    NutUI 3.0 助力企业业务售后门户建设
    以上 H5 页面中,采用的是慧采的标题栏,读取【售后】的标题栏信息,那这是如何实现的呢?

关于 iframe 跨域使用 postMessage

同样是获取不同域名下提供的页面服务,简单的 document.title, 已经不能满足我们的需求了,直觉想到的实现方式就是使用 iframe,此时,我们可以采用 postMessage 方法来解决 iframe 直接的交互同样存在的跨域问题。

postMessage 是挂载在 window 下的一个方法,用于不同域名下的两个页面的信息交互,
父子页面通过 postMessage()发送消息,再通过监听 message 事件接收信息。

来看下实现过程:

售后页面(子页面)给慧采页面(父页面)传递 title 消息:

window.parent.postMessage({ title }, "*");

慧采页面监听 message 事件,子页面发送来的消息内容在 event.data 属性中:

	_customEvent: () => {};

	customEvent(event) {
		this.setState({title: event.detail});
		document.title = event.detail;
	}
	componentDidMount() {
		window.addEventListener('vsptitle', this._customEvent);
	}

响应式样式,一键主题定制~

本次开发的售后 SaaS 平台,针对不同的接入交易平台,为保持与接入平台的 UI 设计风格保持一致,我们实现了定制化配置主题功能,根据传入的主题颜色,实时渲染效果。
NutUI 3.0 助力企业业务售后门户建设
相较于传统模式只能多次构建实现,我们利用了 Vue3.0 的v-bind:css 新特性实现主题定制实时切换。

我们在开发前期,也提前将 sass 变量提取了出来:

//主题色
$primary-color: #f0250f;

//渐变
$gradient-color: linear-gradient(
  135deg,
  rgba(240, 22, 14, 1) 0%,
  rgba(240, 37, 14, 1) 70%,
  rgba(240, 78, 14, 1) 100%
);

//被选中的淡色背景
$bg-color-selected: #fef4f3;

//不能点击时背景
$bg-color-disabled: #fcd4cf;

//背景渐变
$bg-gradient-color: $gradient-color;

//白色背景
$bg-color-white: #fff;

//边框颜色
$border-color: #ececec;

这样,在重构页面时就可以直接写变量了,也便于后期的样式维护。但是这样,还是不能满足我们的需求。

可以先了解一下 vue3 sfc,支持在单文件 style 中绑定响应式样式:.head{ color: v-bind('theme.color') },直接在 css 上面绑定响应数据。

通过这个特性,我们可以在初始化时,拿到用户自定义的主题色,然后赋值一个 css 变量,然后去动态修改主题~

const colorState = reactive({
	startColor: '#f0250f',
	endColor: 'linear-gradient(135deg,rgba(240, 22, 14, 1) 0%,rgba(240, 78, 14, 1) 100%'
});

router.isReady().then(async () => {
  ...
  const result = await peelService.getPeelInfo(peelState.peelDto);
    if (result?.state === 0) {
        colorState.startColor = result.value.originalColor;
        colorState.endColor = result.value.terminalColor;
		}
});

<style lang="scss">
.primary-color {
	color: v-bind(startColor);
}
.gradient-color {
	background-color: linear-gradient(135deg, v-bind(startColor) 0%, v-bind(endColor) 100%);
}
</style>

这样,我们在写样式时,就可以直接使用 .primary-color.gradient-color 这样的类名了~

NutUI 3.0 组件赋能业务新形态

京东慧采等多企业采购平台延续京东 App10.0 的设计风格,这一设计原则和 NutUI 3.0 不谋而合。NutUI 3.0 组件库,从视觉设计到技术支持为项目落地带来了新的开发体验~

技术看点

  • 引入 Vue3.0 新特性

  • 破坏性变更,全面升级

  • 采用组合式 API Composition 语法重构,结构清晰,功能模块化

  • 组件 emits 事件单独提取,增强代码可读性

  • 使用 Teleport 新特性重构挂载类组件

  • 构建工具升级为 Vite2.x

  • 全面使用 TypeScipt

以下是本次企业业务售后门户建设,开发用到的 NutUI 3.0 的组件,组件覆盖率达 70%,同时在使用过程中对我们的组件进行检验和优化:
NutUI 3.0 助力企业业务售后门户建设

其中,每个组件覆盖多页面多使用场景,以 PupopToastSwitch 组件为例,看下具体在售后平台页面中的具体使用场景:

NutUI 3.0 助力企业业务售后门户建设

接下来,我们再以这三个组件为例,结合在页面中的使用场景,看下与 Vue 2.x 相比其内部实现原理:

Popup 组件中有一个非常好用的功能:自行选择挂载节点,可以将组件挂到任意 DOM 节点下面。

NutUI 3.0 助力企业业务售后门户建设

NutUI2.x 中,通过 get-container 属性指定挂载位置:

<!-- 挂载到 #app 节点下 -->
<nut-popup v-model="show" get-container="#app" />

我们先来看看 NutUI 2.x 版本中挂载节点的核心实现,可以看到,基本的思路是获取到 props 中的 getContainer,然后将当前的组件 append 进去。

portal() {
  const { getContainer } = this;
  const el = this.$el;

  let container;

  if (getContainer) {
  	container = this.getElement(getContainer);
  } else {
  	return;
  }

  if (container && container !== el.parentNode) {
  	container.appendChild(el);
  }

  }
}

那么,在 Vue3.0 版本中,我们是如何实现的呢?
其实非常简单,Vue 3.0 它为我们提供了一个 Teleport,它允许我们控制当前在哪个父级下渲染了 DOM,而不必像 2.x 中那么繁琐。

<Teleport :to="teleport">
    ...
</Teleport>

我们在使用的时候直接通过 props去传递一个 selector ,然后就可以将组件挂载到任何节点下了。是不是特别方便~

<nut-popup
	:style="{ padding: '30px 50px' }"
	teleport="#app"
	v-model:visible="state.showTeleport">
	app
</nut-popup>

Toast 函数式调用

Toast 的轻提示作用,在页面中的使用频率很高:
NutUI 3.0 助力企业业务售后门户建设

先看下在 Vue2 的使用方式:

Vue.use(Toast);

// 调用
this.$toast.text("请填写收货人姓名");

在 Vue2.0 中,组件内部实现原理:

Vue.prototype["$toast"] = ToastFunction;

Vue3.0,在页面中使用方式:

app.use(Toast);

import { getCurrentInstance } from 'vue';

setup(){
  const { proxy } = getCurrentInstance();
  proxy.$toast.text('请填写收货人姓名');
}

先来看下,挂载全局变量看下 Vue 3.0 挂载全局变量的用法,在 main.ts 中引入全局要使用的方法,通过 app.config.globalProperties 添加到全局。

appContext.provides 中注入了一个 Store 实例对象,每个组件都可以使用 this.$store.xxx 访问 Vuex 中的方法和属性,这时相当于根组件实例和 config 全局配置 globalProperties 中有了 Store 实例对象。

3.0 组件库中,关于 Toast 内部实现原理:

//$toast 添加在全局,在 mian.js 中声明:
app.config.globalProperties.$toast = ToastFunction;

Switch 异步控制

在 Vue3.0 中新增异步控制逻辑,其实现原理如下:

利用 Vue3 v-model:model-value特性进行实现。在使用 v-model 时,代码内部执行 emit('update:value',true); 时将自动同步更新外部传入的变量值。

<nut-switch v-model="checked" />;

import { ref } from "vue";
export default {
  setup() {
    const checked = ref(true);
    return { checked };
  },
};

相反我们只需要采用 :model-value 进行单向数据下发,进行外部异步控制内部状态值即可:

<nut-switch :model-value="checkedAsync" @change="changeAsync" />

import { ref, getCurrentInstance } from 'vue';
export default {
  setup() {
    let { proxy } = getCurrentInstance() as any;
    const checkedAsync = ref(true);
    const changeAsync = (value: boolean, event: Event) => {
      proxy.$toast.text(`2秒后异步触发 ${value}`);
      setTimeout(() => {
        checkedAsync.value = value;
      }, 2000);
    };

    return {
      checkedAsync,
      changeAsync
    };
  }
};

除了 NutUI 3.0 赋能的业务场景外,项目基础构建层还包括以下几点:
NutUI 3.0 助力企业业务售后门户建设

以数据管理和路由配置/方法封装两方面,来看下结合 Vue3.0 的使用,在企业业务中实现方式:

Vuex4 如何优雅地进行状态管理

针对售后列表中某一具体的商品来讲,后续【选择售后类型】,【申请售后】等操作的数据项几乎相同,为避免频繁读取接口和频繁使用组件传餐的方式来同步数据,减少数据的管理和维护工作,我们采用将数据值定义在 Vuex *其他页面使用。
NutUI 3.0 助力企业业务售后门户建设

此次开发我们采用最新版本的 Vuex4,那么基于 Vue2.x 风格的 Vuex 的使用方式是否还适用于 Vue3?

Vue2.x 中,为实现代码复用采取的 getter/action 方式,以及为不方便单独编写管理模块而设计的 module。Vue3 中已经补全了 Vue2 的短板,所以 Vuex 使用方式相应发生了变化。

useStore 支持 ts 使用配置 injection key

Vue3 中 Vuex 的 useStore 具有完整的 statemodules 类型推测,对 ts 支持也得到了加强。可是 Vuex4 对 ts 的支持却没有任何改变,使用 useStore 的类型仍然为 any,在此官方提供了解决方案:

InjectionKey 注入类型

  1. 定义类型 InjectionKey。
  2. InjectionKey 在将商店安装到 Vue 应用程序时提供类型。
  3. 将类型传递 InjectionKey 给 useStore 方法。
// store.ts
import { InjectionKey } from "vue";
import { createStore, createLogger, Store } from "vuex";
//手动声明state类型
export interface State {
  orderItem: any;
  customerExpectResultList: any;
  orderSkuApplyItem: any;
  //...
}
//定义注入类型
export const key: InjectionKey<Store<State>> = Symbol();

接下来,安装到 Vue 应用程序时传递定义的注入类型:

// main.ts
import { createApp } from "vue";
import { store, key } from "@/store";

const app = createApp(App);

//pass the injection key
app.use(store, key);
app.mount("#app");

最后,将密匙传递给 useStore 方法以检索类型化的存储。

import { useStore } from 'vuex';
import { key } from '@/store';

const store = useStore(key);

onMounted(async () => {
			state.provideName = await getProvideName(
				store.state.orderItem.jdOrderId,
			);
});

Vue 3.0 如何配置/管理页面路由

页面跳转实现依靠路由来实现,新版路由配置和之前非常相似,只有些许不同。新版本路由的 API 全部采用函数式引入的方式,配合 ts 的类型提示,让我们无需文档也能够完成配置。

NutUI 3.0 助力企业业务售后门户建设

路由配置和 2.x 的方式保持一致:

export const routes: RouteRecordRaw[] = [
  {
    path: paths.saleindex,
    name: "saleindex",
    component: SaleIndex,
    meta: {
      title: "退换/售后",
      keepAlive: true,
      backurl: "",
      style: {},
    },
  },

  //...

  {
    path: "/:path(.*)+",
    redirect: () => paths.saleindex,
  },
];

此处由 new VueRouter 的方式修改为 createRoute 方式,其余无变化。路由模式的配置采用 API 调用的方式,不再是之前的字符串,此处采用的 hash 路由。

import { createRouter, createWebHashHistory } from "vue-router";
import { routes } from "./routes";

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

现在,一个 Vue3 的基础路由就配置完成了,接着在 main.ts 这个入口文件中插件的方式通过 Vue 引入就可以了~

import { createApp } from "vue";
import App from "./App.vue";
import router from "@/router/router";

const app = createApp(App);
app.use(router);
app.mount("#app");

router 的封装

页面引入:

<div class="button">
	<nut-button plain type="primary" @click="goDetail()">查询详情</nut-button>
</div>

export default defineComponent({
	name: 'submitsuccess',
	setup: () => {

		const { push } = useRouterHelper();

		const goDetail = () => {
			push(paths.saleindex, { type: 1 });
		};

		onMounted(async () => {

		});

		return {
			goDetail,
		};
	}
});

方法封装:

export const useRouterHelper = () => {
	const router = useRouter();

	const push = <T extends paths, K extends keyof ParamsMap>(path: T, params?: ParamsMap[K]) => {
		router.push({
			path,
			query: params
		});
	};

	return {
		push
	};
};

最后,聊聊 TS 的 Decorator ~

我们在进行页面开发的时候,往往有这么一个需求,需要在合适的地方添加 loading 效果:

NutUI 3.0 助力企业业务售后门户建设

估计之前大多数开发者做法是这样的:

public async request(url: string, method: string, params: any): Promise<ResponseData | null> {
			...
      //loading start
      Toast.loading();
			const res = await axios(options as AxiosRequestConfig);
      //loading end
      Toast.hide();
			return this.checkStatus(res);
		} catch (error) {
			return error;
		}
	}

我们在封装的统一请求函数中,添加页面 loading 效果,这样也能够满足需求。但是...就有产品、测试、业务揪着这个问题不放,我哪里哪里不需要 loading

上一篇:北漂生活第十一弹-bingo 代码合并


下一篇:bingo笔记