v-wechat-auth

vue 2.0 微信网页授权插件

安装

npm

npm install --save v-wechat-auth

import Vue from 'vue'
import VWechatAuth from 'v-wechat-auth'

通过 script 标签

<!-- 在 Vue 之后 -->
<!-- 从本地文件 -->
<script src="v-wechat-auth/dist/v-wechat-auth.min.js"></script>

<!-- 从 CDN -->
<script src="https://unpkg.com/v-wechat-auth"></script>

使用

初始化

Vue.use(VWechatAuth)

// 必须在 root 实例上注入 wechatAuth
new Vue({
  el: '#app',
  ...,
  wechatAuth: new VWechatAuth({
    appId: 'your wechat appid',
    scope: 'snsapi_base or snsapi_userinfo'
    authorize () {
      return axios.get('your backend api here', { params: { code: code } })
        .then(function (res) {
          var data = (res && res.data) || {} // response data should at least contain openid
          return data
        })
    }
  })
})

调用

this.$wechatAuth.authorize()

运行例子

1. 将 examples 文件夹中的 config.example.js 重命名为 config.js

2. 修改 config.js, 填入微信 appid 和 scope, 并在 authorize 方法中调用后端接口获取用户信息，并将用户信息返回

3. 修改 host 文件，将微信授权域名映射为 localhost

4. 运行 npm run example

5. 在微信开发者工具中访问 授权域名/examples/index.html（因为修改了host，这时访问的实际上是本地）

6. 能显示当前用户的 openid

options

| 属性 | 类型 | 必输 | 默认 | 说明 | |-------|-------|-------|-------|-------| | autoRedirect | boolean | 否 | true | 当 url 中不包含 code 参数或返回结果中不包含openid时，是否自动重定向到微信授权url | | appId | string | 是 | | 微信 appid | | scope | string | 是 | | 微信 scope, snsapi_base 或 snsapi_userinfo | | state | string | 否 | '' | 微信 state | | authorize | function | 是 | | ajax 请求调用后端接口获取微信用户信息 | ssr | boolean | 否 | | 是否使用服务端渲染，尚未实现 |

VWechatAuth 实例

| 属性 | 说明 | |------|------| | user | 当获取用户信息成功后，存储了用户的信息，否则为一个空对象 |

| 方法 | 参数 | 返回 | 说明 | |------|------|-------|------| | authorize | onSuccess，执行成功的回调函数 onFail，执行失败的回调函数 | Promise | 授权获取用户信息，支持回调函数 和 Promise

License

MIT