uniapp 开发微信公众号--网页授权,小白入门
uniapp开发微信公众号也就是H5,但是微信公众号在做用户管理(需要登录,获取用户信息等需要微信号的openId),作为一个入门小白,真是困难重重。翻看微信公众号官方文档,知道微信公众号对网页授权有两种方式:一种是静默授权,用户无感知,但无法获取用户的基础信息,如果要想拉取到用户信息,则需要使用另一种授权方式,由于这种方式涉及到隐私,所以需要用户同意才行。**:::::::????*我只需要获取
·
uniapp开发微信公众号也就是H5,但是微信公众号在做用户管理(登录,获取用户信息等需要微信号的openId),作为一个入门小白,真是困难重重。翻看微信公众号官方文档,知道微信公众号对网页授权有两种方式:一种是静默授权,用户无感知,但无法获取用户的基础信息,如果要想拉取到用户信息,则需要使用另一种授权方式,由于这种方式涉及到隐私,所以需要用户同意才行。
**:::::::😗*我只需要获取openId,只要静默授权就行。微信跳转至H5项目时,url上会自动生成code,我们获取到code,发给后台以获取openId。如果用微信开发者工具测试就需要在微信公众号后台设置你为开发者。需要你的请求地址已经经过微信公众号的认证(服务号已经申请成功),但是一般开发都是用测试号开发(但是测试号无法设置,反正我没有找到怎么设置)。这时只有将项目打包好放在测试环境用真机测试了,就是比较麻烦,需要你多console一些信息方便测试修改。
获取code代码如下
function getUrlParam (name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
let url = window.location.href.split('#')[0]
let search = url.split('?')[1]
if (search) {
var r = search.substr(0).match(reg)
if (r !== null) return unescape(r[2])
return null
} else {
return null
}
}
function wxAuthorize() {
let link = window.location.href;
let params =getUrlParam('code'); // 地址解析
console.log("code:",params);
// 如果拿到code,调用授权接口,没有拿到就跳转微信授权链接获取
if (params) {
console.log("获取到code");
// api.wxAuth(params); // 调用后台接口,授权
}else {
console.log("没有code");
let appid = 'xxxxxxxxxx'; //修改为你的appid
//1.使用encodeURIComponent以及JSON.stringify()方法对对象进行字符串化和编码,这样可以控制url参数的长度,参考示例代码(uni-app书写方式,微信小程序自己改。)
let uri = encodeURIComponent(link);
//2.接受信息的页面使用JSON.parse()以及decodeURIComponent()接收和解码参数。
//snsapi_base //snsapi_base scope = snsapi_base(不弹出授权页面,直接跳转,只能获取用户 openid )。
//snsapi_userinfo 弹出
let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
window.location.href = authURL;
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)