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 相关文章推荐
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
第六节--访问属性和方法
2006/11/16 PHP
PHP 选项及相关信息函数库
2006/12/04 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
Yii框架安装简明教程
2020/05/15 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python实现支付宝转账接口
2019/05/07 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Python函数参数分类原理详解
2020/05/28 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
linux面试题参考答案(2)
2015/12/06 面试题
英语自荐信范文
2013/12/11 职场文书
网络程序员自荐信
2014/01/25 职场文书