解决步骤
以下是使用 web-view 并配配合微信公众号提供的 网页授权 来实现
1、在小程序中做一个web-view页面,页面中只需要写微信 网页授权的链接就行了,注意appid请自行替换(公众号的)。
onLoad() {
this.setData({
src: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=`自己公众号openid`&redirect_uri=自己跳转的H5页面&response_type=code&scope=snsapi_base&state=123#wechat_redirect',
})
},
2、redirect_uri是我们第一步中的网页地址。**注意:**需要在公众号管理平台中配置授权域名
redirect_uri:必须是https开头,并且需要如下配置
3、redirect_uri的页面(H5页面)需要截取location.search
获取code
;返回微信小程序,需要安装weixin-js-sdk
4、拿到H5返回小程序的code值,调用后台接口就可以获取公众号的openId
具体代码
1、微信小程序的web-view页面
<web-view src="{{src}}" />
Page({
data: {
src: '',
},
onLoad() {
this.setData({
src: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己的公众号openid&redirect_uri=需要跳转的H5页面&response_type=code&scope=snsapi_base&state=123#wechat_redirect',
})
}
});
2、Vue H5页面
<template>
<div class="wx-h5"></div>
</template>
<script>
import wx from "weixin-js-sdk";
import { showFullScreenLoading } from "@/utils/loading";
export default {
name: "WXh5",
mounted() {
// 页面loading
showFullScreenLoading("页面跳转中...", "", "wx-text-color");
// 跳转到tarBar页面
// wx.miniProgram.switchTab({ url: "****" });
if (this.getUrlCode().code) {
wx.miniProgram.redirectTo({url: `/subpackages/extension/index?code=${this.getUrlCode().code}`})
}
},
methods: {
getUrlCode() {
// 截取url中的code方法
var url = location.search
// eslint-disable-next-line no-new-object
var theRequest = new Object()
if (url.indexOf('?') != -1) {
var str = url.substr(1)
var strs = str.split('&')
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1]
}
}
return theRequest
}
}
};
</script>
<style lang="scss">
.wx-text-color {
width: 90px;
height: 105px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
.circular {
.path {
stroke: #fff;
}
}
.el-loading-text {
color: #fff;
font-size: 12px;
}
}
</style>
3、如上在微信小程序的/subpackages/extension/index
页面的onLoad
接收参数code
,便可根据code获取公众号的openId
4、注意点:
微信小程序的web-view页面只能独立出来使用,不能在
/subpackages/extension/index
页面使用,不然返回到/subpackages/extension/index
页面后,该页面的事件都会失效。
相关文章
基于ElementUi再次封装基础组件文档
基于ant-design-vue再次封装基础组件文档
vue3+ts基于Element-plus再次封装基础组件文档