经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
在微信框架模块中，基于Vue&Element前端的微信公众号和企业微信的用户绑定
来源：cnblogs　　作者：伍华聪　　时间：2021/6/7 9:11:52　　对本文有异议

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

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

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

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

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

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

  1.   <el-table-column align="center" label="绑定公众号" width="120">
  2.     <template scope="scope">
  3.       <el-row>
  4.         <el-button-group v-if="scope.row.openId != ''">
  5.           {{scope.row.subscribeWechat}}
  6.           <el-tooltip effect="light" content="点击取消绑定" placement="top-start">
  7.             <el-button icon="el-icon-remove-outline" type="warning" size="mini"
  8.               @click="CancelBindWechat(scope.row.id)">
  9.             </el-button>
  10.           </el-tooltip>
  11.         </el-button-group>
  12.         <el-button-group v-else>
  13.           <el-tooltip effect="light" content="点击绑定二维码" placement="top-start">
  14.             <el-button type="success" circle size="mini" @click="BindQRCode(scope.row.id)">
  15.               <v-icon name="qrcode" style="color:#409EFF;" />
  16.             </el-button>
  17.           </el-tooltip>
  18.           <el-tooltip effect="light" content="点击绑定公众号" placement="top-start">
  19.             <el-button type="primary" circle size="mini" @click="BindWechat(scope.row.id)">
  20.               <v-icon name="user-tag" style="color:#2A3036;" />
  21.             </el-button>
  22.           </el-tooltip>
  23.         </el-button-group>
  24.       </el-row>
  25.     </template>
  26.   </el-table-column>

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

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

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

  1.   <el-table-column align="center" label="绑定企业微信" width="140">
  2.     <template scope="scope">
  3.       <el-row>
  4.         <el-button-group v-if="scope.row.corpUserId != ''">
  5.           {{scope.row.corpUserId}}
  6.           <el-tooltip effect="light" content="点击取消绑定" placement="top-start">
  7.             <el-button icon="el-icon-remove-outline" type="warning" size="mini"
  8.               @click="UnBindCorpUser(scope.row.id)">
  9.             </el-button>
  10.           </el-tooltip>
  11.         </el-button-group>
  12.         <el-button-group v-else>
  13.           <el-tooltip effect="light" content="点击绑定企业微信" placement="top-start">
  14.             <el-button icon="el-icon-user-solid" type="primary" circle size="mini"
  15.               @click="BindCorpUser(scope.row.id)" />
  16.           </el-tooltip>
  17.         </el-button-group>
  18.       </el-row>
  19.     </template>
  20.   </el-table-column> 

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

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

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

 

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

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

 

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

 

 2）系统扫码绑定

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

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

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

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

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

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

  1. npm install @chenfengyuan/vue-barcode vue

以及

  1. npm install @chenfengyuan/vue-qrcode vue

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

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

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

 

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

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

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

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

  1.     CancelBindWechat (id) {//取消绑定微信账号
  2.       var tips = "您确认取消绑定微信账号吗？"
  3.       this.msgConfirm(tips).then(() => {
  4.         var param = {
  5.           id: id
  6.         }
  7.         user.CancelBindWechat(param).then(data => { //公众号绑定
  8.           // console.log(data.result)
  9.           if (data.success) {
  10.             // 提示信息
  11.             this.msgSuccess('操作成功!')
  12.             this.getlist()
  13.           } else {
  14.             this.msgError('取消绑定失败：' + data.error)
  15.           }
  16.         })
  17.       })
  18.     },

 

3）企业微信绑定

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

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

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

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

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

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

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

 操作代码如下所示。

  1.     UnBindCorpUser (id) { //取消绑定企业微信
  2.       var tips = "您确认取消绑定企业微信吗?"
  3.       this.msgConfirm(tips).then(() => {
  4.         var param = {
  5.           id: id,
  6.           corpUserId: ''
  7.         }
  8.         user.BindCorpUser(param).then(data => {
  9.           // console.log(data.result)
  10.           if (data.success) {
  11.             // 提示信息
  12.             this.msgSuccess('操作成功!')
  13.             this.getlist()
  14.           } else {
  15.             this.msgError('取消绑定失败：' + data.error)
  16.           }
  17.         })
  18.       })
  19.     },

 

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

原文链接：http://www.cnblogs.com/wuhuacong/p/14846265.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号