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

    选择相册或者拍照。



  • 相关阅读:
    77. Combinations (Recursion)
    90. Subsets II (Back-Track, DP)
    78. Subsets (Back-Track, DP)
    131. Palindrome Partitioning (Back-Track, DP)
    41. First Missing Positive (HashTable)
    49. Group Anagrams (string, HashTable)
    76. Minimum Window Substring (String, Map)
    Leetcode Intersection of Two Linked Lists
    Cocos2d-js 开发记录:基本图形绘制
    Cocos2d-js 开发记录:骨骼动画载入
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/8846773.html
Copyright © 2011-2022 走看看