在一个和微信相关的业务管理系统,我们有时候需要和用户的微信账号信息进行绑定,如对公众号、企业微信等账号绑定特定的系统用户,可以进行扫码登录、微信信息发送等操作,用户的绑定主要就是记录公众号用户的openid或者企业微信的userid,那样可以通过微信API接口,发送系统消息或业务消息。

1、系统用户界面的绑定处理

1)公众号和系统用户绑定

我们绑定用户,可以在系统用户管理界面中绑定相关的信息,也可以在查看当前用户界面中提供入口绑定。

在用户管理界面中的列表界面中绑定,界面如下所示。

上面的绑定操作,我们根据条件判断展示即可,其中公众号的绑定操作代码如下所示。

  <el-table-column align="center" label="绑定公众号" width="120">
<template scope="scope">
<el-row>
<el-button-group v-if="scope.row.openId != ''">
{{scope.row.subscribeWechat}}
<el-tooltip effect="light" content="点击取消绑定" placement="top-start">
<el-button icon="el-icon-remove-outline" type="warning" size="mini"
@click="CancelBindWechat(scope.row.id)">
</el-button>
</el-tooltip>
</el-button-group>
<el-button-group v-else>
<el-tooltip effect="light" content="点击绑定二维码" placement="top-start">
<el-button type="success" circle size="mini" @click="BindQRCode(scope.row.id)">
<v-icon name="qrcode" style="color:#409EFF;" />
</el-button>
</el-tooltip>
<el-tooltip effect="light" content="点击绑定公众号" placement="top-start">
<el-button type="primary" circle size="mini" @click="BindWechat(scope.row.id)">
<v-icon name="user-tag" style="color:#2A3036;" />
</el-button>
</el-tooltip>
</el-button-group>
</el-row>
</template>
</el-table-column>

我们通过判断 scope.row.openId 是否非空,判断是否需要绑定还是展示取消的按钮即可。而绑定的操作,就是展示公众号用户的界面操作了。

BindWechat (id) { //绑定微信账号
this.bindForm.id = id
this.bindForm.type = 0
// var param = { id: id, openid: openid, nickname: nickname }
var tags = []
this.$refs.tagUserSelect.show(tags)
},

企业微信绑定的处理也是类似代码。

  <el-table-column align="center" label="绑定企业微信" width="140">
<template scope="scope">
<el-row>
<el-button-group v-if="scope.row.corpUserId != ''">
{{scope.row.corpUserId}}
<el-tooltip effect="light" content="点击取消绑定" placement="top-start">
<el-button icon="el-icon-remove-outline" type="warning" size="mini"
@click="UnBindCorpUser(scope.row.id)">
</el-button>
</el-tooltip>
</el-button-group>
<el-button-group v-else>
<el-tooltip effect="light" content="点击绑定企业微信" placement="top-start">
<el-button icon="el-icon-user-solid" type="primary" circle size="mini"
@click="BindCorpUser(scope.row.id)" />
</el-tooltip>
</el-button-group>
</el-row>
</template>
</el-table-column> 

上面提供了微信公众号的绑定/取消绑定,或者公众号的扫码绑定;企业微信的绑定/取消绑定操作。

公众号绑定界面如下所示。

以上的操作就是调用代码   this.$refs.tagUserSelect.show(tags) 实现的,由于公众号的用户选择,我们需要在很多地方用到,这里定义为用户界面组件的方式使用的。如公众号和企业微信,都是使用可重用的用户组件方式处理。

上图选择公众号用户的界面是根据系统公众号,获取对应的订阅用户信息,以便绑定到对应的系统用户中,建立一一对应的关系。

如果选择具体订阅用户并确认后,系统就记录他们之间的关系,然后展示在列表中。

对于绑定的用户,我们当然也可以取消一一对应关系。取消前我们需要确认一下用户的选择为佳。

2)系统扫码绑定

在现今很多网站里面,都使用了微信开放平台的扫码登录认证处理,这样做相当于把身份认证交给较为权威的第三方进行认证,在应用网站里面可以不需要存储用户的密码了。

在用户列表的二维码连接上,单击可以对用户进行微信扫码绑定,这样用户可以在扫码登录处直接扫码登录,不需要输入账号密码。扫码绑定如下界面所示。

扫码绑定的处理代码如下所示,就是展示二维码,二维码是一个URL连接的

<el-dialog title="微信扫码绑定" :visible="isBindCode" width="400px" :modal-append-to-body="false" @close="closeDialog">
<div>
<!-- <el-image style="width: 100px; height: 100px" :src="url" fit="fill"></el-image> -->
<!-- <barcode v-if="viewForm.BarCode" :value="viewForm.BarCode"
:options="{ width:100,height:50,background:'rgba(255,255,255,.0)'}" /> -->
<qrcode v-if="qrcode" :value="qrcode" :options="{ width:300,background:'rgba(255,255,255,.0)'}" />
</div>
<div slot="footer" class="dialog-footer">
<el-button type="success" @click="closeDialog">关闭</el-button>
</div>
</el-dialog>

如对于条码和二维码,我使用 @chenfengyuan/vue-barcode和 @chenfengyuan/vue-qrcode,一般在Github上搜索下关键字,总能找到一些很受欢迎的第三方组件。

安装这些组件都有具体的说明,如下所示(如果卸载,直接修改install为uninstall即可)。

npm install @chenfengyuan/vue-barcode vue

以及

npm install @chenfengyuan/vue-qrcode vue

条码和二维码的展示效果如下所示

因此,展示二维码对话框的操作,只需要复制给对应属性,并展示对话框即可。

    BindQRCode (id) { //绑定二维码,用于扫码登陆
this.qrcode = `http://www.iqidi.com/h5/BindWechat?id=${id}`
this.isBindCode = true
},

一旦成功绑定用户微信,在微信端会定位到一个绑定成功的页面(自定义的H5页面),如下所示。

如果用户已经绑定了其中的一个用户而再去扫码绑定其他用户,那么会提示用户避免无法重复绑定账号即可。

如果用户已经进行了二维码绑定,则可以在管理界面进行取消绑定,这样可以解绑用户账号和微信之间的关联。

取消绑定的Vue脚本处理代码如下所示,就是调用后端API进行数据处理即可。

    CancelBindWechat (id) {//取消绑定微信账号
var tips = "您确认取消绑定微信账号吗?"
this.msgConfirm(tips).then(() => {
var param = {
id: id
}
user.CancelBindWechat(param).then(data => { //公众号绑定
// console.log(data.result)
if (data.success) {
// 提示信息
this.msgSuccess('操作成功!')
this.getlist()
} else {
this.msgError('取消绑定失败:' + data.error)
}
})
})
},

3)企业微信绑定

有时候,我们可以通过企业微信进行消息发送,或者处理相关的业务信息,如之前随笔《在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作》中说到的发送投票信息,就可以同时向公众号、企业微信发送投票信息,推送到具体的用户。

那么同时记录企业微信账号的信息就很有必要。

在系统用户列表界面中,我们同时也提供了绑定企业微信账户的操作。

和前面公众号绑定一样,我们这个弹出对话框也是作为一个用户组件的方式来实现的

调用展示的时候处理一下即可。

    BindCorpUser (id) {//绑定企业微信
this.bindForm.id = id
this.bindForm.type = 1
var tags = []
this.$refs.corpTagUserSelect.show(tags)
},

如果绑定后,需要取消绑定,确认一下用户选择即可。

操作代码如下所示。

    UnBindCorpUser (id) { //取消绑定企业微信
var tips = "您确认取消绑定企业微信吗?"
this.msgConfirm(tips).then(() => {
var param = {
id: id,
corpUserId: ''
}
user.BindCorpUser(param).then(data => {
// console.log(data.result)
if (data.success) {
// 提示信息
this.msgSuccess('操作成功!')
this.getlist()
} else {
this.msgError('取消绑定失败:' + data.error)
}
})
})
},

以上就是我们在后端管理界面中,基于Vue&Element前端的微信公众号和企业微信的用户绑定操作过程。

在微信框架模块中,基于Vue&Element前端的微信公众号和企业微信的用户绑定的更多相关文章

  1. 在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作

    最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...

  2. 在微信框架模块中,基于Vue&Element前端的事件和内容的管理

    在微信后台管理中,我们需要定义好菜单对应的事件管理,因为微信通过菜单触发相关的事件,因此菜单事件的响应关系,我们如果处理好,就能构建出我们的微信应用入口了.通过入口,我们可以响应用户菜单的事件,如响应 ...

  3. 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍

    微信开发包括公众号.企业微信.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解.微信小 ...

  4. 部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

    前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 ...

  5. 在Vue&Element前端项目中,对于字典列表的显示处理

    在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...

  6. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  7. 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  8. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  9. 循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

    在我们很多模块里面,都需要使用到一些诸如图片.Excel文件.PDF文件等附件的管理,一般我们倾向于把它独立为一个公用的附件管理模块,这样可以有效的统一管理附件的信息.本篇随笔介绍附件内容的管理,包括 ...

随机推荐

  1. Day14_84_通过反射机制修改和获取class里的属性值

    通过反射机制修改和获取class里的属性值 * 属性对象.set(Object,属性值) 给Object对象中的某个属性赋值(属性对象) * 属性对象.get(Object); 获取Object对象中 ...

  2. Day13_71_线程同步(synchronized)

    线程同步 * 异步编程模型和同步编程模拟的区别? - 有T1和T2 两个线程 > 异步编程模型:T1线程执行T1的,T2线程执行T2的,谁也不等谁 > 同步编程模型:T1和T2 线程执行, ...

  3. Webpack的理解以及解决了的问题

    一.背景 Webpack 最初的目标是实现前端项目的模块化,旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候,我们会通过文件划分的形式实现模块化,也就是将每个功能及其相关状态数据各自单独放 ...

  4. PostGIS管网连通性分析

    GIS在管网数据中的很重要的一个应用方向就是"管网空间分析",其中包括连通性分析.上下游分析.爆管分析等等.下面是我使用postgis来实现该"管网连通性分析" ...

  5. 《疯狂Kotlin讲义》读书笔记6——函数和Lambda表达式

    函数和Lambda表达式 Kotlin融合了面向过程语言和面向对象语言的特征,相比于Java,它增加了对函数式编程的支持,支持定义函数.调用函数.相比于C语言,Kotlin支持局部函数(Lambda表 ...

  6. &#128112;&#127999;‍♂️

    出于利益我便是绝对的利己主义者,凡事以自己为根本,以求自己利益最大化而不顾他人.社会.国家: 出于兴趣考我便希望全天下的人都好,都可爱,都不必受餐食无饱和居无定所的困苦,不必因感情的躁动而心情颠簸,因 ...

  7. 1- java语言特性

    Java概述 Java是面向对象程序设计语言和Java平台的总称 Java体系 JavaSE(j2se)(标准版) JavaEE(J2ee)(企业版) JavaME(J2me) 面向对象 面向对象是J ...

  8. hdu3234 带权并查集(XOR)

    题意:       给你n个未知的正整数,有三总操作       I P V            P的值是V       I P Q V          P XOR Q = V       Q K ...

  9. POJ2983 查分约束系统

    题意:        给你n个点,然后给你两种情况,P a b c,表明a在b的北边c那么远,V a b 表明a在b的北边(距离最少是1),问你这些条件是否冲突. 思路:       一开始想用带权并 ...

  10. cf534D 枚举握手次数

    题意:       有n个学生进教室,先后顺序不同,每个人进去后会和当前在教室里的人握手,并且记录人数,而且当教室里有超过三个人的时候 他们有可能组队去参加比赛,后来的人看不到他们. 思路:     ...