小程序调用h5（小程序嵌入H5页面获取公众号openId的方法）

第一步：在微信公众平台 登录小程序 将h5网址的域名加入业务域名

设置原因：配置为业务域名后    
    
    
，可调用web-view组件在小程序中打开

设置路径：登录微信公众平台->左边菜单栏找到开发管理->开发设置->找到业务域名

设置方法：

1. 点击修改按钮

2. 使用开发者权限微信扫码验证

 3. 下载校验文件 放到h5域名对应的服务器根目录下（下载文件后让后端操作） 然后点击+号将h5的域名配置成业务域名

第二步：在小程序新建一个空白页面使用webView组件将路径传入

let url = https://xxxx.com?id= + 你需要带的参数 this.src =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号appid&redirect_uri=${encodeURIComponent(url)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`

路径解析：

1. https://open.weixin.qq.com/connect/oauth2/authorize

这是微信固定的路径

2. appid：微信公众号的appid 

3. redirect_uri：重定向路径 


     


     


     ，将h5的路径放在redirect_uri的等号后面 若h5页面使用的是哈希路径 需要使用encodeURIComponent进行编码

 




 




 



，因为微信会默认将#后的所有字段进行截取删除 会导致访问时报错

        注意：

                a. 需要在微信公众号将域名配置为业务域名

                b. 若需要带参跳转 可以直接在h5路径后使用?拼接

4. response_type：响应类型   

   

   

，用户同意授权  

     

     

    ，获取code


  




  




  


，直接填写code即可

5. scope： 应用授权作用域  


  


  


，snsapi_base （不弹出授权页面   
     
     
   ，直接跳转



   




   




   

，只能获取用户公众号openid） 



 



 



，snsapi_userinfo （弹出授权页面                ，可通过 openid 拿到昵称
    
    
    
、性别     


     


     


、所在地
    
    
    
。并且




    




    




    
， 即使在未关注的情况下














，只要用户授权                ，也能获取其信息 ）

6. state：重定向后会带上 state 参数



     



     



     ，开发者可以填写a-zA-Z0-9的参数值















，最多128字节

7. #wechat_redirect： 无论直接打开还是做页面302重定向时候    
    
    
，必须带此参数

8. 附上微信官方文档：网页授权 | 微信开放文档

第三步：如何在h5页面拿到传递的参数

1. 定义一个函数 通过地址栏获取需要的参数

getParameterByName (name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); //匹配所有符合条件的 


     


     


     ，并取最后一个 var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", g); var results = url.match(regex); var tempResults = results != null && results[results.length - 1] != undefined ? results[results.length - 1] : ; var finalResults = regex.exec(tempResults); if (!finalResults) return ""; if (!finalResults[2]) return ; return decodeURIComponent(finalResults[2].replace(/\+/g, " ")); } // name: 你需要从地址栏中获取到的数据字段

 




 




 



，例如：id 




 




 




 、code等等 必填 // url: 需要从什么链接中获取字段 非必填

2. 使用上面的函数获取需要的数据 进行需要的操作

//获取openId getOpenIds () { let code = this.getParameterByName(code) // 这个code就是用户的公众号openid let id = this.getParameterByName(id) // 这个id就是从小程序跳转时带的参数 // 进行需要的操作 this.bindOpenId(code, id)..... }