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

1. 创建 html、js、css文件

2. 安装http-server:npm i http-server(项目用纯HTML原生写的话需要在本地开启服务，这样才可以在微信开发者工具中打开，才能够使用微信提供的授权登录等功能)

3. 用http-server开启服务：http-server -p 8080 -c-1定义端口号和清除缓存

4. 本地调试：微信开发者工具-公众号网页项目-地址上输入本地项目链接（服务启动成功后会提示链接）

关于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()