关于 uni app 打包 h5 污染wx,造成引入企业微信的通讯录组件 ww-open-data 无法使用的问题

前提: 开发环境uniapp,生成h5,使用企业微信组件WWOpenData


开发环境 uniapp,生成 h5,使用企业微信组件 WWOpenData)

原因与问题

  • 失败原因是uni定义了wx的个字段,组件调用时的wx被污染了
  • ww-open-data 组件使用的时候回自己去调用wx.agentConfig,所以把 wx.agentConfig替换成 jWeixin.agentConfig是不能解决实际问题的。
  • WWOpenData.bind(this.$el)要在wx.agentConfig成功回调后使用。

解决方法

  1. 在app.vue的onLaunch钩子里让uni定义的window.wx = null,为了保险起见再手动添加一下js
clearWX(){
		console.log(window.wx,"now-window.wx")
		window.wx = null
		const script1 = document.createElement('script')
		script1.referrerpolicy="origin"
		script1.src= 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'
		document.head.appendChild(script1);
		script1.onload = function() {
			const script2 = document.createElement('script')
			script2.referrerpolicy="origin"
			script2.src= 'https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js'
			document.head.appendChild(script2)
			  script2.onload = function() {  
					 // TODO something  
					 console.log(window.wx,"appVue-window.wx")
			}  
		}
	}
  1. 在我们封装的wwOpenData组件中使用wx.agentConfig()window.wx = window.jWeixin。让他重新赋值。这样wwOpenData自动调用的时候会指向正确的wx
agentConfig(config) {
	var url = window.location.href.substring(0, window.location.href.indexOf('#'));
	console.log(window.jWeixin, "window.jWeixin")
	console.log(window.wx, "window.wx")
	window.wx = window.jWeixin
	var wx = window.wx ? window.wx : window.jWeixin;
	console.log(wx, "wx")
	this.$http.request("你获取参数的接口").then(res => {
		debugger
		var data = res.data;
		console.log(data, "接口调用的数据")
		wx.agentConfig({
			corpid: data.appId, // 必填,企业微信的corpid,必须与当前登录的企业一致
			agentid: data.agentid, // 必填,企业微信的应用id (e.g. 1000247)
			timestamp: data.timestamp, // 必填,生成签名的时间戳
			nonceStr: data.nonceStr, // 必填,生成签名的随机串
			signature: data.signature, // 必填,签名,见附录-JS-SDK使用权限签名算法
			jsApiList: ['selectExternalContact'], //必填,传入需要使用的接口名称
			success: function(res1) {
				// 回调
				console.log(res1, "agentConfig成功的回调")
				WWOpenData.bind(this.$el)
			},
			fail: function(res1) {
				console.log(JSON.stringify(res1), "agentConfig失败的回调")
				alert(window.location.href)
				alert(JSON.stringify(res1))
				// if (res.errMsg.indexOf('function not exist') > -1) {
				//   alert('版本过低请升级')
				// }
			}
		});
	});
},

结束语

就很无语uni打成h5的时候居然直接使用wx这个字段了,使用要先清除原来的再用window.jWeixin去覆盖window.wx,把他变回正常的状态

上一篇:WX-javascript学习-函数声明


下一篇:1.微信小程序区分 开发、体验(测试)、生产环境