uni-app中使用jssdk.md 实现录音功能以及语音识别

参考

vue中使用微信jssdk

微信jsSDK文档

JSSDK用法

1.首先使用npm工具安装wx jssdk

npm install weixin-js-sdk

2.安装完成之后,引入

import wx from ‘weixin-js-sdk’;

3.使用jssdk

这里以一个录音功能的小例子讲解

注意这里的地址栏上的地址要对应后台编码上的地址,不需要携带的参数,即不要?后面的参数

index.vue







后端代码

@RestController
@RequestMapping("/front/jssdk")
public class WxJssdkController {


    @Value("${wx.appid}")
    private String appid;

    @Value("${wx.appsecret}")
    private String appsecret;

    @Autowired
    private RedisUtils redisUtils;

    @GetMapping("/ticketconfig")
    public ResponseData ticketConfig(String localAddress) {
        String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s";

        String ticketUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi";


        String ticket = redisUtils.getString("ticket");

        if(StringUtils.isNotEmpty(ticket)){
            return joinParams(ticket,localAddress);
        }else{
            String s = HttpUtil.get(String.format(url,appid,appsecret));
            JSONObject jsonObject = JSONUtil.parseObj(s);
            String access_token = jsonObject.getStr("access_token");
            if (StringUtils.isNotEmpty(access_token)) {

                String ticketStr = HttpUtil.get(String.format(ticketUrl, access_token));

                JSONObject ticketObj = JSONUtil.parseObj(ticketStr);

                ticket = ticketObj.getStr("ticket");

                if (StringUtils.isNotEmpty(ticket)) {

                    redisUtils.setString("ticket", ticket,TimeUnit.HOURS,2);
                    return joinParams(ticket,localAddress);


                }
            }
        }

        return null;
    }

    private ResponseData joinParams(String ticket,String url) {
        String nonce_str = UUID.randomUUID().toString();
        String timestamp = Long.toString(System.currentTimeMillis() / 1000);

        //注意这里的url一定是对应访问时候地址栏上的地址
        String string1 = "jsapi_ticket=" + ticket + "&noncestr=" + nonce_str + "×tamp=" + timestamp + "&url=" + url;

        MessageDigest crypt = null;
        try {
            crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(string1.getBytes("UTF-8"));
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        String signature = byteToHex(crypt.digest()).toLowerCase();

        Map map = new HashMap();
        map.put("appId", appid);
        map.put("timestamp", timestamp);
        map.put("nonce_str", nonce_str);
        map.put("signature", signature);



        return ResponseData.success(map);
    }




    public static final String byteToHex(byte[] bArray) {
        StringBuffer sb = new StringBuffer(bArray.length);
        String sTemp;
        for (int i = 0; i < bArray.length; i++) {
            sTemp = Integer.toHexString(0xFF & bArray[i]);
            if (sTemp.length() < 2) {
                sb.append(0);
            }
            sb.append(sTemp.toUpperCase());
        }
        return sb.toString();
    }

}

你可能感兴趣的:(后端,前端)