用vue做微信公众号开发踩坑合集

最新推荐文章于 2024-05-16 13:40:26 发布

一尾小锦鲤丶

最新推荐文章于 2024-05-16 13:40:26 发布

阅读量2.7k

点赞数 4

分类专栏： vue 微信公众号开发文章标签： H5 微信公众号 vue

本文链接：https://blog.csdn.net/weixin_43369521/article/details/86649324

版权

准备工作

作为个人开发者，可以申请微信订阅号，但是很多借口权限并不能获得，如网页授权登录等，所以需要申请一个测试账号，具体位置：微信公众平台==>开发者工具==>公众平台测试号
在这里插入图片描述
获取到测试号之后，将appId 配置到自己项目中，并将appsecret和appId一并给后台同学，使用自己的微信号关注该测试号，并配置JS接口安全域名（用作jssdk签名），和网页授权获取用户信息回调域名。

注意此处的域名须与你自己本地前端项目所跑的域名统一，且不能是locahost，具体方法此处就不细讲了

在这里插入图片描述

用户授权登录

官方文档参考此处：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
这里分为如下几步，而前端同学需要做的只有第一步，引导用户同意授权，然后获取携带code的URL，并取得code，这个code即为当次用户授权的唯一凭证，并且只能使用一次
在这里插入图片描述
获取到code之后，将它通过自己的业务逻辑传给后台同学，获取userToken即可。
引导用户授权代码在项目的index.html中即可：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title></title>
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
      // 网页授权之获取code
      const code = getUrlParam("code");
      if (!code) {
   
        const appid = "你自己的appId";
        const url = encodeURIComponent(location.href.split('#')[0]);
        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + url + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
      }
      //获取url中参数
      function getUrlParam(name) {
   
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return null;
      }
    </script>
  </head>
  <body style="font-size: 14px;">
    <div id

最低0.47元/天解锁文章

一尾小锦鲤丶

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
用vue做微信公众号开发踩坑合集

准备工作作为个人开发者，可以申请微信订阅号，但是很多借口权限并不能获得，如网页授权登录等，所以需要申请一个测试账号，具体位置：微信公众平台==&amp;gt;开发者工具==&amp;gt;公众平台测试号获取到测试号之后，将appId 配置到自己项目中，并将appsecret和appId一并给后台同学，使用自己的微信号关注该测试号，并配置JS接口安全域名（用作jssdk签名），和网页授权获取用户信息回调域名。...
复制链接

扫一扫