公众号测试号提示"Scope参数错误或没有Scope权限"

1. 公众号测试号提示"Scope参数错误或没有Scope权限"

在使用公众号测试号做微信分享功能的时候，提示"Scope参数错误或没有Scope权限"

解决方案：

在公众号测试号的页面中找到 "网页授权获取用户基本信息"，中添加授权回调页面域名，就可以了。

回调页面域名，不需要加上"http://" 。

2. 公众号测试号，分享功能开发流程

2.1 申请一个公众号测试号，获取APPID

2.2 新建一个Vue的项目，进行页面跳转

mounted(){
    // 页面一打开，跳转到授权页面
    var url = window.encodeURIComponent('http://m.imooc.com')
    window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxxxxxxxxxxxxxxxxxxxxxxx&redirect_uri=' + url + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
}

注意：顺序不能乱，scope=snsapi_userinfo 排在 response_type=code 的后面。

scope=snsapi_base，只获取用户的 openId，不需要用户去授权
scope=snsapi_userinfo，是拉取用户信息，需要用户授权

注：此时Vue的项目路由是hash模式。

2.3 下载"微信web开发者工具"

注意：扫码登录"微信web开发者工具"的微信账号，需要和注册"公众号测试号"的微信账号是同一个。

2.4 配置Hosts文件

打开

C:\Windows\System32\Drivers\etc

加上一句

# 本地
127.0.0.1  m.imooc.com 

复制代码首先找到host文件，一般位于：C:\Windows\System32\drivers\etc 之后用记事本打开，直接修改。保存txt文件到桌面。 最后删除后缀名，再粘贴回去就可以了。

2.5 需要把Vue的项目端口设置成80

在 vue.config.js 中：

module.exports = {
  devServer: {
    // 设置主机地址
    host: 'm.imooc.com',
    // 设置默认端口
    port: 80,
    // 设置代理
    proxy: {
      '/api': {
        // 设置目标API地址
        target: 'http://localhost:3000',
        // 如果要代理 websockets
        ws: false,
        // 将主机标头的原点改为目标URL
        changeOrigin: false
      }
    }
  }
}

启动：

npm run serve

运行结果：

2.6 启动项目

然后启动Vue的项目。

在"微信web开发者工具"地址栏，输入

http://m.imooc.com/#/index

就可以实现，需要经过用户授权，拉取微信用户的信息了。