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/tommymarc/p/12145151.html

时间: 2024-09-29 00:49:30

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

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

微信公众号开发系列-获取微信OpenID

在微信开发时候在做消息接口交互的时候须要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID.接收事件推送方式和网页授权获取用户基本信息方式获取. 1.通过接收被动消息方式获取OpenId(接收事件推送方式).下面事件中都能够获取到OpenID 关注/取消关注事件 用户在关注与取消关注公众号时.微信会把这个事件推送到开发人员填写的URL.方便开发人员给用户下发欢迎消息或者做帐号的解绑. 微信server在五秒内收不到响应会断掉连接,而且又一次发起请求,总共重试三次 关于

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

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

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

vue 开发系列(九) VUE 动态组件的应用

业务场景 我们在开发表单的过程中会遇到这样的问题,我们选择一个控件进行配置,控件有很多中类型,比如文本框,下来框等,这些配置都不同,因此需要不同的配置组件来实现. 较常规的方法是使用v-if 来实现,这样界面看上去比较复杂,而且需要进行修改主页面. 解决方案 可以使用动态组件来实现,为了体现动态组件的特性,我们简化实现方式,编写两个简单的组件来测试一下这个功能. 文本组件配置: <template> <div> 我是单行文本框{{config.type}} </div>

net core WebApi——尝试企业微信内部应用

目录 前言 企业微信 开始 测试 小结 @ 前言 这几天忙活着别的东西,耽误了很长时间,从文件操作完了之后就在考虑着下一步鼓捣点儿啥,因为最开始的业务开发就是企业微信相关的,这刚好来做个内部应用的小例子玩玩. 企业微信 前身是企业号,当时微信主推的还是公众号与服务号,后续战略考虑到企业的OA了(当然还是跟某个抢市场),企业号应该是在16年还是具体啥时候出的,刚出的时候也是问题不断一直在修复更新,最近这两年基本上没咋关注企业微信了,也都是偶尔上去看看有没有新东西啊什么的,不过不得不说,在这几年的成

微信小程序购物商城系统开发系列-工具篇

微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址https://mp.weixi

Force.com微信开发系列(六)客服接口

当用户主动发消息给微信公众账号的时候(包括发送信息.点击自定义菜单click事件.订阅事件.扫描二维码事件.支付成功事件.用户维权),微信将会把消息数据推送给开发者,开发者在一段时间内(目前为48小时)可以调用客服消息接口,通过POST一个JSON数据包来发送消息给普通用户,在48小时内不限制发送次数.此接口主要用于客服等有人工消息处理环节的功能,方便开发者提供更加优质的服务. 客服接口调用请求说明 客服接口调用的接口说明如下(http请求方式为POST),如果获取Access Token的方式

微信开发系列教程:(1)订阅号和服务号深入分析

微信开发系列教程,将以一个实际的微信平台项目为案例,深入浅出的讲解微信开发.应用各环节的实现方案和技术细节. 原创内容,欢迎转载,转载请注明出处. 首先在第1章节中,我们先理清什么是订阅号,什么又是服务号,以及两者的关键性区别. 订阅号和服务号统称为微信公众号. 订阅号强调媒体资讯属性,为会员提供信息订阅,适用于新闻传媒类企业.订阅号从某种意义上来讲,是拿来做内容的,如果你没有原创作品,对用户没有任何意义. 服务号强调服务和应用属性,旨在为会员提供服务并与之互动.支持所有微信高级接口,几乎所有的