使用微搭搭建网页之获取企微用户信息

单纯的数据提交修改或许不能满足我们所有的需求，有时候我们需要用到提交者的信息，接下来我们将尝试在微搭中获取企微用户的信息。

（一）获取当前访问者用户信息

首先是要去企微应用中进行相应的配置，如何配置这里先不多介绍了可以参照企微文档。

我们可以在低代码编辑器中在全局中的生命周期中添加代码，我是添加在onAppLaunch中，

大致流程为用户在企微应用中打开我们的网页，配置了企微OAuth2.0网页授权功能的话我在跳转链接中携带一个CODE，我们使用这个code调用企微接口获取UserId，再根据UserId去获取我们想要的数据，我这边是通过自定义连接器调用后台方法直接通过code返回了用户的完整信息。再把自己想要的信息存放到全局变量中，这样我们在任何页面都可以使用到这个信息。

export  default {
 async onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
     var query = window.location.search.substring(1);
      var name ="code";
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                console.log(pair);
                if (pair[0] == name) { $app.dataset.state.code=pair[1];}
            }

    console.log('CODE'+ $app.dataset.state.code);
     const lianjieqi=await app.cloud.callConnector({
         name:'test_d9wq11x',
         methodName:'method_4c647cb973e6d',
         params:{'code':$app.dataset.state.code,'appName':'TEST'},
     });
    console.log(lianjieqi);
 
     $app.dataset.state.OpenWXUserId=lianjieqi.data.userid
     $app.dataset.state.OpenWXUserName=lianjieqi.data.name;
   
    console.log('openUserId'+$app.dataset.state.OpenWXUserId);
     console.log('openUserId'+$app.dataset.state.OpenWXUserName);
  },

（二）通过企微选人接口获取选中人的信息

在需要用到选人接口的页面中进行初始化

export default {
 async onPageLoad(query) {
     var script=document.createElement("script");
    script.setAttribute("type","text/javascript");
    script.setAttribute("src","https://res.wx.qq.com/open/js/jweixin-1.2.0.js");
    document.body.appendChild(script);
     var script2=document.createElement("script");
    script2.setAttribute("type","text/javascript");
    script2.setAttribute("src","https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js");
    document.body.appendChild(script2);
     const lianjieqi=await app.cloud.callConnector({
         name:'test_d9wq11x',
         methodName:'method_691f08d2b2b2b',
         params:{},
     })
     console.log(lianjieqi);
     var jsapi_ticket = lianjieqi.data;
     console.log(jsapi_ticket);
     var weburl=window.location.href;
     console.log("uri"+weburl); 
     

                        var now = parseInt(new Date().getTime() / 1000);
                        var noncestr = "企业ID";
                        //var jsapi_ticket2 = "Rxh1eOhX9SIrk4pdYnMc2w==";
                        //var jsapi_ticket= "HoagFKDcsGMVCIY2vOjf9uiitf-v888cgo07fjmO5B6LX_5eO_I88kmLQiaEtBWTJlvvPYZ1AE8-gfPUJ4G98g";
                        var timestamp = now;
                        //var url= "<%=url%>";
                        var url = weburl;
                        var string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + url;

                        //var string2 = "jsapi_ticket="+jsapi_ticket2+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;
                        var signature = new jsSHA(string1, "TEXT");
                        //var signature2 =new jsSHA(string2,"TEXT");
                        var t = signature.getHash("SHA-1", "HEX");
                        //var t2=signature2.getHash("SHA-1","HEX");
                        var data = {
                            timestamp: timestamp,
                            nonceStr: noncestr,
                            signature: t,
                            //signature2:t2,
                        }
                        console.log(data, string1);
                        wxconfig(data);
    
  },
  onPageShow() {
    //console.log('---------> LifeCycle onPageShow')
  },
  onPageReady() {
    //console.log('---------> LifeCycle onPageReady')
  },
  onPageHide() {
    //console.log('---------> LifeCycle onPageHide')
  },
  onPageUnload() {
    //console.log('---------> LifeCycle onPageUnload')
  },
}

wxconfig代码

function wxconfig(data) {
                    wx.config({
                        bete: true,
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: "企业ID", // 必填，公众号的唯一标识
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填，生成签名的随机串
                        signature: data.signature,// 必填，签名，见附录1
                        jsApiList: [
                            'selectEnterpriseContact',
                        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });
                    wx.ready(function () {
                        //是否支持js接口
                        // document.querySelector('#checkJsApi').onclick = function () {
                        wx.checkJsApi({
                            jsApiList: [
                                'selectEnterpriseContact'
                            ],
                            success: function (res) {
                                //alert(JSON.stringify(res));
                                console.log("success")
                            }
                        });
                        // };
                        console.log("wxready");
                    });
                    wx.error(function (res) {
                        console.log("wxerror", res);
                    });
                }

加密代码

function jsSHA(b, e, c) {
            var a = 0
                , d = [0]
                , f = ""
                , g = null
                , f = c || "UTF8";
            if ("UTF8" !== f && "UTF16" !== f)
                throw "encoding must be UTF8 or UTF16";
            if ("HEX" === e) {
                if (0 !== b.length % 2)
                    throw "srcString of HEX type must be in byte increments";
                g = v(b);
                a = g.binLen;
                d = g.value
            } else if ("TEXT" === e)
                g = w(b, f),
                    a = g.binLen,
                    d = g.value;
            else if ("B64" === e)
                g = x(b),
                    a = g.binLen,
                    d = g.value;
            else if ("BYTES" === e)
                g = y(b),
                    a = g.binLen,
                    d = g.value;
            else
                throw "inputFormat must be HEX, TEXT, B64, or BYTES";
            this.getHash = function(b, f, c, e) {
                var g = null, h = d.slice(), l = a, n;
                3 === arguments.length ? "number" !== typeof c && (e = c,
                    c = 1) : 2 === arguments.length && (c = 1);
                if (c !== parseInt(c, 10) || 1 > c)
                    throw "numRounds must a integer >= 1";
                switch (f) {
                    case "HEX":
                        g = z;
                        break;
                    case "B64":
                        g = A;
                        break;
                    case "BYTES":
                        g = B;
                        break;
                    default:
                        throw "format must be HEX, B64, or BYTES";
                }
                if ("SHA-1" === b)
                    for (n = 0; n < c; n += 1)
                        h = s(h, l),
                            l = 160;
                else
                    throw "Chosen SHA variant is not supported";
                return g(h, C(e))
            }
            ;
            this.getHMAC = function(c, b, e, g, q) {
                var h, l, n, r, p = [], t = [];
                h = null;
                switch (g) {
                    case "HEX":
                        g = z;
                        break;
                    case "B64":
                        g = A;
                        break;
                    case "BYTES":
                        g = B;
                        break;
                    default:
                        throw "outputFormat must be HEX, B64, or BYTES";
                }
                if ("SHA-1" === e)
                    l = 64,
                        r = 160;
                else
                    throw "Chosen SHA variant is not supported";
                if ("HEX" === b)
                    h = v(c),
                        n = h.binLen,
                        h = h.value;
                else if ("TEXT" === b)
                    h = w(c, f),
                        n = h.binLen,
                        h = h.value;
                else if ("B64" === b)
                    h = x(c),
                        n = h.binLen,
                        h = h.value;
                else if ("BYTES" === b)
                    h = y(c),
                        n = h.binLen,
                        h = h.value;
                else
                    throw "inputFormat must be HEX, TEXT, B64, or BYTES";
                c = 8 * l;
                b = l / 4 - 1;
                if (l < n / 8) {
                    if ("SHA-1" === e)
                        h = s(h, n);
                    else
                        throw "Unexpected error in HMAC implementation";
                    h[b] &= 4294967040
                } else
                    l > n / 8 && (h[b] &= 4294967040);
                for (l = 0; l <= b; l += 1)
                    p[l] = h[l] ^ 909522486,
                        t[l] = h[l] ^ 1549556828;
                if ("SHA-1" === e)
                    e = s(t.concat(s(p.concat(d), c + a)), c + r);
                else
                    throw "Unexpected error in HMAC implementation";
                return g(e, C(q))
            }
        }

完成之后我们在此页面下添加一个调用选人接口的方法

export default async function({event, data}) {

   xuanren();
   console.log($page.dataset.state.wxUserName)

}
 
 function xuanren() {
                  
                    (wx.invoke || window.WeixinJSBridge.invoke)(
                        "selectEnterpriseContact",
                        {
                            "fromDepartmentId": 0,// 必填，表示打开的通讯录从指定的部门开始展示，-1表示自己所在部门开始, 0表示从最上层开始
                            "mode": "single",// 必填，选择模式，single表示单选，multi表示多选
                            "type": ["user"],// 必填，选择限制类型，指定department、user中的一个或者多个
                        },
                        function (res) {
                            //console.log("xuanren",res)
                            if (res.err_msg == "selectEnterpriseContact:ok") {
                                if (typeof res.result == 'string') {
                                    res.result = JSON.parse(res.result) //由于目前各个终端尚未完全兼容，需要开发者额外判断result类型以保证在各个终端的兼容性
                                }
                              

                                // var selectedDepartmentList = res.result.departmentList;// 已选的部门列表
                                // for (var i = 0; i < selectedDepartmentList.length; i++) {
                                //     var department = selectedDepartmentList[i];
                                //     var departmentId = department.id;// 已选的单个部门ID
                                //     var departemntName = department.name;// 已选的单个部门名称
                                    
                                // }
                                var selectedUserList = res.result.userList; // 已选的成员列表
                                for (var i = 0; i < selectedUserList.length; i++) {
                                    var user = selectedUserList[i];
                                    var userId = user.id; // 已选的单个成员ID
                                    var userName = user.name;// 已选的单个成员名称
                                    var userAvatar = user.avatar;// 已选的单个成员头像
                                    
                                    $page.dataset.state.wxUserName=userName;
                                     $page.dataset.state.wxUserId=userId;
                                }
                       
                            }
                        }
                    );
                }

然后就可以在页面上添加一个按钮并且绑定刚才新建的方法

在选人按钮的前面添加一个输入组件并把输入值绑定成我们用来存放用户姓名的参数

这样就完成了从企业微信通讯录选人的功能啦。

（三）将企业微信用户信息保存至数据源

由于企微用户信息我们是保存在变量中的，所以微搭自带的表单提交功能是无法满足我们的需求的，所以我们需要新建一个方法代替原来的插入方法，并点击表单，在它的提交事件中绑定我们自己的方法。

至此应用获取企业微信用户信息的功能就完成了，我们可以得知是谁在使用这个应用，也可以通过选人主动获取选中人的企业微信信息

微搭

使用微搭搭建网页之获取企微用户信息

相关

腾讯云微搭入选国际权威研究机构Forrester《2021年低代码平台中国市场现状分析报告》

深入解读腾讯云微搭低代码的技术架构

标签