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 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
js常用DOM方法详解
Feb 04 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jQuery each()小议
2010/03/18 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
python模块之paramiko实例代码
2018/01/31 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
华为的Java面试题
2014/03/07 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
保护环境标语
2014/06/09 职场文书
2015年教学工作总结
2015/04/02 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
运动会跳远广播稿
2015/08/19 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python