企业微信开发/主要代码分享（前端）

最新推荐文章于 2024-05-07 14:37:09 发布

Gaoju_liz

最新推荐文章于 2024-05-07 14:37:09 发布

阅读量2.6k

点赞数 1

分类专栏：学习之旅文章标签：前端 javascript vue.js 微信

本文链接：https://blog.csdn.net/Gaoju_liz/article/details/127998983

版权

学习之旅专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前端起步
这次开发主要是自建应用/H5/Vue2

因为用的是自建应用H5，所以第一步考虑的是企微中jssdk的使用
1.利用vue的mixin方法和js类的方法写两个个公共组件（可以下载任意目录下）

这是我的路径这里插入图片描述

首先是getAuth.js

import { oauthUrl, oauthUser } from "../request/api";


class GetAuth {
    constructor() {
        this.employeeId = null
        this.typeCode = null
    }
    // 授权成功，换取当前登录用户得userId(企业邮箱类型得)
    getAuthData() {
        // let urlData = window.location.href
        // let p = urlData.split('?')[1]
        // let params = new URLSearchParams(p)
        //http://wxtest.emagiclife.com/wecom/?code=lWMh8Pcl1c6v1m9MTROdtT9Fk9KwpWga8YKvuY2QEcI&state=sdfds343#/customerInfo
        let params = new URLSearchParams(window.location.href.split('?')[1])
        sessionStorage.removeItem('key')
        sessionStorage.setItem('key', window.location.href)
        const code = params.get('code')
        sessionStorage.setItem('code', code)
        console.log(code,"codecodecoedecoedecoed");
        if (code && code.length > 15) {
            return oauthUser({ code }).then(res1 => {
                if (!res1.userId) {
                    Toast.fail('获取信息失败，请稍后重试')
                    return
                } else {
                    this.employeeId = res1.userId
                    sessionStorage.setItem('employeeId', this.employeeId)
                    return this.employeeId
                }

            })
        } else {
            this.getWxAuthCode()
            return Promise.resolve('')
        }

    }
    // 获取企微授权
    getWxAuthCode() {


        oauthUrl().then(res => {
            window.location.href = res
        })
    }


    // 获取当前登录用户userId
    getUserId() {
        if (!this.employeeId) {
            return this.getAuthData()
        }
        return Promise.resolve(this.employeeId)
    }
    
}
export default new GetAuth()

怎样在页面使用呢？

在methods钩子函数中

    //登路人id为了调用认证接口
    getUserIdByWecomId() {
    //注意在这个地方直接使用类中暴露的方法/我这里是为了拿到当前登录用户的id
      getAuthRoot.getUserId().then((res) => {
        console.log(res, "换取userid");

        // this.userIdInfo = res.userId;
        this.getJsdkData();
      });
    },

然后

 mounted() {
    document.title = "xxxxx";//定义企业微信页面标题
    this.getUserIdByWecomId();
  },

我们来分析下代码
首先在进入我的页面的时候/有的逻辑需要获取到当前登录用户得id在所以代码执行逻辑是调用类里得 getUserId 方法查询id 如果存在就直接返回如果不存在就往上查询 getAuthData 这个时候有一个逻辑是code判断（下面我会解释）code判断通过就直接调用接口返回我们需要得id 负责走else 调用另一个接口（认证用得）接口都是后台写得前端无需操心

备注：上面所讲到得code / 我们需要先了解企业微信得逻辑 /企业微信首次进入会要求我们进行一个认证这个认证需要跳转到特定得url （后台可以给你）
需要注意得是：这个认证其实是分了两步1.跳转至认证得url（这是企微拼得url 会给后台，然后后台在通过接口给前端（code长度判断是因为这个认证得url里边也有code但不是我们要得所以加判断））前端跳转至认证url后（静默/手动）认证完成 /这个时候微信又给你拼了一个url（针对你页面路径拼得）你会跳转至这个url 这个时候url包含了一个相当长得code参数，也是我们需要得拿到这个code 在通过后台接口去获取当前登录得id

当我们获取到这个id得时候在暴露得方法中就可以直接使用这个id了

其次是weChat.js

我们会看到上边得代码块中有一个this.getJsdkData();方法他就是调用weChat。js得方法

import { getJsSDK, jsAgentSign } from "../request/api";

const weChatMixin = {
    data() {
        return {
            KHuserId: '',
            localData: null,
            localIds: null,
            newLocalIds: null,
            serverId: null,
            localDataList: [],
            serverIdList: [],
            newImglistType: [],
            count: 0
        }
    },
    methods: {
        //客户信息调用接口（搭配主vue文件得方法）
        getInfo() {

        },
        // 用于需要 调用agentConfig的接口
        async wxAgentConfig(urls, wxApi, sendTxt) {
            let that = this
            const wx = window.wx
            let url = urls ? urls : sessionStorage.getItem('key')
            const res = await getJsSDK({ url })
            wx.config({
                beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.appId, // 必填，企业微信的corpID
                timestamp: res.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.nonceStr, // 必填，生成签名的随机串
                signature: res.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
                jsApiList: ["sendChatMessage", "getCurExternalContact", 'chooseImage'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
            });
            wx.ready(() => {
                wx.checkJsApi({
                    jsApiList: ["sendChatMessage", "getCurExternalContact", 'chooseImage', 'getLocalImgData'],
                    success: async () => {
                        if (wxApi == 'chooseImage') {
                            wx.chooseImage({
                                count: 9, // 默认9
                                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                                success: function (res) {
                                    that.localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                                    that.newLocalIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                                    console.log(that.localIds, "企业微信啊");
                                    that.newImglistType = res.localIds.map(item => {
                                        return item.split('/')[item.split('/').length - 1]
                                    })
                                    for (let index = 0; index < that.localIds.length; index++) {
                                        that.syncUpload(that.localIds[index])
                                    }
                                },
                                fail: function (res) {
                                    console.log("开启失败", res)
                                }
                            });
                        } else {
                            const res1 = await jsAgentSign({ url })
                            wx.agentConfig({
                                corpid: res1.corpId, // 必填，企业微信的corpid，必须与当前登录的企业一致
                                agentid: res1.agentId, // 必填，企业微信的应用id （e.g. 1000247）
                                timestamp: res1.timestamp, // 必填，生成签名的时间戳
                                nonceStr: res1.nonceStr, // 必填，生成签名的随机串
                                signature: res1.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
                                jsApiList: ["sendChatMessage", "getCurExternalContact"],
                                success: res => {
                                    if (wxApi == 'getCurExternalContact') {
                                        wx.invoke("getCurExternalContact", {}, function (res) {
                                            console.log(res, "iiiiiii");
                                            if (res.err_msg == "getCurExternalContact:ok") {
                                                that.KHuserId = res.userId;//客户userid
                                                that.getInfo()
                                                console.log(that.userId, "zheshiidididididdididididididii");
                                            } else {
                                                //错误处理
                                            }
                                        });
                                        console.log(res);
                                    } else if (wxApi == 'sendChatMessage') {
                                        wx.invoke(
                                            "sendChatMessage",
                                            {
                                                msgtype: "text", //消息类型，必填
                                                enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段

                                                text: {
                                                    content: sendTxt, //文本内容
                                                },
                                            },
                                            function (res) {
                                                console.log(res, "xxxxxxxxxx");
                                                if (res.err_msg == "sendChatMessage:ok") {
                                                    //发送成功
                                                }
                                            }
                                        );
                                    }

                                }
                            })
                        }

                    }
                })
            })
        },
        //回显需要
        syncUpload(localIds) {
            let that = this;
            wx.getLocalImgData({
                localId: localIds, // 图片的localID
                success: function (resBackData) {
                    let localData = resBackData.localData;
                    //判断是否有这样的头部
                    if (localData.indexOf('data:image') != 0)
                        localData = 'data:image/jpeg;base64,' + localData
                    //localData是经过处理的base64编码的图片
                    that.localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
                    that.localDataList.push(that.localData)
                    that.syncUploadService(localIds)
                }
            });
        },
        //上传图片至微信服务
        syncUploadService(localIda) {
            let that = this;
            wx.uploadImage({
                localId: localIda, // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    var serverId = res.serverId; // 返回图片的服务器端ID
                    that.serverIdList.push(res.serverId)
                }
            });
        }
    }
}

export default weChatMixin

里边包含两个接口（后台提供）
1.getJsSDK 这个主要是企业微信入口权限使用的（wx.config）
2.jsAgentSign 这个是企业微信API部分权限注入使用的（wx.agentConfig）
3.代码中像wx.checkJsApi wx.chooseImage等可以自行官方文档查看，这里不做解释

注：因为是一个项目三块应用所以每一个应用进入的页面（认证完成之后）都需要调用这里的方法

当然方法是由了页面怎么使用呢

我们在回到 this.getJsdkData();方法

getJsdkData() {
      this.wxAgentConfig(
        sessionStorage.getItem("key"),
        "getCurExternalContact"
      );
    },

虽然有点乱但是这样看就清楚了吧 this.getJsdkData()方法是为了走weChat.js

weChat使用得mixin写得所以页面使用
1.

import weChatMixin from "../../minxi/weChat";

mixins: [weChatMixin],

 this.wxAgentConfig(
        sessionStorage.getItem("key"),
        "getCurExternalContact"
      );

注意得是，入参分别是url 和你要使用得wxAPI

个人建议和遇到得一些坑
1.尽量走小程序（JSsdk）太难了
2.认证url一定要保证走完在走你自己页面逻辑
3.hash企业微信不认会强行改变你得路径要么搜搜网上重写url得方法（我是没弄清楚）要么沟通好后台 ngx配置vue路由模式前端直接使用history
4.注意config注入权限问题一定要保证你前端得当前得url正确（除非你想一边挠头，一边mmp）
5.关于权限问题，一定要去企业微信官网/能登录管理你应用得官网配置好
6.沟通好后台我们前端是负责客户端得服务端大多是后台来做
7.我不知道是我得问你还是企业微信本来就不好匹配请求头其中一个接口我是这样写的（因为企业微信上不会调用才这样写）

export function complaintaddapi(data) {
  return service({
    url: ANDapi + 'xxxxxxxxx',
    method: 'post',
    data: data,
    // headers:{
    //   'Content-type': 'application/x-www-form-urlencoded'
    // }
    transformRequest: [function (data) {
      //在向服务器发送前，修改请求数据
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }]
  })
}