应项目需求，最近我开始了我的第一次微信公众号网页的开发，第一次接触到公众号网页的我是很懵逼的。通过了解并实现了需求的我下面来进行讲解一下，希望可以帮助到有需要的朋友。ps：我这里是使用vue来开发的哈，使用其他框架或者js也是可以的哟。
第一步：新建并打开项目
我们要先建立我们的项目，npm run dev运行项目,打开微信开发者工具 - > 打开公众号网页 - > 将编译好的地址复制到微信开发者工具回车即可，如下图所示
不过在此之前，你需要先有个公众号，并且将你设置为开发者，不然会提示报错的。
第二步：初始化项目
获取权限，这里就需要用到你公众号里面的AppId了。如下图代码
这里我是进行了封装的，这个方法的作用是拿到 code，因为调用登录接口的时候需要将code传递给后台。
getWxCallbackUrl() { // const AppId = window.global_url.AppId; const AppId = "wx1222121212122"; let local = window.location.protocol + "//" + window.location.host + '/'; console.log('local------------>', local); let link = getURLParameter("p") console.log("link--------------->", link); let wxurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + AppId + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_userinfo&state=" + encodeURIComponent(link) + "#wechat_redirect"; console.log(wxurl, "wxurl"); return wxurl; },
调用方式：
最终效果如下：
到这里表示你已经成功拿到了code并且调用了登录接口了，后面的逻辑就可以开始根据项目需求进行开发了。