小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
作者:鹏仔先生日期:2022-07-15 11:36:09浏览:2908分类:JavaScript
大家好,我是小编鹏仔,近期给学校用uniapp开发了一款校园小程序,小程序有一些活动、咨询、公告、请假等通知,需要通过微信推送提示,用小程序自己的订阅方法有一些限制,于是需求这边想用绑定的学校公众号推送,因为小程序获取用户的openId和公众号的openId不一致,所以必须要调用公众号授权,因为项目已经基本做完,突然加这个我感觉挺麻烦的,一开始想偷懒我是拒绝修改的...emo...,后来还是妥协了,还是突破下,研发吧!!!
上次博客域名出售了以后,好久都没更新文章了,更换了域名,很多小伙伴也不知道新网址了(新www.sharedbk.com),就整理分享一下吧!
(因为开发工具端原因,上图凑合的预览下吧!就是访问小程序会先判断是否有通过公众号授权的openId,没有就跳转到H5页面进行授权,有就存储下即可。)
首先,我们新建一个html文件,引入微信相关js文件
<!-- 一定要注意,H5需要引入微信相关js --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
接着,我们写入自定义的js一些方法,里面注释我加的比较清晰,如何跳转小程序,如何效验判断逻辑等,简单明了
<script> const gzhId = '123456789'; // 公众号appid const url = 'http://sharedbk.com/getOpenId.html'; // 授权回调链接 init(); // 初始化 // 初始化效验 function init(){ if (!getUrlKey("code") && !sessionStorage.openId) { // 如果没有code和openId,就让跳转微信授权 window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + gzhId + "&redirect_uri=" + url +"&response_type=code&scope=snsapi_userinfo"; } else if (!sessionStorage.openId) { // 反之有code,没有openId就调用后台接口获取openId getOpenId(); } else if (sessionStorage.openId) { // 如果有存在openId,那么直接跳转小程序 jumpBtn(sessionStorage.openId); } } // 请求后台接口,获取openId function getOpenId(){ var myHeaders = new Headers(); myHeaders.append("Content-Type", "application/json"); var raw = JSON.stringify({"code": getUrlKey("code")}); var requestOptions = { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' }; fetch("http://sharedbk.com/getOpen", requestOptions) .then(response => response.text()) .then(result => { let res = JSON.parse(result); if(res.code == '200'){ console.log('授权成功'); sessionStorage.setItem("openId", res.data.openId); // 存储openId jumpBtn(res.data.openId); // 跳转微信小程序 } else { console.log('授权失败'); window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + gzhId + "&redirect_uri=" + url +"&response_type=code&scope=snsapi_userinfo"; } }) .catch(error => console.log('error', error)); } // 跳转至小程序 function jumpBtn(val){ alert(val) // val为传的openId,小程序路径自行配置 wx.miniProgram.navigateTo({ url:`/views/login?gzhOpenId=` + val, success: (res) => { console.log(res); // 页面跳转成功的回调函数 }, fail: (err) => { console.log(err); // 页面跳转失败的回调函数 } }) } // 获取参数(https://sharedbk.com/post/188.html) function getUrlKey (name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null } </script>
将html文件保存,上传至服务器,这样你就可以获取到页面链接,记得在上面js中修改你自己的链接,然后需要在小程序后台中(开发管理=>开发设置=>业务域名),将服务器绑定的域名配置到业务域名中,这样就可以调用web-view组件。
完成上方工作,我们再继续在小程序中进行下方工作(我是uniapp,做了一个微信端判断,setStorageData和getStorageSyncData是我封装了一个本地存取方法,这个你可以直接用微信小程序的存储方法),也就是访问小程序时,先判断下访问是否带参数,如果带了就直接存储下来,没有携带参数就利用web-view跳转到网页进行授权(自己小程序写个web-view页面实现就行)。
onLoad: function(val) { // #ifdef MP if(val.gzhOpenId){ // 获取传递的参数 setStorageData('gzhOpenId', val.gzhOpenId); // 存储公众号的openId } // 判断是否存在公众号的openId,不存在就利用web-view访问授权链接获取 if(!getStorageSyncData('gzhOpenId')){ uni.navigateTo({ url: '/views/webViewPage/index?url=http://sharedbk.com/getOpenId.html' }); } // #endif }
猜你还喜欢
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 06-25 uniapp页面跳转的几种方式
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
已有1位网友发表了看法:
鹏仔先生 评论于 [2022-07-15 14:21:28] 回复
欢迎大家添加鹏仔的微信,备注前端或后端,加入微信技术交流群来摸鱼