快速搭建微信js-sdk开发环境。
2016-03-15 13:54
639 查看
利用国家标识平台快速搭建微信js-sdk开发环境
[align=left]前言：微信几乎存在每台移动设备上，是一个不可忽视的流量入口，微信js-sdk的出现，让广大开发者可以调用微信原生功能，在微信上开发自己的应用。但是配置微信js-sdk开发环境对于前端初学者或者不太熟悉后台开发的开发者来说，是比较麻烦的，你需要获取签名，首先需要获取jsspi_ticket，获取jsspi_ticket，你又需要获取access_token,然而jsspi_ticket和access_token都是2小时内有效的，过期需要重新获取，你也不能频繁得获取，会出发频率限制导致不可用。除此之外，你还需要有一个安全域名，配置到公众号后台。[/align]
[align=left]微信js-sdk开发者服务平台的主要功能就是为开发者管理这些东西，并提供安全域名。利用我们提供的接口，你可以一步获取可用的签名，快速配置微信js-sdk开发环境。发现bug或者有更多需求，欢迎直接回复此公众号哦，点击上面的作者，关注我们吧！[/align]
[align=left][/align]
[align=left]下面是微信js-sdk开发者服务平台的使用教程。[/align]
[align=left][/align]
[align=left]1.首先，浏览器打开国家标识平台下属的微信js-sdk开发者服务平台：http://weixin.cniotroot.cn ，并注册，登陆。[/align]
2.点击主页“我的微信js-sdk配置”按钮，进入后台，添加你的公众号信息，获取配置接口。
添加配置。记得把域名填写到你的微信公众号后台。ip是你的应用ip地址，这个域名将映射到这个地址。修改ip的话，10分钟内生效。
[align=left]3.获取到你的配置接口，可以开始开发了！[/align]
[align=left]具体示例代码：https://github.com/LanceCong/MyBlog/blob/master/weixin-js-sdk/example.md[/align]
给接口传递页面的url，可以直接获取配置签名信息。
例如用ajax访问：http://weixin.cniotroot.cn/api/jssdk/d3gzODhlYTI1OTJmOTRmNzQ2LjA?url=window.location.href
得到json返回结果
{
timestamp:'',
nonceStr:'',
signature:''
}
配置到你的页面就行了。
如果需要用到access_token，可以通过接口获取，返回的json结果
{"access_token":""}
示例代码：https://github.com/LanceCong/MyBlog/blob/master/weixin-js-sdk/example.md
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
</body>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
$.ajax({
type:'GET',
//window.location.href是动态获取当前页面的url，不能写死，因为分享的时候微信会给你拼接东西
url:'http://weixin.cniotroot.cn/api/jssdk/********NzQ2LjA'+'?url='+window.location.href,
error:function(){
console.log('出错');
alert('请求出错');
},
success: function (data) {
console.log(data);
startConfig(data);
}
});
//开始配置微信js-sdk
var startConfig = function(data){
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
wx.config({
debug: true,
appId: '填写你的appid',
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
});
};
wx.ready(function () {
// 在这里调用 API
});
</script>
</html>
[align=left]前言：微信几乎存在每台移动设备上，是一个不可忽视的流量入口，微信js-sdk的出现，让广大开发者可以调用微信原生功能，在微信上开发自己的应用。但是配置微信js-sdk开发环境对于前端初学者或者不太熟悉后台开发的开发者来说，是比较麻烦的，你需要获取签名，首先需要获取jsspi_ticket，获取jsspi_ticket，你又需要获取access_token,然而jsspi_ticket和access_token都是2小时内有效的，过期需要重新获取，你也不能频繁得获取，会出发频率限制导致不可用。除此之外，你还需要有一个安全域名，配置到公众号后台。[/align]
[align=left]微信js-sdk开发者服务平台的主要功能就是为开发者管理这些东西，并提供安全域名。利用我们提供的接口，你可以一步获取可用的签名，快速配置微信js-sdk开发环境。发现bug或者有更多需求，欢迎直接回复此公众号哦，点击上面的作者，关注我们吧！[/align]
[align=left][/align]
[align=left]下面是微信js-sdk开发者服务平台的使用教程。[/align]
[align=left][/align]
[align=left]1.首先，浏览器打开国家标识平台下属的微信js-sdk开发者服务平台：http://weixin.cniotroot.cn ，并注册，登陆。[/align]
2.点击主页“我的微信js-sdk配置”按钮，进入后台，添加你的公众号信息，获取配置接口。
添加配置。记得把域名填写到你的微信公众号后台。ip是你的应用ip地址，这个域名将映射到这个地址。修改ip的话，10分钟内生效。
[align=left]3.获取到你的配置接口，可以开始开发了！[/align]
[align=left]具体示例代码：https://github.com/LanceCong/MyBlog/blob/master/weixin-js-sdk/example.md[/align]
给接口传递页面的url，可以直接获取配置签名信息。
例如用ajax访问：http://weixin.cniotroot.cn/api/jssdk/d3gzODhlYTI1OTJmOTRmNzQ2LjA?url=window.location.href
得到json返回结果
{
timestamp:'',
nonceStr:'',
signature:''
}
配置到你的页面就行了。
如果需要用到access_token，可以通过接口获取，返回的json结果
{"access_token":""}
示例代码：https://github.com/LanceCong/MyBlog/blob/master/weixin-js-sdk/example.md
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
</body>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
$.ajax({
type:'GET',
//window.location.href是动态获取当前页面的url，不能写死，因为分享的时候微信会给你拼接东西
url:'http://weixin.cniotroot.cn/api/jssdk/********NzQ2LjA'+'?url='+window.location.href,
error:function(){
console.log('出错');
alert('请求出错');
},
success: function (data) {
console.log(data);
startConfig(data);
}
});
//开始配置微信js-sdk
var startConfig = function(data){
/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
wx.config({
debug: true,
appId: '填写你的appid',
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
});
};
wx.ready(function () {
// 在这里调用 API
});
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02：一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享