职贝云数AI新零售门户

标题: 企微侧边栏项目搭建和初始化授权登录 [打印本页]

---

作者: wc4    时间: 2024-5-25 12:05
标题: 企微侧边栏项目搭建和初始化授权登录
背景：需求是打通企微客户名片与公司后台管理系统网校和crm的绑定和信息查看，由于公司次要技术栈为vue2且有部分项目自定义表单封装组件可以复用，所以新项目还是以vue2+ant design框架搭建

1.初始预备

后台管理系统添加企微侧边栏菜单，并把侧边栏页面链接和自定义配置的表单id关联作为一条数据。
登录企微后台创建运用、配置到聊天工具栏模块运用第一点的页面链接并拼接企业主体id和运用id。
网页授权及JS-SDK、企业微信授权登录等模块配置授权域名白名单并下载提供的txt文件后续交给运维放入前端服务器根目录停止域名安全校验。
最后要记得勾选“客户与上下游”里客户tab的API可调用接口的运用。
搭建项目预备，运用vue2+ant design+less搭建（sass版本冲突成绩不敌对非必要不引荐），运用了ant design的优点是可以大程度满足UI和产品的需求且符合旧项目组件的复用，但弊端是没有移动端的敌对提示和中小屏下UI框架被做了处理，针对这些成绩需求做适配的优化和组件的封装。
授权经调研后采用和微信公众号一样的方式，即跳转指定链接后获取code跟服务端接口换取当前用户信息。

2.初始化项目

运用vue2命令创建项目，并整理有关文件：
1. vue create sd-web-wecom-sidebar
复制代码
配置项目env文件，用于区分多项目多环境。
新建代码仓库gitlab，并提交到远程代码仓库。
提供env文件名给运维配置到jenkins完成自动化部署。

3.项目开发

首先是公用交互组件和样式封装。
进入项目要能存储agentId和corpId，这点在链接地址栏上获取并存储vuex即可，至于写的地位，我是写在router文件的路由守卫。（写在App.vue不失效，写在main.js也可以）
登录判别，可以运用能否存了userInfo停止判别，未登录则跳转以下链接获取code并调用服务端接口换取userInfo，留意写好重定向地址逻辑。假如已登录则执行后续操作。
1. location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${corpId}&redirect_uri=${location.href}&response_type=code&scope=snsapi_base&agentid=${agentId}#wechat_redirect`
复制代码
调用后端接口，获取signature等信息。

• 由于兼容成绩，需求同时调用两个企微初始化api，初始化后才可调用后续企微api：
  1. wx.config({beta:true,// 必须这么写，否则wx.invoke调用方式的jsapi会有成绩debug:false,// 开启调试形式,调用的一切api的前往值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。appId: corpId,// 必填，企业微信的corpIDtimestamp: timestamp,// 必填，生成签名的工夫戳nonceStr: nonceStr,// 必填，生成签名的随机串signature: signature,// 必填，签名，见 附录-JS-SDK运用权限签名算法
  2.     jsApiList // 必填，需求运用的JS接口列表，凡是要调用的接口都需求传出去})
  3. wx.ready(asyncfunction(){resolve()})
  4. wx.error((res)=>{this.$alert('wx.config fail')
  5.     console.log('wxConfig',res)reject(res)})

  复制代码
  1. wx.agentConfig({corpid: corpId,// 必填，企业微信的corpid，必须与当前登录的企业分歧agentid: agentId,// 必填，企业微信的运用id （e.g. 1000247）timestamp: timestamp,// 必填，生成签名的工夫戳nonceStr: nonceStr,// 必填，生成签名的随机串signature: signature,// 必填，签名，见附录-JS-SDK运用权限签名算法
  2.     jsApiList,success:function(res){resolve(res)},fail:(res)=>{this.$alert('wx.agentConfig fail')reject('agentConfig',res)if(res.errMsg.indexOf('function not exist')>-1){this.$alert('版本过低请晋级')}}})

  复制代码
• 当初始化完成后就可以运用以下获取当前对话的外部客户id了（initAgentConfig为封装的初始化检测）：
  1. exportasyncfunctiongetCurExternalContact(retry){awaitinitAgentConfig()returnnewPromise((resolve, reject)=>{
  2.     wx.invoke('getCurExternalContact',{},asyncfunction(res){if(res.err_msg ==='getCurExternalContact:ok'){const userId = res.userId // 前往当前外部联络人userId// commit('SET_WX_USER_ID', userId)resolve(userId)}else{if(retry !==true){
  3.           store.commit('SET_INIT_AGENT_CONFIG',false)resolve(awaitgetCurExternalContact(true))}else{// 错误处理reject(res.err_msg)}}})})}

  复制代码
  至此，项目的基本搭建、授权和初始化曾经完成。
  后续继续封装优化项目，提供给其他小伙伴运用。
  

遇到的一点小成绩：

需求完成初始化项目获取地址栏参数并存储一次企微信息，由于App.vue是未注册的组件，且项目一进入就跳转了crmUserInfo页面，所以App.vue并不能获取到企微信息。
思绪转移到全局入口main.js，运用new URLSearchParams(window.location.search)，配合get方法可以获取到，但对于router.params的**“/”**参数不太敌对，应该只能引入router实例停止运用。最后是选择了router文件里路由守卫的方式完成。

• ant design框架的日期工夫选择框等均是英文，处理方式：
  1. <!-- App.vue -->
  2. <template>
  3.   <a-config-provider :locale="locale">
  4.     <div id="app">
  5.       <router-view />
  6.     </div>
  7.   </a-config-provider>
  8. </template>
  10. <script>
  11. import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
  12. export default {
  13.   name: "app",
  14.   data() {
  15.     return {
  16.       locale: zhCN,
  17.     };
  18.   },
  19. };
  20. </script>

  复制代码
  TinymceEditor富文本报错Uncaught SyntaxError: Unexpected token ‘<’，定位并删除配置代码处理。api废弃正告可配置deprecation_warnings: false处理。
  其他企微授权成绩，可以参照官方提示处理。不限于未配置白名单、配置参数错误、未走cache导致接口调用次数太多……
  如何开启企微侧边栏调试形式？同时按Ctrl+Alt+Shift+D即可
  
• 企微侧边栏如何制止页面缩放？可以尝试以下方法（留意客户端会有一段工夫缓存,可以在设置-通用-存储空间-清算停止缓存验证）：
  1. <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

  复制代码
  1. body{touch-action: manipulation;}

  复制代码
  1. <script>// 禁用用户缩放
  2.     window.addEventListener('touchstart',(event)=>{if(event.touches.length >1){
  3.     event.preventDefault();}},{passive:false});let lastTouchEnd =0;
  4.     window.addEventListener('touchend',(event)=>{const now =newDate().getTime();if(now - lastTouchEnd <=300){
  5.     event.preventDefault();}
  6.     lastTouchEnd = now;},{passive:false});</script>

  复制代码

原文链接：xiaokar博客

---

欢迎光临 职贝云数AI新零售门户 (https://www.taojin168.com/cloud/)

Powered by Discuz! X3.5