企微侧边栏项目搭建和初始化授权登录

wc4 发表于 2024-5-25 12:05:03 | 显示全部楼层 |阅读模式 布景：需要是买通企微客户手刺取公司背景办理体系网校战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号令创立名目，并收拾整顿相关文献： vue create sd-web-wecom-sidebar 复造代码 设置名目env文献，用于辨别多名目多情况。 新修代码堆栈gitlab，并提接到长途代码堆栈。 供给env文献名给运维设置到jenkins完毕主动化布置。 3.名目开辟 起首是专用接互组件战款式启拆。 加入名目要能保存agentId战corpId，那面正在链交地点栏上获得并保存vuex便可，至于写的职位，尔是写正在router文献的路由保卫。（写正在App.vue没有生效，写正在main.js也能够） 登录鉴别，能够使用可否存了userInfo截至鉴别，已登录则跳转如下链交获得code并挪用效劳端交心调换userInfo，留神写佳沉定背地点逻辑。假设已经登录则施行后绝操纵。 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： wx.config({beta:true,//必需 这样写，不然wx.invoke挪用方法的jsapi会有成就debug:false,// 启开调试情势,挪用的统统api的前去值会正在客户端alert进去，若要检察传进的参数，能够正在pc端翻开，参数疑息会颠末log挨出，仅正在pc端时才会挨印。appId: corpId,// 必挖，企业微疑的corpIDtimestamp: timestamp,// 必挖，天生署名的时间戳nonceStr: nonceStr,// 必挖，天生署名的随机串signature: signature,// 必挖，署名，睹 附录-JS-SDK使用权力署名算法     jsApiList // 必挖，需要使用的JS交心列表，但凡要挪用的交心皆需要传进来}) wx.ready(asyncfunction(){resolve()}) wx.error((res)=>{this.$alert('wx.config fail')     console.log('wxConfig',res)reject(res)}) 复造代码 wx.agentConfig({corpid: corpId,// 必挖，企业微疑的corpid，必需取目前登录的企业不合agentid: agentId,// 必挖，企业微疑的使用id （e.g. 1000247）timestamp: timestamp,// 必挖，天生署名的时间戳nonceStr: nonceStr,// 必挖，天生署名的随机串signature: signature,// 必挖，署名，睹附录-JS-SDK使用权力署名算法     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为启拆的初初化检测）： exportasyncfunctiongetCurExternalContact(retry){awaitinitAgentConfig()returnnewPromise((resolve, reject)=>{     wx.invoke('getCurExternalContact',{},asyncfunction(res){if(res.err_msg ==='getCurExternalContact:ok'){const userId = res.userId // 前去目前内部联系人userId// co妹妹it('SET_WX_USER_ID', userId)resolve(userId)}else{if(retry !==true){           store.co妹妹it('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框架的日期时间挑选框等均是英文，处置方法： <!-- App.vue --> <template>   <a-config-provider :locale="locale">     <div id="app">       <router-view />     </div>   </a-config-provider> </template> <script> import zhCN from "ant-design-vue/lib/locale-provider/zh_CN"; export default {   name: "app",   data() {     return {       locale: zhCN,     };   }, }; </script> 复造代码 TinymceEditor富文原报错Uncaught SyntaxError: Unexpected token ‘<’，定位并简略设置代码处置。api烧毁警告可设置deprecation_warnings: false处置。 其余企微受权成就，能够参考民间提醒处置。没有限于已设置利剑名单、设置参数毛病、已走cache招致交心挪用次数太多…… 怎样启开企微侧边栏调试情势？共时按Ctrl+Alt+Shift+D便可 企微侧边栏怎样避免页里缩搁？能够测验考试如下办法（留神客户端会有一段时间慢存,能够正在树立-通用-保存空间-清理截至慢存考证）： <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 复造代码 body{touch-action: manipulation;} 复造代码 <script>// 禁用用户缩搁     window.addEventListener('touchstart',(event)=>{if(event.touches.length >1){     event.preventDefault();}},{passive:false});let lastTouchEnd =0;     window.addEventListener('touchend',(event)=>{const now =newDate().getTime();if(now - lastTouchEnd <=300){     event.preventDefault();}     lastTouchEnd = now;},{passive:false});</script> 复造代码 本文链交：xiaokar专客

回复 使用道具 举报 提升卡 置顶卡 沉默卡 喧嚣卡 变色卡 千斤顶 照妖镜