npm package: @mg-ott/wechat-mp-login
Description: 和丰微信小程序登录授权插件
Author: zhengqiang
Latest version: 0.0.5

# 和丰微信小程序登录授权插件

## 插件接入前准备

参考微信官方文档 [开放标签说明文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html) 完成微信开放标签**wx-open-launch-weapp**  的签名。

## 插件使用

### 安装依赖

```
npm i @mg-ott/wechat-mp-login --save
```

### 实例化

```
import WechatLogin from '@mg-ott/wechat-mp-login';
 
const wechatLogin = new WechatLogin({
  props: {
    appid: 'appid',
    channel: 'channel',
    qrcodeId: 'qrcodeId',
  },
  listeners: {
    onStart: (res) => {
      console.log('onStart', res);
 
      if (res.ok) {
        // 设置跳转小程序路径
        this.path = res.path;
      }
    },
    onExpire: () => {
      // 登录凭证失效，重新获取凭证
      wechatLogin.start();
    },
    onLogin: async (res) => {
      console.log('onLogin', res);
      if (res.ok) {
        // 登录态处理
      }
    },
  },
});
 
// 开启小程序跳转
wechatLogin.start();
```

### 配合开放标签使用

**以Vue项目示例：**

**template**

```
<wx-open-launch-weapp
  v-if="!!path"
  id="launch-btn"
  :appid="appid"
  :path="path"
  :env-version="envVersion"
  @launch="onLaunch"
  @error="onError"
  @click="handleOk"
>
  <script type="text/wxtag-template">
    <style> .btn-launch-weapp {width: 100%; height: 48px;} </style>
    <div class="btn-launch-weapp"></div>
  </script>
</wx-open-launch-weapp>
```

**script**

```
export default {
  data() {
    return {
      appid: 'appid',
      path: '',
      envVersion: 'release',
      // envVersion: 'trial',
      // envVersion: 'develop',
    };
  },
  onLaunch(e) {
    console.log('launch success:', e);
  },
  onError(err) {
    console.log('launch error:', err);
  },
  handleOk() {
     // 跳转小程序页面
  },
}
```

**style**

设置标签在需要点击的元素之上。

```
wx-open-launch-weapp {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}
```

## 插件文档

### 参数说明

| 属性               | 类型     | 默认值 | 必填 | 说明                 |
| -------------------- | ---------- | -------- | ------ | ---------------------- |
| props.appid        | string   | 无     | 是   | 微信小程序appid      |
| props.channel      | string   | 无     | 是   | 所属渠道             |
| props.qrcodeId     | string   | 无     | 否   | 二维码ID             |
| listeners.onStart  | function |       | 否   | 开启小程序跳转时触发 |
| listeners.onExpire | function |       | 否   | 登录凭证失效时触发   |
| listeners.onLogin  | function |       | 否   | 同步登录结果时触发   |

#### listeners.onStart 回调函数

**参数 Object res**

| 属性 | 类型    | 说明           |
| ------ | --------- | ---------------- |
| ok   | boolean | 是否正常       |
| msg  | string  | 描述信息       |
| path | string  | 小程序跳转路径 |

#### listeners.onLogin 回调函数

**参数 Object res**

| 属性 | 类型                                                               | 说明       |
| ------ | -------------------------------------------------------------------- | ------------ |
| ok   | boolean                                                            | 是否正常   |
| msg  | string                                                             | 描述信息   |
| data | Object* ticket -  登录凭证* uuid - 用户ID* openid - 小程序openid | 登录态信息 |

### 插件实例方法

| 事件名  | 参数 | 说明           |
| --------- | ------ | ---------------- |
| start   | 无   | 开启小程序跳转 |
| destroy | 无   | 销毁组件       |