vue 开发企业微信整合案例分析


Posted in Javascript onDecember 02, 2019

本文实例讲述了vue 开发企业微信整合。分享给大家供大家参考,具体如下:

概述

手机端程序可以和企业微信进行整合,我们也可以使用企业微信JSSDK功能,实现一些原生的功能。

整合步骤

在整合之前需要阅读 整合步骤。

http://work.weixin.qq.com/api/doc#10029

1.引入JSSDK

npm i -S weixin-js-sdk 这样就引入了微信sdk。

2.通过config接口注入权限验证配置

export function initWxConfig(vm){
  var url=_baseUrl + "/initConfig.do";
  var curUrl=location.href.split("#")[0];
  var params="url="+curUrl;
  vm.$ajax.post(url,params).then(res=>{
    var data=res.data;
    wx.config({ 
     beta: true,
     debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
     appId: data.appId, // 必填,公众号的唯一标识 
     timestamp: data.timestamp, // 必填,生成签名的时间戳 
     nonceStr: data.nonceStr, // 必填,生成签名的随机串 
     signature: data.signature, // 必填,签名,见附录1 
     jsApiList: [
       'chooseImage',
       'previewImage',
       'uploadImage',
       'downloadImage',
       'previewFile',
       'getLocation',
     ] 
    });
    wx.error(function (res) {
      console.log("调用微信jsapi返回的状态:"+res.errMsg);
    });
  }).catch(function(error) {
    //vm.errorToast(error,1000);
    console.info(error);
  })
}

服务端

initConfig.do 对应的代码。

这个微信需要绑定到一个应用中,我们需要定义应用的可信域名。

vue 开发企业微信整合案例分析

在企业微信登陆后,我们会记录一个应用的ID。

在服务端调用方法:

public static Map<String, String> getWxConfig(String url,String corpId,String secret) throws Exception { 
    TokenModel tokenModel = TokenUtil.getEntTicket(corpId, secret); 
    String timestamp = Long.toString(System.currentTimeMillis() / 1000); // 必填,生成签名的时间戳 
    String nonceStr = UUID.randomUUID().toString(); // 必填,生成签名的随机串 
    String ticket=tokenModel.getToken();
    String signature = ""; 
    // 注意这里参数名必须全部小写,且必须有序 
    String sign = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr+ "×tamp=" + timestamp + "&url=" + url; 
    try { 
      MessageDigest crypt = MessageDigest.getInstance("SHA-1"); 
      crypt.reset(); 
      crypt.update(sign.getBytes("UTF-8")); 
      signature = byteToHex(crypt.digest()); 
    } catch (NoSuchAlgorithmException e) { 
      e.printStackTrace(); 
    } catch (UnsupportedEncodingException e) { 
      e.printStackTrace(); 
    }
    Map<String, String> ret = new HashMap<String, String>();
    ret.put("appId", corpId); 
    ret.put("timestamp", timestamp); 
    ret.put("nonceStr", nonceStr); 
    ret.put("signature", signature); 
    return ret; 
}

3.这个配置代码在应用启动时执行。

import {initWxConfig} from '@/assets/app.js';

vue 开发企业微信整合案例分析

4.使用相应的API

wxImage(type){
      var self_=this;
      wx.chooseImage({
        sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: [type], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
          var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
            for(var i=0;i<localIds.length;i++){
            wx.uploadImage({
              localId: localIds[i], // 需要上传的图片的本地ID,由chooseImage接口获得
              isShowProgressTips: 1, // 默认为1,显示进度提示
              success: function (res) {
                var serverId = res.serverId; // 返回图片的服务器端ID
                var url=_baseUrl +"/wx/saveFile.do";
                var params="mediaId=" + serverId;
                self_.$ajax.post(url,params).then(res=>{
                  var data=res.data;
                  self_.handFile(data);
                });
              }
            });
          }
        }
      });
    }

选择相册或者拍照。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 #Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 #Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 #Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 #Javascript
angular异步验证防抖踩坑实录
Dec 01 #Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 #Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 #Javascript
You might like
提高PHP编程效率的方法
2013/11/07 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
document.getElementById介绍
2011/09/13 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
学习Node.js模块机制
2016/10/17 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
简单介绍Python中的try和finally和with方法
2015/05/05 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python实现字典嵌套列表取值
2019/12/16 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
晚归检讨书
2014/02/19 职场文书
人民调解员培训方案
2014/06/05 职场文书
质量月口号
2014/06/20 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
公司员工手册范本
2015/05/14 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书