uni-app 封装企业微信config

第一步，在项目根目录加一个html文件，

index.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" />
		<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>

点击 manifest.json 配置路径

在util新增 wechat.js ,代码如下：（这个js的工作就是初始化企业微信 js-sdk）

const API = require("./api.js")
//由于企业微信jssdk不是模块化js文件,所以采用自定义index.html模板,并用<script>标签引入
// const jWeixin = require('../static/jweixin-1.2.0.js');

const initJssdk = function() {
	return new Promise((reslove, reject) => {
		API.getConfig({
			url: encodeURIComponent(window.location.href.split('#')[0])
		}).then(res => {
			if (res.success) {
				let info = JSON.parse(res.module.config);
				jWeixin.config({
					beta: info.beta, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
					debug: info.debug, // 开启调试模式
					appId: info.appId, // 必填，企业微信的corpID
					timestamp: info.timestamp, // 必填，生成签名的时间戳
					nonceStr: info.nonceStr, // 必填，生成签名的随机串
					signature: info.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
					jsApiList: ['shareToExternalContact'] || info.jsApiList // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
				});
				jWeixin.ready((res) => {
					console.log('config初始化成功');
					reslove(true)
				})
				jWeixin.error(function(res) {
					console.log('config初始化失败', res);
					reslove(false)
				});
			} else {
				reslove(false)
			}
		})
	})
}

module.exports = {
	initJssdk
}

使用方式


import wechat from "../../utils/wechat.js"
export default {
onLoad() {
	wechat.initJssdk().then(next => {
		if (next) console.log("initJssdk成功")
	})
},
methods: {
	jWeixin.onMenuShareAppMessage({
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
        imgUrl: '', // 分享图标
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
}
}

完成

a_靖博客专家

发布了411 篇原创文章 · 获赞 809 · 访问量 199万+

他的留言板关注

uni-app 封装企业微信config

猜你喜欢