Vue 實現微信 jssdk 掃碼, 上傳圖片

時間 2019-11-12

標籤 vue 實現微信 jssdk 上傳圖片简体版

原文原文鏈接

流程前端

1: 配置微信公衆號JS域名vue

2:前端發送URL後臺獲取JSSDK配置,ios

後臺Service代碼以下, 修改2處位置:npm

　　WeixinUtil.APPID => 當前公衆號APPIDaxios

　　WeixinUtil.getAccessToken() => 當前公衆號access_tokenapi

public interface IWxJssdkService {
    Map<String, Object> getJssdkConfig(String url);
}

@Service
public class WxJssdkService implements IWxJssdkService {

    private Logger logger = LoggerFactory.getLogger(this.getClass());

    @Override
    public Map<String,Object> getJssdkConfig(String url) {
        Map<String,Object> result = new Map<String,Object>();
        try {
            //生成簽名的隨機串
            String nonceStr = create_nonce_str();
            //生成簽名的時間戳
            String timestamp = create_timestamp();
            //簽名
            String signature = createSignature(url, nonceStr, timestamp);
            result.setErrCode("0");
            result.put("appId", WeixinUtil.APPID);
            result.put("timestamp", timestamp);
            result.put("nonceStr", nonceStr);
            result.put("signature", signature);
        } catch (Exception e) {
            e.printStackTrace();
            logger.info("wrong:" + e.getMessage());
            result.setErrCode("-1");
        }
        return result;
    }

    private String getJsapiTicket() {
        String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + WeixinUtil.getAccessToken() + "&type=jsapi";
        try {
            String rs = RequestUtil.doGet(url, null);
            JSONObject obj_content = new JSONObject(rs);
            String jsapi_ticket = obj_content.getString("ticket");
            return jsapi_ticket;
        } catch (Exception e) {
            e.printStackTrace();
            logger.info("獲取微信jsapiTicket錯誤.");
        }
        return null;
    }

    private String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }

    private String create_nonce_str() {
        return UUID.randomUUID().toString();
    }

    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash) {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }

    /**
     * 根據jsapi_ticket等參數進行SHA1加密
     *
     * @param url 當前頁面url
     */
    public String createSignature(String url, String nonceStr, String timestamp) {
        String jsapiTicket = getJsapiTicket();
        String signature = "jsapi_ticket=" + jsapiTicket;
        signature += "&noncestr=" + nonceStr;
        signature += "&timestamp=" + timestamp;
        signature += "&url=" + url;

        logger.info("jsapi_ticket:{}", jsapiTicket);
        logger.info("noncestr:{}", nonceStr);
        logger.info("timestamp:{}", timestamp);
        logger.info("url:{}", url);
        logger.info("signture before:{}", signature);

        try {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(signature.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());

            logger.info("signture after:" + signature);
        } catch (Exception e) {
            logger.error("Signature for SHA-1 is error:{}", e);
        }


        return signature;
    }
}

View Code

3: 請先安裝weixin-js-sdk, 命令:npm install weixin-js-sdk --save-dev瀏覽器

vue啓動後axios請求後臺並配置.微信

import wx from 'weixin-js-sdk';

wx.config({
     debug: true,            // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
     appId: result.appId,    // 必填，公衆號的惟一標識
     timestamp: result.timestamp,  // 必填，生成簽名的時間戳
     nonceStr: result.nonceStr, // 必填，生成簽名的隨機串
     signature: result.signature,// 必填，簽名
     jsApiList: ['scanQRCode', 'chooseImage', 'uploadImage'] // 必填，須要使用的JS接口列表
});