起步

创建 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端口，这时候直接访问配置的域名就可以访问到自己的项目。

有人说网页授权域名配置的时候也可以配置端口号，这个我没有尝试，可以自己试一下。

代码


// 获取code
const getCode = () => {
    const APPID = 你的APPID'// 
    const REDIRECT_URI = encodeURIComponent(window.location.href)
    const SCOPE = 'snsapi_userinfo' //snsapi_base（静默登录） or snsapi_userinfo
    const STATE = ''
    const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=${SCOPE}&state=${STATE}#wechat_redirect`
    window.location.href = url
}

// 查看code是否存在
const verifyCode = () => {
    let url = window.location.href
    //如果有就直接截取code
    if (url.indexOf("?") !== -1) {
        let obj = urlToObj(url)
        return obj.code
    } else {
        getCode()
    }
}

// 解析url参数
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()

微信公众号原生H5开发记录

起步