Skip to content

Commit 44bb904

Browse files
MuGuiLinMuGuiLin
committed
update
1 parent e18c761 commit 44bb904

File tree

2 files changed

+309
-0
lines changed

2 files changed

+309
-0
lines changed

‎Web-API/iframe父子跨域通信/get-depart-and-user-api.php‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<?php
2+
/** @var yii\web\View $this */
3+
use yii\helpers\Html;
4+
$this->title = 'api';
5+
$this->params['breadcrumbs'][] = $this->title;
6+
?>
7+
<script src="/js/jquery.min.js"></script>
8+
<script>!(function(){const s=Element.prototype.attachShadow;Element.prototype.attachShadow=function(o){const _=s.call(this, o);this.mu=_;return _;}}());</script>
9+
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
10+
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
11+
<script>
12+
console.log(<?php json_encode($data,320);?>)
13+
window.agentConfigParams = {
14+
corpid: '<?php echo $data['corp_id'];?>', // 必填，企业微信的corpid，必须与当前登录的企业一致
15+
agentid: <?php echo $data['agentid'];?>, // 必填，企业微信的应用id（e.g. 1000247）
16+
timestamp: '<?php echo $data['timestamp'];?>', // 必填，生成签名的时间戳
17+
nonceStr: '<?php echo $data['nonceStr'];?>', // 必填，生成签名的随机串
18+
signature: '<?php echo $data['signature'];?>', // 必填，签名，见附录-JS-SDK使用权限签名算法
19+
jsApiList: ['selectExternalContact'], // 必填，传入需要使用的接口名称
20+
success: function (result) {
21+
window.WWOpenData.bind(document.querySelector('ww-open-data'))
22+
},
23+
fail: function (error) {
24+
console.error(error)
25+
if (error.errMsg.indexOf('function not exist') > -1) {
26+
alert('版本过低请升级！')
27+
}
28+
}
29+
}
30+
</script>
31+
<section id="openids"></section>
32+
<section id="departids"></section>
33+
<script>
34+
!(async () => {
35+
try {
36+
const openids = document.getElementById('openids');
37+
const departids = document.getElementById('departids');
38+
await agentConfig(window.agentConfigParams);
39+
/**
40+
* 创建 ww-open-data 元素
41+
*/
42+
[<?php echo $data['openids'];?>].forEach(function (openid) {
43+
const el = document.createElement('ww-open-data')
44+
el.setAttribute('type', 'userName')
45+
el.setAttribute('openid', openid)
46+
openids.appendChild(el)
47+
});
48+
[<?php echo $data['departids'];?>].forEach(function (openid) {
49+
const el = document.createElement('ww-open-data')
50+
el.setAttribute('type', 'departmentName')
51+
el.setAttribute('openid', openid)
52+
departids.appendChild(el)
53+
});
54+
/**
55+
* 绑定 document 上全部的 ww-open-data 元素
56+
*/
57+
WWOpenData.bindAll(document.querySelectorAll('ww-open-data'))
58+
} catch (error) {
59+
console.error(error)
60+
}
61+
/**
62+
* 调用 wx.agentConfig
63+
*/
64+
async function agentConfig(config) {
65+
return new Promise((success, fail) => {
66+
console.info('wx.agentConfig', config)
67+
wx.agentConfig({ ...config, success, fail })
68+
}).then(res => {
69+
console.info('wx.agentConfig success', res)
70+
return res
71+
}, error => {
72+
console.error('wx.agentConfig fail', error)
73+
throw error
74+
})
75+
}
76+
/**
77+
* 获取 用户信息和部门信息 提交到后台
78+
*/
79+
globalThis.setTimeout(() => {
80+
const users = openids.querySelectorAll('ww-open-data'),
81+
departs = departids.querySelectorAll('ww-open-data'),
82+
data = {
83+
...window.agentConfigParams,
84+
users: {},
85+
departs: {}
86+
};
87+
users.length && users.forEach(el => (data.users[el.getAttribute('openid')] = el.mu.textContent));
88+
departs.length && departs.forEach(el => (data.departs[el.getAttribute('openid')] = el.mu.textContent));
89+
(users.length || departs.length) && $.ajax({
90+
url: '/third/index/update-depart-and-user-name',
91+
type: 'POST',
92+
data: JSON.stringify(data),
93+
success: function (res) {
94+
console.log(res);
95+
if (100 != res.code) {
96+
alert(res.message);
97+
}
98+
}
99+
});
100+
}, 3000);
101+
})();
102+
</script>

‎Web-API/iframe父子跨域通信/open-data.php‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<?php
2+
3+
/** @var yii\web\View $this */
4+
5+
use yii\helpers\Html;
6+
7+
$this->title = 'Open-Data';
8+
$this->params['breadcrumbs'][] = $this->title;
9+
?>
10+
<script src="/js/jquery.min.js"></script>
11+
<script>!(function(){const s=Element.prototype.attachShadow;Element.prototype.attachShadow=function(o){const _=s.call(this, o);this.mu=_;return _;}}());</script>
12+
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
13+
<!--
14+
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
15+
<script type="text/javascript" src="//open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
16+
注：以下两个是直接在页面上引入 open-data SDK
17+
1、SDK内容是动态返回的，请严格按照上面的方式引入，不要保存到项目本地后打包引入
18+
2、referrerpolicy 声明为 origin 是为了让 SDK 能够顺利识别关键域名，不能去掉
19+
-->
20+
<!-- <script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-2.3.3.js"></script> -->
21+
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
22+
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
23+
24+
<script>
25+
new VConsole();
26+
/**
27+
* wx.config 参数
28+
*
29+
* @see https://open.work.weixin.qq.com/api/doc/90001/90144/90547
30+
*/
31+
window.configParams = { /* ... */ }
32+
/**
33+
* wx.agentConfig 参数
34+
*
35+
* @see https://developer.work.weixin.qq.com/document/path/94313#通过agentconfig注入应用的权限
36+
*/
37+
window.agentConfigParams = {
38+
debug: true,
39+
corpid: '<?php echo $data['corp_id'];?>', // 必填，企业微信的corpid，必须与当前登录的企业一致
40+
agentid: '<?php echo $data['agentid'];?>', // 必填，企业微信的应用id （e.g. 1000247）
41+
timestamp: '<?php echo $data['timestamp'];?>', // 必填，生成签名的时间戳
42+
nonceStr: '<?php echo $data['nonceStr'];?>', // 必填，生成签名的随机串
43+
signature: '<?php echo $data['signature'];?>', // 必填，签名，见附录-JS-SDK使用权限签名算法
44+
jsApiList: ['selectExternalContact'], // 必填，传入需要使用的接口名称 ["getOpenData"]
45+
success: function (result) {
46+
console.log(result, '请求微信成功')
47+
// wx.agentConfig成功回调后，WWOpenData 才会注入到 window 对象上面
48+
window.WWOpenData.bind(document.querySelector('ww-open-data'))
49+
},
50+
fail: function (res) {
51+
console.log('查看错误信息' + res)
52+
if (res.errMsg.indexOf('function not exist') > -1) {
53+
alert('版本过低请升级！')
54+
}
55+
}
56+
}
57+
</script>
58+
59+
<style>
60+
h1, .container {
61+
text-align: center;
62+
}
63+
</style>
64+
65+
<div class="site-open-data">
66+
<h1>通讯录展示组件 open-data</h1>
67+
<hr>
68+
<div class="container">
69+
<p>WWOpenData.__version__ = <b id="__version__"></b></p>
70+
<p>WWOpenData.checkSession = <b id="checkSession"></b></p>
71+
<a href="https://developer.work.weixin.qq.com/document/path/91958" target="_blank" rel="noopener noreferrer">🚀第三方应用开发-服务端API-通讯录展示组件使用说明</a>
72+
<div>安全控件展示页面</div>
73+
<div id="openids">显示出前 100 名可见范围人员名单！</div>
74+
</div>
75+
<script>
76+
window.openidList =[<?php echo $openids;?>]; // ['abc123','asd456', ...]
77+
/*
78+
1、页面需要同时引入 jweixin-1.2.0.js 和 jwxwork-1.0.0.js
79+
2、在微信、企业微信环境下，调用 WWOpenData 相关接口前需要保证 wx.agentConfig 执行成功，相关文档
80+
3、为兼容更多浏览器版本，需要在 ww-open-data 元素显示出来后再调用 bind 函数
81+
4、在系统浏览器的场景下，agentid 是任意一个有授权关系的第三方应用的 id，agentConfig 是作为浏览器的兼容处理，该方法对应的参数信息需要与登录的用户企业一致
82+
5、若 userType=userName，openid 对应 userid，若 userType=departmentName，openid 对应 departmentid，详情可以参考 通讯录展示组件
83+
*/
84+
(async () => {
85+
try {
86+
if (WWOpenData) {
87+
console.info('WWOpenData demo start')
88+
__version__.innerText = WWOpenData.__version__
89+
checkSession.innerText = WWOpenData.checkSession
90+
}
91+
// 仅在微信环境下调用 wx.config
92+
if (/MicroMessenger/i.test(navigator.userAgent)) {
93+
await config(window.configParams)
94+
}
95+
await agentConfig(window.agentConfigParams)
96+
// 若一切正常，此时可以在 window 上看到 WWOpenData 对象
97+
console.info('window.WWOpenData', window.WWOpenData)
98+
if (WWOpenData.checkSession) {
99+
WWOpenData.checkSession({
100+
success() {
101+
alert('open-data 登录态校验成功！')
102+
},
103+
fail() {
104+
alert('open-data 登录态过期！')
105+
},
106+
})
107+
}
108+
if (WWOpenData.on) {
109+
/**
110+
* ww-open-data 元素数据发生变更时触发
111+
*/
112+
WWOpenData.on('update', event => {
113+
const openid = event.detail.element.getAttribute('openid')
114+
console.info('渲染数据发生变更', openid, event.detail.hasData)
115+
})
116+
/**
117+
* ww-open-data 获取数据失败时触发
118+
*/
119+
WWOpenData.on('error', () => {
120+
console.error('获取数据失败')
121+
})
122+
}
123+
/**
124+
* 创建 ww-open-data 元素
125+
*/
126+
const openids = document.getElementById('openids')
127+
// 这里的 window.openidList 是该 demo 页面自行组织的数据，不具备普遍性
128+
// 开发者进行开发时，需要自己拿到授权企业相对应的 openid
129+
// 关于 openid 的定义与获得方式，可以关注文档注意事项的第 5 点
130+
for (const openid of window.openidList) {
131+
const element = document.createElement('ww-open-data')
132+
element.setAttribute('type', 'userName') // 获取用户名 https://developer.work.weixin.qq.com/document/path/91958#25-元素属性
133+
// el.setAttribute('type', 'departmentName') // 获取部门名
134+
element.setAttribute('openid', openid)
135+
openids.appendChild(element)
136+
}
137+
/**
138+
* 绑定 document 上全部的 ww-open-data 元素
139+
*/
140+
WWOpenData.bindAll(document.querySelectorAll('ww-open-data'))
141+
console.info('WWOpenData demo end')
142+
} catch (error) {
143+
console.error('WWOpenData demo error', error)
144+
}
145+
/**
146+
* 调用 wx.config 注：如果在微信环境下使用 open-data，必须先调用 wx.config
147+
*
148+
* @see https://open.work.weixin.qq.com/api/doc/90001/90144/90547
149+
*/
150+
async function config(config) {
151+
return new Promise((resolve, reject) => {
152+
console.info('wx.config', config)
153+
wx.config(config)
154+
wx.ready(resolve)
155+
wx.error(reject)
156+
}).then(() => {
157+
console.info('wx.ready')
158+
}, error => {
159+
console.error('wx.error', error)
160+
throw error
161+
})
162+
}
163+
/**
164+
* 调用 wx.agentConfig
165+
*
166+
* @see https://open.work.weixin.qq.com/api/doc/90001/90144/90548
167+
*/
168+
async function agentConfig(config) {
169+
return new Promise((success, fail) => {
170+
console.info('wx.agentConfig', config)
171+
wx.agentConfig({ ...config, success, fail })
172+
}).then(res => {
173+
console.info('wx.agentConfig success', res)
174+
return res
175+
}, error => {
176+
console.error('wx.agentConfig fail', error)
177+
throw error
178+
})
179+
}
180+
/**
181+
* 获取 用户信息和部门信息 提交到后台
182+
*/
183+
globalThis.setTimeout(() => {
184+
const users = openids.querySelectorAll('ww-open-data'),
185+
departs = [], // departids.querySelectorAll('ww-open-data'),
186+
data = {
187+
...window.agentConfigParams,
188+
users: {},
189+
departs: {}
190+
};
191+
users.length && users.forEach(el => (data.users[el.getAttribute('openid')] = el.mu.textContent));
192+
departs.length && departs.forEach(el => (data.departs[el.getAttribute('openid')] = el.mu.textContent));
193+
(users.length || departs.length) && $.ajax({
194+
url: '/third/index/update-depart-and-user-name',
195+
type: 'POST',
196+
data: JSON.stringify(data),
197+
success: function (res) {
198+
console.log(res);
199+
if (100 != res.code) {
200+
alert(res.message);
201+
}
202+
}
203+
});
204+
}, 3000);
205+
})()
206+
</script>
207+
</div>

0 commit comments

Comments
 (0)