准备工作
微信接口测试号 申请地址
微信开发者工具
授权登录
流程
前端引导用户授权(跳转授权链接)
var APPID = 'wx32fewr344' // 公众号的appid
var REDIRECT_URI = 'http://127.0.0.1:8081/VDS/wechat/auth.html' // 重定向的页面,请求微信授权页面后,微信服务端重定向的页面,微信会在这个页面的url后面加上code
var SCOPE = 'snsapi_userinfo'
var STATE = 'ddgr56'
var AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
+ APPID + '&redirect_uri=' + REDIRECT_URI + '?url=$URL' + '&response_type=code&scope=' + SCOPE + '&state=' + STATE + '#wechat_redirect'
// 授权
function auth(url) {
window.location.href = getAuthUrl(url)
}
上一步返回一个code,把code传回服务端
服务端通过code,请求微信服务器,拿到 access_token 和 openid
一般,服务端返回openid给前端,授权成功
注意
公众号配置网页授权域名,此域名必须是客户端配置的回调地址的域名,只需要域名,不能带‘http’
正式的公众号不能用ip
微信jssdk使用前置条件
配置接口安全域名
此域名是需要使用微信jssdk的页面的域名
通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
获取signature
前端传递3个参数到后端 timestamp 时间戳 nonceStr: 随机字符串 url: 需要调用jssdk接口的页面url
后端先请求微信服务器获取jsapi_ticket(每次签名时,都需要这个参数,所以,这个参数需要服务端保存起来,过期前不用每次请求)
后端对前端传回的参数进行签名(算法查文档),得到signature,返回给前端
注意
这里是引用获取jsapi_ticket,需要一个参数 access_token, 但是这个 access_token和授权登录的 access_token不一样!!!!! 通过下面的接口获得
1
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=KaTeX parse error: Expected 'EOF', got '&' at position 8: {appId}&̲secret={secret}
关于nonceStr参数,前端是大写S 后端是小写s !!!!!
定位 (wx.getLocation)
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
}
});
注意事项
关于type参数,如果需要使用第三方地图服务反向获取地址,需要正确设置这个值(具体看第三方地图服务需要的坐标类型)
如果要获取地址,可以使用腾讯位置服务的 逆地址解析
上面接口需要使用jsonp请求,并设置 output 为 ‘jsonp’ !!
获取图片
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}
});
获取图片接口返回的数据转base64
wx.getLocalImgData({
localId: '', // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
}
});
在ios上面,这个接口返回的是base64的图片,可以直接显示
ios上面返回的头部是 data:image/jgp 可以替换成 data:image/jpeg 防止出现兼容问题
android上,返回的数据不包含头部,需要手动添加
- android上,返回的数据可能包含换行,需要去掉换行
```js
wx.getLocalImgData({
localId: localIds[i],
success: function (res) {
var localData = res.localData;
if (localData.indexOf('data:image') != 0) {
localData = 'data:image/jpeg;base64,' + localData
}
localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
showImage(localData)
}
});