企业微信内部应用开发

1.应用类型

1从应用的需求场景进行分类，可以分成以下3类

2 从应用的技术框架分类

以下我们都是基于自建应用，网页应用来的！

2.内部应用开发流程

1.前往企业微信管理后台创建内部应用

2.点击【应用管理】tab

3.选择【自建】- 【创建应用】

4.填写应用信息

5.创建应用成功后，返回到上一页，自建栏目就会多出创建的应用，如上，测试应用

6.点击【测试应用】后就可以看到应用的相关信息，并进行应用的相关配置

SDK接入和auth2授权登录都要从这里进行配置

3.实际开发总结

1. 企业微信网页授权登录

应用登录实际是使用的企业微信授权登录，没有实际的登录页面，但开发过程中习惯性的增加了一个login页面，用于通过code向后端换取token和用户信息。并且在beforeEach中进行路由拦截，当然功能是实现了，但是最后同事发现一个体验问题，就是发送消息后链接到应用中的消息详情地址，滑动回退后经过空白页，（空白页实际是login页面）直至真正退出（这里跟是否滑动无关，主要是浏览器回退历史记录栈有关）。于是，赶紧想办法优化呀。。。

方案一：

使用replace替换掉login的历史记录

方案二：

直接去掉了login中间页，将权限拦截逻辑都写在router.beforeEach中,如下

router.beforeEach((to, from, next) => {
  console.log('beforeEach---');
  const token = localStorage.getItem('token');
  const cachedViewStore = useCachedViewStore();
  const { addCachedView } = cachedViewStore;
  const handleSuccessDirect = () => {
    next();
    //添加缓存的路由
    addCachedView(to);
    //设置页面title
    usePageTitle(to);
  };
  if (!token && to.meta.requiresAuth) {
    useLogin()
      .then(() => {
        handleSuccessDirect();
      })
      .catch(error => {
        console.log('error---', error);
      });
  } else {
    handleSuccessDirect();
  }
});

此处还需要了解点击应用实际第一次访问的地址，经文档查阅和验证，实际第一次访问的地址即是带有code的

2.开启企业微信的调试模式

1. mac同时按下快捷键 command + shift + control + D，会有debug模式开启的提示

帮助 -> 开发调试选项 -> 打开webView审查元素

2. 关闭页面，重新进入，右键就有审查元素的选项了
3. 借助插件vconsole