企业微信(H5打开)调用微信小程序

这个功能比较坑,有很多坑的点,我先把我的开发过程说一下,最后把我遇到的问题总结.

准备工作

1.需要在微信小程序的管理后台中关联企业微信

2.在企业微信管理后台中设置应用主页

3.在企业微信管理后台中设置可信域名信息(可调用JS-SDK、跳转小程序的可信域名一定要配置，你上面的应用主页地址是什么你这里就可以填什么，如果还有其它的也可以填上去，我在这里爬了好久。)

4.企业微信管理后台中配置应用可信IP（也就是白名单;结尾）

上面这些都配置好了之后就可以开始开工了

1.在h5页面中引用这几个js文件

     <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script><script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="orgin"></script><script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="orgin"></script>

2.代码来啦

   new VConsole()//手机调试的控制台let tokenTicket = getAccessTokenAndTicket();let corpId = tokenTicket.corpid; //企业IDlet agentId = 1000039;  //应用ID, agentId, 必须是整型let appSecret = tokenTicket.corpsecret; // 应用secretlet token = tokenTicket.token; //有效期2小时let ticket = tokenTicket.ticket; //有效期2小时let timeStamp = new Date().getTime();let obj = {jsapi_ticket: ticket, //应用ticketgnoncestr: '10014',    //随机字符串, wx.agentConfig内的nonceStr值要与此值一致timestamp: timeStamp, //时间戳, wx.agentConfig内的timestamp值要与此值一致url: window.location.href, //当前网页的url}let signature = getSignature(obj); //签名权限wx.agentConfig({corpid: corpId, // 必填，企业微信的corpid，必须与当前登录的企业一致agentid: 1000039, // 必填，企业微信的应用idtimestamp: timeStamp, // 必填，生成签名的时间戳nonceStr: obj.noncestr, // 必填，生成签名的随机串signature: signature,// 必填，签名，见附录-JS-SDK使用权限签名算法jsApiList: ['launchMiniprogram'], //必填success: function(res) {console.log(res + "agentConfig成功回调");wx.invoke('launchMiniprogram', {"appid" : "需跳转的小程序appid", // 需跳转的小程序appid"path" : "pages/index/index", // 所需跳转的小程序内页面路径及参数。非必填}, function(res) {if(res.err_msg == "launchMiniprogram:ok") {// 正常wx.closeWindow();} else {// 错误处理}});},fail: function(res) {console.log("agentConfig失败回调")if(res.errMsg.indexOf('function not exist') > -1){alert('版本过低请升级')}}});
function getSignature(obj) {let sign = "jsapi_ticket=" + obj.jsapi_ticket + "&noncestr=" + obj.noncestr + "&timestamp=" + obj.timestamp + "&url=" + obj.url;return sha1(sign);
}
function getAccessTokenAndTicket() {let json = "";$.ajax({url: "你后台地址,给你返回ticket等信息的地址",type: "POST",data: {url: window.location.href},async: false,success: function(resp) {console.log(resp);json = JSON.parse(resp.result);},error: function(a, b, c) {return a;}})return json
}

问题总结:

这里这种就是你的签名阿ticket阿这些信息不对自己排查一下,只要你线上地址的控制台打印了agentConfig成功那么你就可以在手机上试了.应该就可以了

如果在安卓可以正常唤起,但是在ios手机端报这个
TypeError: undefined is not a function (near ‘…wx.agentConfig…’)
那么你在wx.agentConfig这个代码块之外加个setTimeout,设置成500ms就行了
如果还不行的话将js文件替换一下
https://res.wx.qq.com/open/js/jweixin-1.2.0.js换成https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js
以上都亲测有效

最后上效果:

企业微信打开小程序

有问题可以在下面留言交流.

企业微信(H5打开)调用微信小程序相关推荐

微信h5页面跳转小程序及微信开放标签加载过慢问题
近期因项目需求,需要在原本的h5页面跳转到小程序页.分享一下步骤及避坑点. 微信的官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_W ...
微信H5页面跳转小程序 - Vue中使用微信开放标签＜wx-open-launch-weapp＞
微信开放标签说明文档使用微信开放标签前置条件 1.绑定域名登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名" 2 ...
前端实现微信公众号h5页面跳转小程序-成功案例
微信公众号h5页面跳转小程序-成功案例微信公众号h5页面跳转小程序-成功案例,标题已经明确说明,h5页面可以正常跳转微信小程序官网说可以,不是我说的文章目录微信公众号h5页面跳转小程序-成功案 ...
微信公众号h5页面跳转小程序
微信公众号h5页面跳转小程序文章目录微信公众号h5页面跳转小程序前言一.注意二.使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置前言问:h5 页面可以跳转至微信小程序吗? ...
微信小程序嵌套h5页面怎么实现小程序支付
微信小程序嵌套h5页面怎么实现小程序支付小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付目前的流程,外链发送订单请求拿到预支付 ...
微信小程序开发打开另一个小程序的实现方法
微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json {..." ...
小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...
微信公众平台接口调试工具json格式不对怎么搞_腾讯云和微信推出更快速的小程序开发平台，微信读书小程序作示范...
腾讯云副总裁刘颖将腾讯云定义为微信的一个助手,腾讯云面向微信生态开发者输出的技术解决方案包括"小程序·云开发".小程序音视频直播.小游戏联机对战引擎等,腾讯云与企业微信的合作也会在 ...
微信公众平台接口调试工具json格式不对怎么搞_腾讯云和微信推出更快速的小程序开发平台，微信读书小程序作了示范...
腾讯云副总裁刘颖将腾讯云定义为微信的一个助手,腾讯云面向微信生态开发者输出的技术解决方案包括"小程序·云开发".小程序音视频直播.小游戏联机对战引擎等,腾讯云与企业微信的合作也会在 ...

企业微信(H5打开)调用微信小程序

准备工作

企业微信(H5打开)调用微信小程序相关推荐

最新文章

热门文章