❤
npm
Sign UpSign In

v-wechat-auth

1.0.0 • Public • Published

v-wechat-auth

npm vue2

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i v-wechat-auth

Repository

github.com/raychenfj/v-wechat-auth

Homepage

github.com/raychenfj/v-wechat-auth#readme

Weekly Downloads

11

Version

1.0.0

License

MIT

Unpacked Size

161 kB

Total Files

10

Last publish

Collaborators

  • raychenfj
Try on RunKit
Report malware