uniapp实现微信公众号登录 (微信小程序openid获取教程)

公司有个公众号想自己开发，用来做宣传。其中需要客户登录，绑定信息，然后可以和公司互动。我用uniapp开发后转H5.

之前有做过uniapp开发微信小程序，那个很好做，因为可以直接在uniapp中写微信小程序的代码，而且很多微信小程序的代码把前缀wx改为uni就行。微信小程序提供了很多很方便的组件，可以直接从微信的服务器获取信息，而不用像h5一样需要前端请求后台，后台组合数据请求微信服务器这样费事。

h5获取用户openid需要用到微信网页开发的网页授权：

1 第一步：用户同意授权，获取code

2 第二步：通过code换取网页授权access_token

3 第三步：刷新access_token（如果需要）

4 第四步：拉取用户信息(需scope为 snsapi_userinfo

其中第一步到第二步做起来有些麻烦，如果用h5开发，一般是写一个php接口，前端直接跳转到这个接口上：

public function ceshi(){
$appid= "XXXXX";$appsecret = 'XXXXX';
$h = $this->request->param();
if (isset($h['code']) && $h['code']) {
$token_url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$appid.'&secret='.$appsecret.'&code='.$h['code'].'&grant_type=authorization_code';
$token = json_decode(file_get_contents($token_url));
if (isset($token->errcode)) {
echo '<h1>错误：</h1>'.$token->errcode;echo '<br/><h2>错误信息：</h2>'.$token->errmsg;exit;
}else{
//跳转回到原来的页面；或者继续请求用户信息再跳转回到原来页面；
}
}else{
$redirect_uri = urlEncode('http://XXXX.com/XXX/ceshi');
//snsapi_base
$url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=$appid&redirect_uri=$redirect_uri&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
Header("Location: $url");
}
}

而用uniapp开发后，我跳转的ceshi接口就成为外部链接uniapp只提供内部跳转的接口，web-view可以在组件中加载外部网页，但是不符合需求；

<web-view  src="https://uniapp.dcloud.io/static/web-view.html"></web-view>

后来直接使用点击事件触发函数：

function jump(){
window.location.href = ‘https://xxx.com?XXX=XXX‘ ;
}

就能直接跳转到外部网页了。

一直用uniapp开发微信小程序，就把uniapp局限于了微信小程序中了，其实开发h5使用的大多js的方法也都能用。