-
创建 html、js、css文件
-
安装http-server:
npm i http-server
(项目用纯HTML原生写的话需要在本地开启服务,这样才可以在微信开发者工具中打开,才能够使用微信提供的授权登录等功能) -
用http-server开启服务:
http-server -p 8080 -c-1
定义端口号和清除缓存 -
本地调试:微信开发者工具-公众号网页项目-地址上输入本地项目链接(服务启动成功后会提示链接)
关于h5微信授权登录可以查看官网。
问题1:未绑定开发者
解决:将开发者的微信号绑定
联系公众号管理员,让他把开发者的微信添加为开发者。注意:需要开发者关注“公众号安全助手”,并且不能设置消息免打扰
问题2:scope参数错误
解决:没有开通网页授权权限
注意:若帐号主体为个人,无法开通
问题3:redirect_uri 参数错误
解决第一步:配置网页授权域名
解决第二步:配置本地host
我用的是switchhost软件对host进行的更改,需要将上图中配置的域名转到你本地的IP上。
解决第三步:将项目运行在80端口
运行sudo http-server -p 80 -c-1
,输入开机密码后,项目就会运行在80端口,这时候直接访问配置的域名就可以访问到自己的项目。
有人说网页授权域名配置的时候也可以配置端口号,这个我没有尝试,可以自己试一下。
代码
const getCode = () => {
const APPID = 你的APPID'
const REDIRECT_URI = encodeURIComponent(window.location.href)
const SCOPE = 'snsapi_userinfo'
const STATE = ''
const url = `https:
window.location.href = url
}
const verifyCode = () => {
let url = window.location.href
if (url.indexOf("?") !== -1) {
let obj = urlToObj(url)
return obj.code
} else {
getCode()
}
}
const urlToObj = (str) => {
let obj = {};
let arr1 = str.split("?");
let arr2 = arr1[1].split("&");
for (let i = 0; i < arr2.length; i++) {
let res = arr2[i].split("=");
obj[res[0]] = res[1];
}
return obj;
}
function login() {
let code = verifyCode()
if (code) {
service.login({ code })
}
}
login()