快速搭建微信js-sdk开发环境。

最新推荐文章于 2024-05-08 18:24:08 发布

贝爷粉丝团

最新推荐文章于 2024-05-08 18:24:08 发布

阅读量4.9k

点赞数 1

分类专栏：小项目文章标签：微信js-sdk 公众号开发 javascript

本文链接：https://blog.csdn.net/u011495204/article/details/50895779

版权

小项目专栏收录该内容

0 篇文章 0 订阅

订阅专栏

利用国家标识平台快速搭建微信js-sdk开发环境

前言：微信几乎存在每台移动设备上，是一个不可忽视的流量入口，微信 js-sdk 的出现，让广大开发者可以调用微信原生功能，在微信上开发自己的应用。但是配置微信 js-sdk 开发环境对于前端初学者或者不太熟悉后台开发的开发者来说，是比较麻烦的，你需要获取签名，首先需要获取 jsspi_ticket ，获取 jsspi_ticket ，你又需要获取 access_token, 然而 jsspi_ticket 和 access_token 都是 2 小时内有效的，过期需要重新获取，你也不能频繁得获取，会出发频率限制导致不可用。除此之外，你还需要有一个安全域名，配置到公众号后台。

微信 js-sdk 开发者服务平台的主要功能就是为开发者管理这些东西，并提供安全域名。利用我们提供的接口，你可以一步获取可用的签名，快速配置微信 js-sdk 开发环境。发现 bug 或者有更多需求，欢迎直接回复此公众号哦，点击上面的作者，关注我们吧！

下面是微信 js-sdk 开发者服务平台的使用教程。

1.首先，浏览器打开国家标识平台下属的微信js-sdk开发者服务平台： http://weixin.cniotroot.cn ，并注册，登陆。

2.点击主页“我的微信js-sdk配置”按钮，进入后台，添加你的公众号信息，获取配置接口。

添加配置。记得把域名填写到你的微信公众号后台。ip是你的应用ip地址，这个域名将映射到这个地址。修改ip的话，10分钟内生效。

3.获取到你的配置接口，可以开始开发了！

具体示例代码： https://github.com/LanceCong/MyBlog/blob/master/weixin-js-sdk/example.md

给接口传递页面的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>