一.实现只能在微信中打开页面
先对浏览器的UserAgent进行正则匹配，将不含有微信独有标识的视为其他浏览器；
如果不是则弹出警告框，阻止页面继续加载，并强行关闭页面；
方法如下：
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
alert('已禁止本次访问：您必须使用微信内置浏览器访问本页面！');
var opened = window.open('about:blank', '_self');
opened.opener = null;
opened.close();
}
二. 了解如何得到用户信息：
详见微信公众平台开发文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432
第一步：根据appid和app_secret获取access_token
注：大写的部需要填写对应的值。
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
grant_type=client_credential为必填项；
第二步：获取授权，得到用户基本信息
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
wechat_redirect:如果直接在微信打开链接，可以不填此参数；如果需要重定向则必须要加上，它会引导页面指向其中redirect_uri代表的授权后回调的地址；
state:不是必填项，但是可以将能用得到的参数写进去。方便获取；
scope:值为snsapi_base时只能获取access_token和openID，不弹出确认授权信息的页面；值为snsapi_userinfo时可以获取更详细的用户资料，比如头像、昵称、性别等，但需用户点击并确认授权。
因为微信api获取用户信息的接口是通过传入的appid和access_token的值来获取的，所以可以实现不经过用户授权从而获取到用户的一些基本信息。并保存在数据库中
以下是根据token以及用户的openid获取用户基本信息的方法
https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
三.正式开发步骤
第一步：申请测试号
网址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
完善接口域名及授权回调页面域名
接口域名示例：
点击修改填入回调域名：
第二步：在页面引入JS文件，样式也一并引入
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.0/weui.min.css">
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.1/weui.min.js"></script>
weui包含表单、基础组件、操作反馈等内容，详见https://weui.io/
第三步:在页面添加配置信息
x.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，
jsApiList: [] // 必填，需要使用的JS接口列表，如图片选择，图片上传，图片预览等
});
还需要添加ready接口处理成功验证：
wx.ready(function() {
var title = '致力于打造专业精准的变速箱数据查询系统';
var desc = '油品匹配，用量，技师建议，换油位置及接头，换油养护套件等信息图例应有尽有，让变速箱养护不再困难';
wx.checkJsApi({
jsApiList: ['chooseImage','previewImage'], // 需要检测的JS接口列表
success: function(res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
});
error接口处理失败验证：
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
alert("errorMSG:"+res.err_msg);
});
第四步:调用所需的接口
接下来就可以根据需求来调用相应的接口了。
接口参考微信JS-SDK说明文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
这里举个例子，选择图片接口。
wx.chooseImage({
count: 4, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
toAddImgDiv(localIds,areaId)
}
});
网友评论