微信开发者 jssdk怎么使用

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信开发者 jssdk怎么使用相关的知识，希望对你有一定的参考价值。

参考技术A 、先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
2、页面引入JS:http://res.wx.qq.com/open/js/jweixin-1.0.0.js
3、所有需要使用JS-SDK的页面必须先注入配置信息
wx.config(
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
);

4、签名算法
生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

Java微信公众平台开发(十五)--微信JSSDK的使用

转自：http://www.cuiyongzhi.com/post/63.html

在前面的文章中有介绍到我们在微信web开发过程中常常用到的 【微信JSSDK中Config配置】 ，但是我们在真正的使用中我们不仅仅只是为了配置Config而已，而是要在我们的项目中真正去使用微信JS-SDK给我们带来便捷，那么这里我们就简述如何在微信web开发中使用必要的方法！微信的JS-SDk中为我们提供的方法很多，这里我有一个简单截图如下：

技术分享图片

在上图的提供的所有口中我们可以按照接口实现的难易程度分成两个部分：

  • 较易实现：基础接口、分享接口、设备信息接口、地理位置接口、界面操作接口、微信扫一扫接口；

  • 较难实现：图像接口、音频接口、智能接口、微信小店接口、微信卡券接口、微信支付接口；（注：这里说较难是因为需要后端和本地文件配合接口，这些接口后面会一篇篇文章具体详解）

在这里我们将讲述所有较易实现的接口的具体实现方法，在文章 http://www.cuiyongzhi.com/index.php/post/57.html  中讲述过了如何配置和引入需要的js，通过这些配置之后我们就可以开始使用js的方法了！

①基础接口-判断当前浏览器是否支持某些js接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
 * 注意：
 *  所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
 */
wx.ready(function () {
  //1. 判断当前版本是否支持指定 JS 接口，支持批量判断，只需要将需要判断的接口放入到jsApiList中即可
 checkJsApifunction () {
    wx.checkJsApi({
      jsApiList: [
        ‘getNetworkType‘,
        ‘previewImage‘
      ],
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

②分享接口，这里包含：分享给朋友、分享到朋友圈、分享到qq、分享到微博、分享到qq空间(但是这里要提醒要注意不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限)

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 // 2. 分享接口
  // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
  onMenuShareAppMessagefunction () {
    wx.onMenuShareAppMessage({
      title: ‘菜鸟程序员成长之路！‘,
      desc: ‘关注java平台开发，前后端框架技术，分享前后端开发资源，服务端教程技术，菜鸟程序员！‘,
      link: ‘http://www.cuiyongzhi.com/‘,
      imgUrl: ‘http://res.cuiyongzhi.com/2016/03/201603201591_339.png‘,
      trigger: function (res) {
        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
        alert(‘用户点击发送给朋友‘);
      },
      success: function (res) {
        alert(‘已分享‘);
      },
      cancel: function (res) {
        alert(‘已取消‘);
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert(‘已注册获取“发送给朋友”状态事件‘);
  };
 
  // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
  onMenuShareTimelinefunction () {
    wx.onMenuShareTimeline({
      title: ‘菜鸟程序员成长之路！‘,
      link: ‘http://www.cuiyongzhi.com/‘,
      imgUrl: ‘http://res.cuiyongzhi.com/2016/03/201603201591_339.png‘,
      trigger: function (res) {
        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
        alert(‘用户点击分享到朋友圈‘);
      },
      success: function (res) {
        alert(‘已分享‘);
      },
      cancel: function (res) {
        alert(‘已取消‘);
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert(‘已注册获取“分享到朋友圈”状态事件‘);
  };
 
  // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
  onMenuShareQQfunction () {
    wx.onMenuShareQQ({
      title: ‘菜鸟程序员成长之路！‘,
      desc: ‘关注java平台开发，前后端框架技术，分享前后端开发资源，服务端教程技术，菜鸟程序员！‘,
      link: ‘http://www.cuiyongzhi.com/‘,
      imgUrl: ‘http://res.cuiyongzhi.com/2016/03/201603201591_339.png‘,
      trigger: function (res) {
        alert(‘用户点击分享到QQ‘);
      },
      complete: function (res) {
        alert(JSON.stringify(res));
      },
      success: function (res) {
        alert(‘已分享‘);
      },
      cancel: function (res) {
        alert(‘已取消‘);
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert(‘已注册获取“分享到 QQ”状态事件‘);
  };
   
  // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
  onMenuShareWeibofunction () {
    wx.onMenuShareWeibo({
     title: ‘菜鸟程序员成长之路！‘,
      desc: ‘关注java平台开发，前后端框架技术，分享前后端开发资源，服务端教程技术，菜鸟程序员！‘,
      link: ‘http://www.cuiyongzhi.com/‘,
      imgUrl: ‘http://res.cuiyongzhi.com/2016/03/201603201591_339.png‘,
      trigger: function (res) {
        alert(‘用户点击分享到微博‘);
      },
      complete: function (res) {
        alert(JSON.stringify(res));
      },
      success: function (res) {
        alert(‘已分享‘);
      },
      cancel: function (res) {
        alert(‘已取消‘);
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert(‘已注册获取“分享到微博”状态事件‘);
  };
 
  // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
  onMenuShareQZonefunction () {
    wx.onMenuShareQZone({
      title: ‘菜鸟程序员成长之路！‘,
      desc: ‘关注java平台开发，前后端框架技术，分享前后端开发资源，服务端教程技术，菜鸟程序员！‘,
      link: ‘http://www.cuiyongzhi.com/‘,
      imgUrl: ‘http://res.cuiyongzhi.com/2016/03/201603201591_339.png‘,
      trigger: function (res) {
        alert(‘用户点击分享到QZone‘);
      },
      complete: function (res) {
        alert(JSON.stringify(res));
      },
      success: function (res) {
        alert(‘已分享‘);
      },
      cancel: function (res) {
        alert(‘已取消‘);
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert(‘已注册获取“分享到QZone”状态事件‘);
  };

③设备信息接口--这里是获取设备网络状态，以防在页面中存在视频或者大流量文件播放的时候对用户给出友好提示！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  // 3 设备信息接口
  // 3.1 获取当前网络状态
  getNetworkTypefunction () {
    wx.getNetworkType({
      success: function (res) {
        alert(res.networkType);
        var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
        if(networkType==‘3g‘){
            alert("您好，您的网络状态是3g网络，这里将播放视频文件会产生大流程!");
        }
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

④地理位置接口，这里包含查看经纬度对应的地图位置和获取当前位置的经纬度，可用做地图位置展示的第一步！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  // 4 地理位置接口
  // 4.1 查看地理位置
  openLocationfunction () {
    wx.openLocation({
      latitude: 23.099994,
      longitude: 113.324520,
      name: ‘TIT 创意园‘,
      address: ‘广州市海珠区新港中路 397 号‘,
      scale: 14,
      infoUrl: ‘http://weixin.qq.com‘
    });
  };
 
  // 4.2 获取当前地理位置
  getLocationfunction () {
    wx.getLocation({
      success: function (res) {
        alert(JSON.stringify(res));
      },
      cancel: function (res) {
        alert(‘用户拒绝授权获取地理位置‘);
      }
    });
  };

⑤界面操作接口，这里说的界面操作其实就是在微信浏览器中操作和改名的那右上角的【三个点】，对这里隐藏的菜单进行操作和关闭微信浏览器！

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
  // 5 界面操作接口
  // 5.1 隐藏右上角菜单
  hideOptionMenufunction () {
    wx.hideOptionMenu();
  };
 
  // 5.2 显示右上角菜单
  showOptionMenufunction () {
    wx.showOptionMenu();
  };
 
  // 5.3 批量隐藏菜单项
  hideMenuItemsfunction () {
    wx.hideMenuItems({
      menuList: [
        ‘menuItem:readMode‘, // 阅读模式
        ‘menuItem:share:timeline‘, // 分享到朋友圈
        ‘menuItem:copyUrl‘ // 复制链接
      ],
      success: function (res) {
        alert(‘已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮‘);
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
 
  // 5.4 批量显示菜单项
  showMenuItemsfunction () {
    wx.showMenuItems({
      menuList: [
        ‘menuItem:readMode‘, // 阅读模式
        ‘menuItem:share:timeline‘, // 分享到朋友圈
        ‘menuItem:copyUrl‘ // 复制链接
      ],
      success: function (res) {
        alert(‘已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮‘);
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };
 
  // 5.5 隐藏所有非基本菜单项
  hideAllNonBaseMenuItemfunction () {
    wx.hideAllNonBaseMenuItem({
      success: function () {
        alert(‘已隐藏所有非基本菜单项‘);
      }
    });
  };
 
  // 5.6 显示所有被隐藏的非基本菜单项
  showAllNonBaseMenuItemfunction () {
    wx.showAllNonBaseMenuItem({
      success: function () {
        alert(‘已显示所有非基本菜单项‘);
      }
    });
  };
 
  // 5.7 关闭当前窗口
  closeWindowfunction () {
    wx.closeWindow();
  };

⑥微信扫一扫接口，这个接口可以在页面调用微信的扫一扫功能，其中参数needResult可以设置扫描之后的处理方式；

1
2
3
4
5
6
7
8
  // 6 微信原生接口
 wx.scanQRCode({
    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});

以上是关于微信开发者 jssdk怎么使用的主要内容，如果未能解决你的问题，请参考以下文章

微信JSSDK使用指南

微信支付jssdk是做啥用的

如何在React中调用微信的jsSDK

Java微信公众平台开发(十五)--微信JSSDK的使用

学习历程微信jssdk使用

学习历程微信jssdk使用