草庐IT

小程序嵌入H5页面获取公众号openId的方法

二皮2333 2023-04-06 原文

第一步：在微信公众平台 登录小程序 将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).....
}

公众openIdxffxff0cxff0小程序前端

有关小程序嵌入H5页面获取公众号openId的方法的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  6. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  7. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  8. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  9. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  10. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

随机推荐