vue项目迁移uniapp之实现vue的vant组件toast跟uniapp的兼容

前言说：这里说下我们项目迁移的目的，看看跟阅读本文章的小伙伴们是否有共同的需求-本项目原来只是纯h5的，是运行在浏览器端的移动版本，因为个别需求需要打包成为app，但是因为一部分技术的限制，目前只有uniappSDK，所以项目要从原来的vue项目转换为uniapp项目，但是项目中使用了vant组件的toast提示，以及大量的window.localStorage. 第一呢，为了不过于依赖vant 我们想用uniapp的的showToast.第二方面是我们开发的时候依赖于浏览器，但是打包测试的时候依赖于uniapp 所以想用uniapp自身的提示。不依赖于框架。但是不想修改太多。所以做了兼容。下面会对实现做一一讲解。 注：关于实现两端的localStroage也会在下篇讲解。

1. 首先说下在哪里使用我们写的东西。

上面的图片中代码的【Vue.use(tipsMixin);】其实就是我们用的地方。这时候可能会有人很多人疑问？？为啥用Vue.use呢，其实我们就是想把自己写的内容挂载到vue内部。但是又不依赖vue的版本。可能很多人对use也不是很了解，这个时候可能就需要大家阅读下vue2的源码了。如果大家有需求可以评论下， 我也会在后续的文章中给大家输出下。接下来说下我是怎么写的。

2. 通过use是如何把toast挂载到vue上的。

大家可以看下上面的代码，其实在vue.use被调用的时候，通过install方法会给我们传递一个Vue的函数(instance)。我们就可以在函数的prototype上挂载方法了。但是我们为什么用Object.defineProperty呢。为啥不直接赋值呢。其实我们的目的很简单就是希望使用者只能获取值，但是不能对我们的$toast\text{进行重新赋值。所以代码中会有这么一段话【}Object\mathrm{.}defineProperty(instance\mathrm{.}prototype{,}^{\mathrm{\prime }}$toast进行重新赋值。所以代码中会有这么一段话【Object.defineProperty(instance.prototype,′toast')】我们就是为了原型上挂载一个属性$toast这个属性其实返回一个方法。

3. 是如何实现中间层转换的

通过上图我们可以看到其实我们返回的是toastContext上下文方法。这个方法其实是个执行函数。执行函数的返回的是returnFun. 我们在最后使用的时候就是使用的returnFun. 在这里我们先说下我们有几种toast:

• a. this.$toast();
• b. this.$toast.fail();
• c. this.$toast.success();
• d. this.$toast.loading()

在上面的代码中我们会有【const resultFun = (message) => {}】。其实我们就是预先定义一个方法。注：这个方法就是我们的使用例：this.$toast()。通过foreach 循环数组['success', 'fail'] ，给方法【returnFun】添加了两个属性success, fail 而这两个属性最后指向的是一个方法。注：这这两个属性就是我们的this.$toast.success(). this.$toast.fail()方法了 通过上图中我们还单独添加一个loading方法 但是唯一不同的是我们返回一个clear方法。目的就是为了清除加载中状态。 其实仔细的同学都会发现我们所有的封装最后都指向了一个classifyFun方法。意味着我们所有的处理都来自一个地方。我们可以在这里处理我们需要的。相信大家能看的明白。 如果大家对我的讲解还不明白。可以留言。看见必回。