JSSDK用法

妖精的绣舞 提交于 2019-12-29 05:43:53

 

参照微信官方文档,调试成功之后总结如下:
步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:写代码

//初始化定义(在页面js里面)
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识--->用户的微信公众号appid
    timestamp: '', // 必填,生成签名的时间戳--->系统自己生成的时间戳。
    nonceStr: '', // 必填,生成签名的随机串--->系统本地生成的UUID。
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2--->一大串CC+CV
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

为了获取上述参数如下操作
获取参数流程==========================================================================

1:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=‘自己申请的公众号appid’&secret=’自己申请的公众号secret’
根据appid和secret返回的json格式数据
获取access_token;(涉及访问量,根据2小时限制需要缓存在本地 !)

2:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=‘上一步access_token’&type=jsapi
根据上一步返回的access_token
获取jsapi_ticket;(涉及访问量,根据2小时限制需要缓存在本地 !)

3: 获取nonce_str=UUID.randomUUID().toString();

获取timestamp=Long.toString(System.currentTimeMillis() / 1000);

获取url=request.getRequestURL();

获取signature

   string1=(jsapi_ticket+nonce_str+timestamp+url)//注意这里参数名必须全部小写,且必须有序-->MessageDigest类
            a)MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            b)crypt.reset();
            c)crypt.update(string1.getBytes("UTF-8"));
            d)signature = byteToHex(crypt.digest());
  • 1
  • 2
  • 3
  • 4
  • 5

获取成功==================================================================================

跳转页面,传递到wx.config()中去。demo.jsp

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>

//初始化定义
var sd=${result.timestamp};
  wx.config({
      debug: false ,
      appId: '${result.appId}',
      timestamp: '${timestamp}',
      nonceStr: '${appId}',
      signature: '${signature}',
      jsApiList: [
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'hideMenuItems',
        'showMenuItems',
        'hideOptionMenu',
        'showOptionMenu'      
      ]
  });


wx.ready(function () {

//地理位置
wx.getLocation({
    success: function (res) {
        var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
        var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
        var speed = res.speed; // 速度,以米/每秒计
        var accuracy = res.accuracy; // 位置精度
        alert("latitude : "+latitude+"--longitude : "+longitude+"--speed : "+speed+"--accuracy : "+accuracy);
    }
});

</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

应一哥们要求,我把我自己调试用的例子发出
=========例子===========

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@taglib uri="/struts-tags" prefix="s"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>syShaoyj1990</title>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>


var sd=${result.timestamp};
//初始化定义
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '${result.appId}', // 必填,公众号的唯一标识--->用户的微信公众号appid
    timestamp: sd, // 必填,生成签名的时间戳--->系统自己生成的时间戳。
    nonceStr: '${result.nonceStr}', // 必填,生成签名的随机串--->系统本地生成的UUID。
    signature: '${result.signature}',// 必填,签名,见附录1
    jsApiList: ['onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'startRecord',
               'stopRecord',
                'onVoiceRecordEnd',
                'playVoice',
                'pauseVoice',
                'stopVoice',
                'onVoicePlayEnd',
                'uploadVoice',
                'downloadVoice',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'translateVoice',
                'getNetworkType',
                'openLocation',
                'getLocation',
                'hideOptionMenu',
               ' showOptionMenu',
               ' hideMenuItems',
                'showMenuItems',
               ' hideAllNonBaseMenuItem',
               ' showAllNonBaseMenuItem',
              '  closeWindow',
              '  scanQRCode',
              '  chooseWXPay',
               ' openProductSpecificView',
               ' addCard',
               ' chooseCard',
                'openCard'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2--->一大串CC+CV
});

  wx.config({
      debug: false ,
      appId: '${result.appId}',
      timestamp: sd,
      nonceStr: '${result.nonceStr}',
      signature: '${result.signature}',
      jsApiList: [
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'hideMenuItems',
        'showMenuItems',
        'hideOptionMenu',
        'showOptionMenu'      
      ]
  });

</script>

<script>
wx.ready(function () { 
//分享到qq
wx.onMenuShareQQ({
    title: '分享到qq', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
       // 用户取消分享后执行的回调函数
    }
});


//地理位置
wx.getLocation({
    success: function (res) {
        var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
        var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
        var speed = res.speed; // 速度,以米/每秒计
        var accuracy = res.accuracy; // 位置精度
        alert("latitude : "+latitude+"--longitude : "+longitude+"--speed : "+speed+"--accuracy : "+accuracy);
    }
});

//分享到朋友圈
wx.onMenuShareTimeline({
title: 'syj,分享到朋友圈测试!',
   link: 'http://shaoyj1990.sinaapp.com', 
   imgUrl: 'http://image.baidu.com/detail/newindex?col=%E8%B5%84%E8%AE%AF&tag=%E5%A8%B1%E4%B9%90&pn=0&pid=5759608761913747677&aid=&user_id=10086&setid=-1&sort=0&newsPn=0&star=%E5%80%AA%E5%A6%AE&fr=&from=1', 
   success: function (res) {
alert("ok");
 }
});

//分享给朋友
wx.onMenuShareAppMessage({
title: 'syj,分享给朋友测试!',
   desc: '地球一小时,让地球母亲休息一小时!',
   link: 'http://www.baidu.com', 
   imgUrl: 'http://www.baidu.com', 
 success: function (res) {
 alert("ok");
 }
});

});


</script>
</head>
<body>
<button id="getLocation">click</button>
</body>
</html>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!