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 对应的代码。这个微信需要绑定到一个应用中,我们需要定义应用的可信域名。

在企业微信登陆后,我们会记录一个应用的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+ "&timestamp=" + 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‘;

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);
                                });
                            }
                        });
                    }
                }
            });
        }

选择相册或者拍照。



原文地址:https://www.cnblogs.com/yg_zhang/p/8846773.html

时间: 2024-11-08 19:02:34

vue 开发系列(六) 企业微信整合的相关文章

S5PV210开发系列六_Fatfs的移植

S5PV210开发系列六 Fatfs的移植 象棋小子    1048272975 对于固态存储器,其存储容量可以很大,往往需要一款文件系统对存储器用户数据进行组织文件的管理.它对文件存储器空间进行组织和分配,负责文件的存储并对存入的文件进行保护和检索.在嵌入式系统中,往往需要采用windows兼容的文件系统,像相机的照片.视频监控.语音产品等,很多都需要从windows计算机上提取资源或在windows计算机上进一步处理.Fatfs由于其开源免费,支持fat32,受到了广泛的应用,笔者此处就S5

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&quo

C#.NET微信公众账号接口开发系列文章整理--微信接口开发目录,方便需要的博友查询

前言: 涉及微信接口开发比较早也做的挺多的,有时间的时候整理了开发过程中一些思路案例,供刚学习微信开发的朋友参考.其实微信接口开发还是比较简单的,但是由于调试比较麻烦,加上微信偶尔也会给开发者挖坑,并且C#.NET微信接口开发又比php开源的项目少很多,腾讯官方还经常给其他的语言的jdk唯独缺少.NET的,所以整理自己开发的一些代码.心得并且附带完整源码:https://github.com/xiejun-net/weixin,希望可以减少大家开发的时间,同时如有问题希望可以指出交流.后续还会更

微信小程序开发系列一:微信小程序的申请和开发环境的搭建

我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序: https://mp.weixin.qq.com/cgi-bin/wx 点击按钮"前往注册".注意我们需要使用一个没有注册过微信小程序或者微信公众号的邮箱.我用的是网易邮箱.注册之后,邮箱会收到一封激活邮件. 激活之后,就可以进入小程序主体信息登记页面了.这里需要使用×××号码和手机验

Spring Boot入门系列六( SpringBoot 整合thymeleaf)

SpringBoot 整合thymeleaf 一.什么是Thymeleaf模板 Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎.类似JSP,Velocity,FreeMaker等,它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎.与其它模板引擎相比,Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用.它的功能特性如下: @Controller中的方法可以直接返回模板名称,接下来Thyme

BizTalk开发系列(六) BizTalk开发简述

现在很多大型企业信息化程度很高,运行中的系统可达到数十乃至上百个.而大部分系统由于建设的时间.开发团队和技术 往往不相同,系统之间的大部分都是独立运行的.随着信息化建设的深入各系统之间的交互需求越来越紧迫.但是由于信息化的建设不可能一触而就,也不可能再组 建一个团队把所有的系统重构.因此需要一个系统与系统之间交互的中间件. BizTalk就是这样一个中间件.它本质上是一个消息处理引擎,处理消息验证,映射,业务流程等.以下是BizTalk的运行时高度概括结构,了解其结构可以在更有针对性的开发相关业

vue 开发系列 路由配置

概要 用Vue.js + vue-router 创建单页应用,是非常简单的.使用Vue.js,我们已经可以通过组合组件来组成应用程序,当你要把vue-router 添加进来,我们需要做的是,将组件(componennts)映射到路由(routes) , 然后告诉vue-router在哪里渲染它们. 实现代码 1.在main.js 中引入 router. //main.js 引入router import router from './router/index' 2.在main.js 中使用rou

linux下C++开发系列(六)——文件IO相关的系统调用

linux操作系统中,文件是最基本和最重要的抽象,linux遵循一切皆文件的理念.按照不同的属性,文件可以分为普通文件和特殊文件.特殊文件是以文件方式表示的内核对象,linux支持四种类型的特殊文件: 1.块设备文件 (例如硬盘设备) 2.字符设备文件(例如键盘设备) 3.命名管道 (主要是进程间通信使用) 4.Unix域套接字(主要是网络通信使用) linux系统对于文件的操作,提供了一系列的系统调用个,主要分为以下几类: 1.创建文件(creat) 2.打开文件(open) 3.读文件(re

Vue开发系列二 熟悉项目结构

初始项目结构如上所示.src:  写代码地方,我们大部分的操作都在此 static :资源目录 static目录下还可以放一些第三方的js库,通用的css等,这样每次打包的时候节省打包时间 原文地址:https://www.cnblogs.com/menchao/p/8425749.html