微信公众号H5 - 使用vue开发微信公众号网页

小鱼儿 2021-09-07 06:12 944阅读 0赞

应项目需求，最近我开始了我的第一次微信公众号网页的开发，第一次接触到公众号网页的我是很懵逼的。通过了解并实现了需求的我下面来进行讲解一下，希望可以帮助到有需要的朋友。ps：我这里是使用vue来开发的哈，使用其他框架或者js也是可以的哟。

## 第一步：新建并打开项目 ##

我们要先建立我们的项目，npm run dev运行项目,**打开微信开发者工具 - > 打开公众号网页 - > 将编译好的地址复制到微信开发者工具回车即可**，如下图所示  
![在这里插入图片描述][20210220114241695.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]

不过在此之前，你需要先有个公众号，并且将你设置为开发者，不然会提示报错的。

## 第二步：初始化项目 ##

获取权限，这里就需要用到你公众号里面的AppId了。如下图代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 2]  
这里我是进行了封装的，这个方法的作用是拿到 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;
        },

调用方式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 3]

最终效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 4]

### 到这里表示你已经成功拿到了code并且调用了登录接口了，后面的逻辑就可以开始根据项目需求进行开发了。 ###

[20210220114241695.png]: /images/20210813/d4f062aa21be4621b1f9516009152f8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210813/3d9a7fd2f5504319a2bd1476a45f0083.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]: /images/20210813/d947ac03d31248abb9abe053f4093928.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 2]: /images/20210813/1c55e8135019406297f888e8a48be004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 3]: /images/20210813/2aab009a651b49058f64d96fbdeea64a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 4]: /images/20210813/d889be9598a2481fbfa935c9a5ea420f.png