html5+jquery获取微信openid
最近在修改一个移动商城，由于wap端是HTML5的，还大量使用了art模板技术，一开始修改很不适应，而且实现HTML5取openid一直没能实现很好的实现，经过对获取原理的理解和学习，终于还是实现了HTML获取微信openid,而且改动不大，闲话少说，直接上干货：
一、写个js,用于取accesscode,并直接通过openid读取用户表中的注册信息
$(function () {
var wxopenid=getcookie('wxopenid');
var key=getcookie('key');
if (key==''){
var access_code=GetQueryString('code');
if (wxopenid==&&){
if (access_code==null)
var fromurl=location.
var url='https://open./connect/oauth2/authorize?appid=填你自已的appid哟&redirect_uri='+encodeURIComponent(fromurl)+'&response_type=code&scope=snsapi_base&state=STATE%23wechat_redirect&connect_redirect=1#wechat_redirect';
location.href=
type:'get',
url:ApiUrl+'/index.php?act=payment&op=getopenid',
async:false,
cache:false,
data:{code:access_code},
dataType:'json',
success:function(result){
if (result!=null && result.hasOwnProperty('openid') && result.openid!=&&){
addcookie('wxopenid',result.openid,360000);
getlogininfo(result.openid);
alert('微信身份识别失败 \n '+result);
location.href=
if (key=='' && wxopenid!='')
getlogininfo(wxopenid);
function getlogininfo(wxopenid){
type:'get',
url: ApiUrl + '/index.php?act=login&op=autologininfo',
data: { wxopenid:wxopenid},
dataType:'json',
async:false,
cache:false,
success: function (result) {
if (result.return_code=='OK'){
addcookie('key',result.memberinfo.key);
addcookie('username',result.memberinfo.username);
alert(result.return_msg);
location.href=WapSiteUrl+'/tmpl/member/login.html';
第二步：在html页的head中加载js文件
&script type=&text/javascript& src=&js/config.js&&&/script& &script type=&text/javascript& src=&js/zepto.min.js&&&/script& &script type=&text/javascript& src=&js/template.js&&&/script& &script type=&text/javascript& src=&js/common.js&&&/script& &script type=&text/javascript& src=&js/getwxopenid_index.js&&&/script&第三步：实现openid的后台方法,这个方法不详列了，官方有示例
* 获取openid
* @return type
public function getopenidOp(){
$jsApi=new JsApi_pub();
$code = $_GET['code'];
$jsApi-&setCode($code);
echo $jsApi-&getOpenId();
function getOpenid()
& & & & & & $url = $this-&createOauthUrlForOpenid();
& & & & & & return $this-&httpGet($url);
作用：生成可以获得openid的url
function createOauthUrlForOpenid()
$urlObj[&appid&] = WxPayConf_pub::APPID;
$urlObj[&secret&] = WxPayConf_pub::APPSECRET;
$urlObj[&code&] = $this-&
$urlObj[&grant_type&] = &authorization_code&;
$bizString = $this-&formatBizQueryParaMap($urlObj, false);
& & & & & & & & //api.=101.226.90.58
return &https://api./sns/oauth2/access_token?&.$bizS
另外，js文件中的变量，尽量不要用全局的，当多个js加载时，变量可能冲突，造成一些不可预则的问题；
这样就实现了在html5页面直接取accesscode,再通过ajax方法在后台取openid；
如果要看效果，可以微信扫码进入商城（本来只想放个二维码，又怕有人以为是什么下载链接）【图文】微信开发-获取关注者列表,用户的openid_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
您可以上传图片描述问题
联系电话：
请填写真实有效的信息，以便工作人员联系您，我们为您严格保密。
微信开发-获取关注者列表,用户的openid
人力资源管理师|
总评分2.2|
浏览量7874
用知识赚钱
&&微信开发-获取关注者列表,用户的openid
大小：11页
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢查看: 4341|回复: 1
微信如何获取用户的openid
TA的每日心情擦汗 08:56签到天数: 51 天[LV.5]常住居民I
一般情况下，获取用户的openid可以通过下面两种情况
1.用户在你开发的公众号发消息，微信服务器将POST消息的XML数据包到开发者填写的URL上，这时你可以通过程序获取到改用户的openid。
<font color="#.通过微信网页授权获取，授权有snsapi_base为scope两种方式，一种需要用户点击确认，一种是静默授权，用户无感知即可获取。
第一种方式获取属于微信被动发送给开发中填写的url的，需要用户关注公众号。第二种获取属于网页发起请求去获取的，两种获取方式获取的openid的值是一样的，用户无需关注开发的公众号。openid在不同的公众号和不同的应用之间是不同的，但是 UnionID是一致的。
关于UnionID机制1、请注意，网页授权获取用户基本信息也遵循UnionID机制。即如果开发者有在多个公众号，或在公众号、移动应用之间统一用户帐号的需求，需要前往微信开放平台（open.）绑定公众号后，才可利用UnionID机制来满足上述需求。2、UnionID机制的作用说明：如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为同一用户，对同一个微信开放平台下的不同应用（移动应用、网站应用和公众帐号），unionid是相同的。
在网页中生成微信二维码用户扫描登录，此时获取的openid和第一种获取的openid就不是一样的，但是UnionID是一样的，这是因为，网页二维码扫描登录是网站应用，第一种获取openid是公众号，两者属于不同应用，所以是不一样的。
QQ截图25.png (8.93 KB, 下载次数: 9)
17:36 上传
TA的每日心情开心6&小时前签到天数: 371 天[LV.9]以坛为家II
强烈支持楼主ing……微信小程序 获取用户信息(包括openId等敏感信息) - YanzYan的博客 - CSDN博客
微信小程序 获取用户信息(包括openId等敏感信息)
微信小程序
想来跟微信小程序也是有缘。
现在在公司主要负责起了小程序这块。
获取用户的基本信息
wx.getUserInfo(OBJECT)获取用户信息
wx.getUserInfo({
success: function(res) {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
2.获取系统信息
wx.getSystemInfo(OBJECT)获取系统信息
wx.getSystemInfo({
success: function(res) {
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
console.log(res.platform)
console.log(res.system) //
操作系统版本
3.获取openId (用户唯一标识)和session_key
wx.login(OBJECT) 调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。
获取到code之后请求接口
wx.login({
success: function (res) {
var code = res.
console.log(code);
var appId = '...';
var secret = '...';
wx.request({
url: 'https://api./sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
'content-type': 'json'
success: function (res) {
var openid = res.data.openid
console.log('openid为' + openid);
此时如果你未勾选项目中的“开发环境不效验请求域名、TLS版本以及HTTPS证书”则会报错
会说接口不是一个合法域名。此时勾选项目中的“开发环境不效验请求域名、TLS版本以及HTTPS证书”则可避免。但是…你项目要上线肯定有bug啊。然后你就想着去把这个链接加到你的服务器域名里面去，但是发现竟然不允许这样操作…
此链接中有原因
如果在配置服务器域名中填写了“api.”会出现上述错误提示。出于安全考虑，为避免开发者将AppSecret放置在小程序的前端代码内，平台禁止设置此域名。
小程序的开发者密码（AppSecret）是一个非常重要的字段，使用该密码可以调用小程序的所有后台接口。请不要将该字段放置在微信小程序的前端代码中，因为微信手机客户端容易被反编译并轻松获得Appsecret，造成重大的安全威胁。开发者应将Appsecret保存到后台服务器中，通过服务器使用Appsecert获取Accesstoken。微信公众平台小程序后台的服务器地址设置也将禁止将“api.”域名的配置，所有对于“api.”域名下的接口请求请全部通过后台服务器发起，请勿直接通过小程序的前端代码发起。
所以解决办法就是把code传给后台，让后台去请求微信的官方接口获得openId和session-key。
其实微信小程序官方的登录时序图也是这样画的
将code传至后台服务器，让服务器去访问微信服务器得到openId和session_key。
OK，结束。
我的热门文章