支持移动和小程序的聊天机器人

在公司的要求下，我们开始开发一款产品需求相同的聊天机器人，部署在移动终端和微信小程序上。

所以初步想法是：

移动终端

使用Vue.js进行开发。

小程序；迷你程序

使用美团评论的开源框架mpvue复用移动代码，集成到小程序中。

一般来说，根据官方文件，两头分开写，重码可以直接复制粘贴，基本满足公司需求。但是有一天，我突然想到，我想把这两个项目合二为一。只有通过在Power Shell中更改一个命令，我才能构建能够适应不同平台的项目，所以我才有了这个东西。

Git地址先贴：Github聊天机器人

接下来，我们来谈谈为了实现这个骚想法而遇到的几个问题：

1.如何通过一个命令构建不同的平台项目？

解决方案是将此任务留给webpack。Webpack作为一个强大的前端模块化开发工具，“用了就说是”，所以没用过就赶紧用吧。

applet搭建的webpack配置可以直接使用mpvue-cli的配置，它使用了一些从vue文件到美国使团实现的applet文件的webpack插件，所以下载安装即可。

移动webpack的配置可以参考vue-cli的配置，熟悉webpack的可以自己写。当然，您也可以在我的项目中使用该配置。

当构建不同的项目时，您只需要使用npm命令来启用不同的webpack配置文件。(手动修改项目包. json中的npm脚本)。

我遇到的第一个问题就愉快地解决了。

二、http请求的封装

以往Vue项目的http请求都是使用axios插件完成的，而小程序中的http请求必须调用微信的原生AP —— wx . request，因此为了同时支持两个平台，项目需要封装http请求并自动识别调用。

解决方案是使用vue的全局mixins方法。混合全局变量this.service通过判断是否是浏览器环境(if(window))指向不同的http模块。

有了这种识别和混合的方法，基本上所有的代码重用都可以通过在浏览器环境中重新实现applet的原生API来完成。

第三，页面跳转

vue项目中vue-router跳转页面的使用已经非常成熟，但是mpvue文档中声明由于applet页面特有的注册方式，不支持vue-router的使用。

不过，有了以上的混合方式，我们还是可以曲线救国，将vue-router引入项目。

解决方案是全局混合this.router变量，在applet中封装wx.navigateTo，在web端封装location.href方法，实现页面跳转。

第四，页面间参数的传递

Web开发通常通过给URL附加参数来实现，但这在小程序中是不允许的。解决办法就是愉快地使用vuex(吴奈)，统一状态管理听起来很棒~

参考文档中的手动vuex应该没有问题，但是vuex有点后悔页面刷新会导致状态参数丢失。为了让项目体验更好，我用vuex localstorege存储参数(微信也原生实现了缓存数据的wx.setStorage)。这种方法在两端都很有效。

动词（verb的缩写）其他人

1.该项目试图使用day.js，一个新发布的时间处理库，它是轻量级的，非常好。

2.百度的echart插件移动终端表现很好，但是最近发布的针对wx的echart在小程序上有点不尽人意。

至此，一款同时支持移动终端和小程序的聊天机器人的技术水平已经基本实现，还有其他不足需要改进。github会继续承诺~

请指出来源。

附加效果图：