v-wechat-auth v1.0.0

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

VWechatAuth 实例

License

MIT