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

插件接入前准备

参考微信官方文档 开放标签说明文档 完成微信开放标签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 | 无 | 销毁组件 |