0. 前言
这个拥有超2亿用户的移动应用已不仅仅是个“通讯工具”，它正在让你的移动生活变得更加有趣。但完成这个使命的除了微信本身，还有那“千姿百态”的微信公众账号。当然，对于前端人员来说幸福不是这些，而是微信公众号里的那些供开发者使用的接口，可以让我们开发的手机APP显得更加高大上！
timg.jpg
1. 简介
首先，先注册一个微信公众号，微信平台为大家提供了公众号丶服务号丶订阅号三种服务平台。
公众号：公众号是开发者或商家在微信公众平台上申请的应用账号，该帐号与QQ账号互通，通过公众号，商家可在微信平台上实现和特定群体的文字丶图片丶语音丶视频的全方位沟通丶互动 ，公众号包括服务号和订阅号
服务号：是公众平台的一种账号类型，旨在为用户服务。
订阅号：是公众平台的一种账号类型，旨在为用户提供信息和资讯。
微信JS-SDK
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
那么向网页开发者介绍微信JS-SDK如何使用及相关注意事项。
如何使用及注意事项
JSSDK使用步骤
步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
图片.png
设置JS接口安全域名
注意最后一条，每个月保存的次数是有限的，保存需谨慎，切记！！！
图片.png
这里你可能看不太懂，什么ICP备案验证啊什么的，没事，别担心，这都不是事啊，我们可以用新浪云提供的云应用SAE，我们用 Git命令 把代码提交到新浪云上。
还有一个重点就是第三条下载那个txt文件放在你的项目根目录中即可，什么都不要改
图片.png
备注：登录后可在“开发者中心”查看对应的接口权限。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
图片.png
如需使用摇一摇周边功能，请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载，也就是 模块化管理
步骤三：通过config接口注入权限验证配置
注意
-
所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
-
如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
这里要把你的index.html转换成index.php，因为解析JSSDK要用到php格式，当然你不这样写也行，要不你就用模块化管理的方式写。
图片.png
还得在你的文档头前加入下面一段话
<?php
error_reporting(E_ERROR);
require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();
?>
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
这里的yourAppID、yourAppSecret分别是你的应用ID和应用密匙
图片.png
那应用密匙，你没有的话，就一步步按照它说的来就可以，生成应用密匙。
然后通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
步骤四：通过ready接口处理成功验证
wx.ready(function(){
/* config信息验证后会执行ready方法，所有接口调用都必须在config接
口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面
加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确
执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。*/
});
步骤五：通过error接口处理失败验证
wx.error(function(res){
/*config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以
打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。*/
});
2. 代码实现
那么我们今天就实现一个简单的demo，可以实现相机或相册、内置地图、获取手机网络状态、扫一扫。
简单的演示
样式代码
<?php
error_reporting(E_ERROR);
require_once "jssdk.php";
$jssdk = new JSSDK("wx1bcfe2d18e7d8f0b", "ffbf6fb64ce8a08e39f48e586931a726");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box div{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 50px auto;
background-color: red;
color: white;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="box">
<div>相册或相机</div>
<div>使用内置地图</div>
<div>获取手机网络状态</div>
<div>扫一扫</div>
</div>
</body>
</html>
图片.png
Javascript代码
<script type="text/javascript">
wx.config({
debug: true,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
//相册或相机
'chooseImage',
//打开内置地图
'openLocation',
//查看网络状况
'getNetworkType',
//扫一扫
'scanQRCode'
]
});
wx.ready(function () {
// 在这里调用 API
var div1 = document.querySelector("#box :nth-of-type(1)"),
div2 = document.querySelector("#box :nth-of-type(2)"),
div3 = document.querySelector("#box :nth-of-type(3)"),
div4 = document.querySelector("#box :nth-of-type(4)");
//相册或相机
div1.onclick = function () {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}
});
}
//使用内置地图
div2.onclick = function () {
wx.openLocation({
latitude: 39.9046363143,
longitude: 116.4071136987,
name: '北京 故宫',
address: '北京长安街xxx号',
scale: 10,
infoUrl: 'http://weixin.qq.com'
});
}
//获取手机网络状态
div3.onclick = function () {
wx.getNetworkType({
success: function (res) {
var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
}
});
}
//扫一扫
div4.onclick = function () {
wx.scanQRCode({
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});
}
});
</script>
最后就完成了，因为是在手机上测试，我就发不了动态图了，如果你有什么好的方法，请告诉我啊，但是我生成了一个二维码，微信扫一下，查看一下最后的效果
图片.png
如果我有一天把新浪云里的应用删了，那么这个二维码就失效了，你就看不到效果了，见谅！
3. 结束语
希望我写的文章对你有所帮助，如果你有什么好大的建议，也可以告诉我，记得点赞，分享啊！！！
网友评论