基于微信服务号的窗口页面搭建

说在前面：工作需要，在服务号的建立过程中，除了关联底层智能ai服务以外，更希望有一个web面板提供直观的服务，因此期望搭建一个web应用来支撑，该文档记录起实现过程。

大致的实现逻辑

在实现之前咨询和确认了大量的信息，如下：
1、服务号的申请流程
2、服务号web窗口的实现方式【web链接配置即可】
3、底层智能服务的支撑：微信智能开放平台&腾讯云智能对话平台TBP

注意：说明下微信对话开放平台和腾讯云智能对话平台TBP的区别，功能上差别并不大，且微信对话开放平台关于bot的延展功能和数据观测功能会更加完善，但是TBP的转人工拉群功能实用性较高，因此在对bot功能要求不高的场景下，还是选用TBP来应用。

实现过程

bot与服务号的绑定

其实这个步骤根据官网文档的指引完成对应的配置就能关联上了，而机器人是否能按照想象中那样去服务，属于机器人运营的知识，后续希望有机会继续记录和分享该部分内容，本篇内容主要说明web服务窗的搭建过程。

所以，烦请参考企业微信官方文档：微信对话开放平台、腾讯云智能对话平台TBP

前端大致效果

页面效果图

内容详情说明，因为所有信息都存在对应的页面支持，因此仅仅需要一个前端展示页面，再通过超链接跳转对应页面即可。

前端框架的搭建与实现

为了让体现更加友好，选择了用一个框架去实现，而不是简单的一个html文档。

因为电脑还咩有vue环境，所以走一套，并且完成简单的手脚架之后。
vue2.0的初始界面

为了页面的排版合理，也引入了element-ui来实现页面组件的展示。

废话不说，直接安装

1	npm i element-ui -S

在main.js中引入element组件

/*引入element组件*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

其他使用细节及组件参考官网：https://element.eleme.io/#/zh-CN/component/installation

后端发布

就直接用vue手脚架自带的打包功能对项目进行打包

1	npm run build

生成dist文件，打包文件放到对应的服务器上即可访问

不过在此处自己遇到了一个放到服务器上无法访问的问题，最终定位是文件的引用方式不当造成的，最终解决方案是在vue.config.js文件中增加了以下代码，已实现dist文件的正确使用。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  /*新增publishPath配置*/
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
})

得到最后发布到服务器之后的访问链接，基本上就已经完成了，最后只需完成服务号的对应配置即可。

说在最后：这段时间的工作比较emo，该篇文章的完成心情上发生了很大的变化，但是还是期望能继续坚持下去。既然选择的完成这篇文章，我认为自己已经度过了最emo的过程，期望明天早上的风再吹到我脸上的时候，我能微笑以对。2022/4/20