一、项目场景：

1、使用vue开发了一套h5页面的项目

2、这个h5链接是在企业微信里某个地方打开的

3、打开页面的时候有一个好友列表，点击好友列表某一条复制手机号跳转到企业微信添加好友页面

二、实现的效果图

博客只允许上传gif图，所以我只能手机进行录屏，然后再拿gif录一次video给大家展示（如果他不动了，你就刷新一下页面）

三、实现方案

1、通过 npm 引入（企业微信 WECOM-JSSDK）

<code>//第一种方式 npm引入

npm install @wecom/jssdk （我用的这种）

//也有第二种方法（别问为啥不用这个，问就是因为我不会）

<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script>code>

2、页面中使用

import * as ww from '@wecom/jssdk'

3、页面初始化注册企微的jdk（强度来了，非非非常烧脑，需要细看细看细看）

在看这条之前你需要先明白几点：

1、想要调用企微的东西，通俗说需要先把你自己的项目让企微进行授权，简单思路就是：

appid+url----> 换code ---->拿code---->换access_token

2、（解释第一点）你拿自己的企微id（appid）以及页面地址，去获取企微的code，拿到code后去换取access_token，拿到token后就能进行你自己页面的接口等其他操作了

<code><template>

<van-tabs sticky v-model="active" @click-tab="onClickTab">code>

<van-tab name="first" :title="'待添加（' + total + '）'">code>

<van-list

v-if="active == 'first'"code>

v-model:loading="loading"code>

:finished="finished"code>

finished-text="没有更多了"code>

:immediate-check="false"code>

@load="getData"code>

:offset="20"code>

class="contentList"code>

>

<van-cell>

<template v-for="(unit, key) in list" :key="key">code>

<div class="content">code>

<div>{ { unit.phone }}</div>

<div>

{ { unit.customerName }}

</div>

<div style="display: flex">code>

<van-button

plain

size="small"code>

hairline

type="primary"code>

@click="copyFn($event, unit.phone)"code>

>复制并添加</van-button

>

</div>

</div>

</template>

</van-cell>

</van-list>

</van-tab>

<van-tab name="second" title="待通过"></van-tab>code>

<van-tab name="three" title="已添加"></van-tab>code>

</van-tabs>

</template>

<script>

import {

getTypeList,

setState,

getAgentTicket,

wcRedirect,

qrLogin,

} from "../api/highSeas";

import { showNotify, closeNotify } from "vant";

import ClipboardJS from "clipboard";

import * as ww from "@wecom/jssdk";

export default {

data() {

return {

active: "first",

list: [],

loading: false,

finished: false,

total: 0,

query: {

pageSize: 20,

pageNum: 1,

addState: 0, // 0:待添加;1:已添加;3:待通过

},

};

},

created() {

let appid = "wxXXXXXXXXXXXXXXXX";

this.url = location.href.split("#")[0];

this.initCode(appid);

},

methods: {

onClickTab(info) {

this.active = info.name;

if (info.name == "first") {

this.query.pageNum = 1;

this.list = [];

this.loading = false;

this.finished = false;

getTypeList(this.query).then((res) => {

this.total = res.data.total;

this.list.push(...res.data.rows);

});

this.query.pageNum = 2;

}

},

async initCode(appid) {

let code = this.getUrlParam("code");

if (!code) {

const urls = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${ appid}&redirect_uri=${ this.url}&response_type=code&scope=snsapi_base&state=highSeas#wechat_redirect`;

window.location.href = urls;

} else {

let postData = {

code: code,

};

qrLogin(postData).then((res) => {

this.initQueryVal = true;

sessionStorage.setItem("token", res.access_token);

this.init();

this.wxConfig(appid);

});

}

},

// 获取url参数

getUrlParam(name) {

const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

const result = window.location.search.substr(1).match(reg);

return result ? decodeURIComponent(result[2]) : null;

},

wxConfig(appid) {

let dataInfo = {

url: this.url,

appType: 1,

};

getAgentTicket(dataInfo).then((res) => {

this.dataVal = res.data.data;

let timestamp = this.dataVal.timestamp;

let nonceStr = this.dataVal.nonceStr;

let signature = this.dataVal.signature;

ww.register({

corpId: appid, // 必填，当前用户企业所属企业ID

agentId: "10XXXXXX",

jsApiList: ["navigateToAddCustomer", "scanQRCode", "openUserProfile"], // 必填，需要使用的JSAPI列表

getConfigSignature, // 必填，根据url生成企业签名的回调函数

getAgentConfigSignature,

onConfigSuccess: (result) => {

// alert(result,"success");

},

onConfigFail: (result) => {

alert(JSON.stringify(result), "failed");

},

});

function getConfigSignature(url) {

// 根据 url 生成企业签名

// alert(this.dataVal.nonceStr, "this.dataVal.nonceStr");

// alert(

// this.dataVal.signature,

// "this.dataVal.signaturesignaturesignaturesignaturesignature"

// );

// 生成方法参考 https://developer.work.weixin.qq.com/document/path/90539

return { timestamp, nonceStr, signature };

}

async function getAgentConfigSignature(url) {

// 根据 url 生成应用签名，生成方法同上，但需要使用应用的 jsapi_ticket

return { timestamp, nonceStr, signature };

}

});

},

init() {

getTypeList(this.query).then((res) => {

this.total = res.data.total;

this.list.push(...res.data.rows);

});

this.query.pageNum = 2;

},

getData() {

getTypeList(this.query).then((res) => {

let dataInfo = res.data.rows;

this.loading = false;

this.query.pageNum += 1;

this.total = res.data.total;

this.list.push(...dataInfo);

if (this.list.length >= Number(this.total)) {

this.finished = true;

} else {

this.finished = false;

}

});

},

setGoto(text) {

setState({ phone: text }).then((res) => {

ww.navigateToAddCustomer({

success(result) {

// alert(JSON.stringify(result), "1111");

// 成功回调，result.errMsg 固定格式为“方法名:ok”

},

fail(result) {

alert(JSON.stringify(result), "32222");

// 失败回调，通过 result.errMsg 查看失败详情

},

complete(result) {

// alert(JSON.stringify(result), "333333");

// 完成回调，无论调用成功还是失败，都会回调该方法

},

});

this.list = [];

this.query.pageNum = 1;

this.finished = false;

this.init();

});

},

copyFn(e, text) {

const clipboard = new ClipboardJS(e.target, { text: () => text });

clipboard.on("success", (e) => {

this.setGoto(text);

showNotify({ type: "success", message: "复制成功" });

// 释放内存

clipboard.off("error");

clipboard.off("success");

clipboard.destroy();

});

clipboard.on("error", (e) => {

// 不支持复制

// this.$toast({

// type: "fail",

// message: "该浏览器不支持自动复制",

// icon: "none",

// });

showNotify({ type: "warning", message: "该浏览器不支持自动复制" });

// 释放内存

clipboard.off("error");

clipboard.off("success");

clipboard.destroy();

});

clipboard.onClick(e);

},

},

};

</script>

<style scoped lang='scss'>code>

.content {

font-size: 15px;

font-weight: 500;

display: flex;

justify-content: space-between;

align-items: center;

line-height: 60px;

}

.contentList {

// overflow-y: scroll;

// height: calc(100vh - 60px); //

}

::v-deep .van-button--info {

border: none;

}

</style>