h5写的代码小程序套用web-view 如何实现在h5跳到web-view微信授权登录

1.在h5中写个入口比如登录方式 微信如下：点击事件代码如下

fnWeixinOauth(){
    wx.miniProgram.navigateTo({
         url: '/pages/login/index',// h5跳转微信
         fail(error){
            console.log('navigate fail',error)
          },
    })
    wx.miniProgram.postMessage({ data: '传递传输值' })
}

2.在微信小程序中写个授权按钮页面如下图所示

3.点击授权前先在onLoad中调用wx.login() 获取code要传给后端代码如下

onLoad(){
    this.getCode() // 获取code
},
getCode(){
    let _this = this
    wx.login({
        success:function(res){						
            _this.code = res.code //拿到code 传参						
        },
        fail:function(error){
                console.log(error)
         }
    })
}

4.点击授权按钮的时候调用方法

<button  class="bt" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >点击授权</button>

// 授权
getPhoneNumber (e) {					
    console.log('e.detail',e.detail)				
        if(e.detail.encryptedData && e.detail.iv){	
            let params = {
            code:this.code,
            encryptedData:e.detail.encryptedData,
            iv:e.detail.iv
            }
      // 跳到index 页面 load 获取参数传给h5 h5中的中间页面（如middleOAuth.vue） 接受参数 
          wx.navigateTo({
              url: `/pages/index/index?data=${encodeURIComponent(JSON.stringify(params))}`,
            })
        }	
},					
							

5.这时候我们到web-view 页面 也就是小程序首页 在onLoad()方法中this.url 跳转h5把授权的参数带回去

    <web-view :src="url" ></web-view>

    onLoad(option){	
	console.log('option==',option)	
        // option.data是刚刚步骤四传回来的参数
	if(option && option.data){
	// 为了传给h5 login传数据做授权登录的（只有h5点击手机授权才会用到）	
            this.url = `${this.url}/middleOAuth?data=${option.data}` 			
	}
    },

6.在h5页面middleOAuth.vue中 通过mounted函数中判断 如果没授权登录 就授权登录 如果存在用户授权了 就跳到首页代码如下

 mounted(){ 
        // 存在就不用授权 
        if (判断用户存不存在) {
            this.$router.push({
                   path: "首页地址"
            });
        }else{
            this.getoAuth() // 获取小程序数据 传参授权
        } 
},

methods:{
    getoAuth(){
        let url = window.location.href                    
        let dataUrl = url.split('data=')[1]           
        let data = JSON.parse(decodeURIComponent(dataUrl))            
        let params = data                       
        let res = 接口名称(params);             
        if(res && res.code === 10000){
            Toast('授权成功')
            // 授权成功记得要同登录成功存的参数一样 重点
            this.$router.push({
                path: "跳到登录成功显示头像页面"
            });
        }else{
            Toast(res.data.msg)
        }   
    }     
}

7.结束