记录小程序中获取公众号的信息授权实现过程

1.小程序页面触发webview跳转h5授权

<template>
	<view v-if="showContent">
		<web-view :src="hrefName" ></web-view>
	</view>
</template> 
<script>
	export default{
		data(){
			return{
				showContent:false,
				hrefName:''
			}
		},
		onShow(){
			//判断小程序登录授权
			if(!uni.getStorageSync('login')){ 
				uni.navigateTo({
					url: '/pages/mine/login'
				})
			}else{
                //小程序中访问h5页面url需要配置业务域名
                //开发管理>开发设置>业务域名
				this.hrefName="https://xxx.xxxxxx.com/?login="+uni.getStorageSync('login');
				this.showContent=true;
			}
		} 
	}
</script>

2.h5页面接收当前路径所传的值并获取code

<script>
	export default{ 
		data(){
			return{
				showReminder:false,
				login:'',
				code:''
			}
		},
		mounted(){   
			/**
			 * 因为实现非静默授权需要重定向再次返回此页面，所以第一次访问此页面携带login参数
			 * 第二次会携带其他参数，所以在这个位置坐下判断防止被第二次路由数据污染
			 * */
			if(obj.login){
				this.login=this.getUrlCode().login; 
			}
			this.getCode();
		},
		methods:{  
            //页面授权之后点击按钮返回小程序页面
			tapSVal(val){
				//使用引入的js的sdk实现wx跳转小程序页面
				wx.miniProgram.getEnv((res)=>{
					wx.miniProgram.redirectTo({
					    url: '../../pages/mine/mine'
					}); 
				}) 
			}, 
			getCode () { // 非静默授权，第一次有提示
				this.code = '';  
				var local = 'url地址' //公众号重定向此url地址需要在公众号设置>功能设置>网页授权域名
				console.log(encodeURIComponent(local)); //重定向的页面路径需要encodeURIComponent进行处理
				var appid = '' //公众号的APPID
				this.code = this.getUrlCode().code // 截取code  
				if (this.code == null || this.code === ''){ // 如果没有code，则去请求
					//第一次访问此页面所传的login，可以放到state参数中，第二次重定向进来直接获取state的值就是login
					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=${this.login}#wechat_redirect`
				} else {
					// 你自己的业务逻辑
					this.login=this.getUrlCode().state;
					this.getToken(); //code不为空，传给后台
				}
			},
			getUrlCode() { // 截取url中的参数
				let arr=window.location.search.substr(1).split("&");
    			let obj={};
			    arr.map(item=>{
				    let [key,value]=item.split("=")
				    obj[key]=value;
			    })
				return obj
			},
			getToken(){ 
				//获取微信code和login
				let data = {code:this.code,login:this.login}
				this.showReminder=true;
			}
		}
	} 
</script>

上面提到的sdk需要在App.vue获取看另一个博文实现小程序webview中的h5页面，跳转小程序的某一个页面_路光.的博客-CSDN博客