zoukankan      html  css  js  c++  java
  • 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);
                                    });
                                }
                            });
                        }
                    }
                });
            }

    选择相册或者拍照。



  • 相关阅读:
    flume sink两种类型 file_rool 自定义sing com.mycomm.MySink even if there is only one event, the event has to be sent in an array
    为什么引入进程20年后,又引入线程?
    As of Flume 1.4.0, Avro is the default RPC protocol.
    Google Protocol Buffer 的使用和原理
    Log4j 2
    统一日志 统一订单
    网站行为跟踪 Website Activity Tracking Log Aggregation 日志聚合 In comparison to log-centric systems like Scribe or Flume
    Percolator
    友盟吴磊:移动大数据平台的架构、实践与数据增值
    Twitter的RPC框架Finagle简介
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/8846773.html
Copyright © 2011-2022 走看看