以h5网页的方式发布企业微信应用
提示：发布企业微信的方式有h5网页和小程序两种方式，这里为什么采取h5的方式呢，按理来说，调试和工具查看，小程序调试起来相对会更加方便点，之前 有好多个微信小程序上线经验，经验来说，审核起来还是比较麻烦的，还是h5网页更方便点，但是呢，页面交互，小程序更好点，h5网页加载给我的感觉比较慢，企业微信加载等待期还是比较慢的，各有利弊吧，我这里是避免审核麻烦，以h5网页发布。
前言
公司项目是以uni-app写的产品，目前适配了APP，微信小程序、钉钉小程序，h5网站，这两天公司突然说要适配企业微信，这里将过程中走过的坑位记录一下，也希望给后来者一点提示，绕过我走的坑位，
一、准备工作
示例：因为我的应用是一个5端的应用，所以每个端都有相应的条件编译，所有在发布到一端之前，一定要确保在该端没有问题，UI和api等都得测试，确实不同端有你意想不到的惊喜，好了，废话不多说，咱们开始。
二、使用步骤
1.确保你的应用在h5模式下无报错，UI等除企业微信特定sdk外的业务代码无问题
2.注册企业微信开发者账号（一般都是公司申请https://work.weixin.qq.com/）应用管理->创建应用
3. 集成企业微信相关sdk.js ,按照dcloud的文档说明
在项目的根目录下新建一个html文件
我这里是index.html
下面 html内容可以完全复制。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
<!-- 企业微信h5授权 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!-- 用于调试所用 -->
<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
因为企业微信的相关的js不是模块化的，而uni-app框架vue页面屏蔽了一些dom操作，那么我是以静态链接方式引入js，那我们处理的话是以模块化处理，添加一个js工具文件去做一下授权处理，然后以备后面页面中授权时用到
//由于企业微信jssdk不是模块化js文件,所以采用自定义index.html模板,并用<script>标签引入
// // #ifdef H5
// var vConsole = new VConsole();
// console.log('VConsole is cool');
// // #endif
const initJssdk = function() {
return new Promise((reslove, reject) => {
uni.request({
url: '请求你们公司的服务端接口',//因为腾讯企业微信说，授权相关配置存放在服务端
method: 'POST',
data: {
url: window.location.href.split('#')[0]
},
success: (res) => {
console.log(JSON.stringify(res));
if (res.statusCode == 200) {
let info = res.data;
if (uni.getSystemInfoSync().platform == "ios") {
setTimeout(() => {
initJs(info,reslove)
}, 500);
} else {
initJs(info,reslove)
}
} else {
reslove(false)
}
},
fail: (f) => {
uni.showToast({
title: JSON.stringify(f),
icon: 'none'
})
}
})
})
function initJs(info,reslove) {
//这里有一个坑点，需注意，我倒腾了好一会儿才发现，当你去查看企业微信sdk.j时，也就是上面的
//[jweixin-1.2.0.js](https://res.wx.qq.com/open/js/jweixin-1.2.0.js),中暴露两个操作口wx和jWeixin
//但是呢，我刚开始注册的时候是wx.config，说是config这个方法undefined，那好嘛，不存在，我换还不成 么。换成jWeixin.config,然后好了（我这时候是android设备调试，没有问题了），然后准备上线的时候，发现ios企业微信不好使，，然后调试完，发现（jWeixin.config报undefined，我就大胆的尝试了一下，我改回去wx.config,,然后ios企业微信端好了，其他端undefined了，那怎么办，那就判断一下么，这个不好用那个，哪个好用哪个
let soianWX;
if(wx.config==undefined){
soianWX=jWeixin;
}else{
soianWX=wx;
}
soianWX.config({
beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式
appId: info.appId, // 必填，企业微信的corpID
timestamp: info.timestamp, // 必填，生成签名的时间戳
nonceStr: info.nonceStr, // 必填，生成签名的随机串
signature: info.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: ['chooseImage', 'scanQRCode', 'previewImage', 'getLocation','previewFile'] || info
.jsApiList // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});
soianWX.ready((res) => {
console.log('config初始化成功' + res);
reslove(true)
})
soianWX.error(function(res) {
console.log('config初始化失败', res);
reslove(false)
});
}
}
module.exports = {
initJssdk
}
这个js工具封装好之后，在你需要的时候，调用授权配置即可。
前端代码方面基本完成，然后就是在企业微信应用管理配置启动页，网页授权及JS-SDK，
配置应用主页
网页授权及JS-SDK
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
