使用样例:
//使用jssdk
useJssdk(){
let href= window.location.href.split('#')[0]
let that=this
$.ajax({
url:'${base}/resources/common/js/getJsSDKConfig',
data:{
url:href}
}).then(res=>{
console.log(res)
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.appId, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature,// 必填,签名
jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表
});
wx.error(function (res) {
console.log('wxerr',res)
});
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (ads) {
that.lat = ads.latitude; // 纬度
that.lng = ads.longitude; // 经度
that.getTradingInfo()(个人封装的获取信息代码)
},
});
});
})
},
注意事项:
中JSSDK
如果只是使用wx.miniProgram.navigateTo这种导航的接口,jssdk可以不用做配置,引用js后直接使用就行,如果chooseImage这种,就需要获取配置了,步骤如下:
先在后端通过AppID和AppSecret取到access_token,并缓存access_token
再通过access_token获取到jsapi_ticket,jsapi_ticket的值也要缓存
使用jsapi_ticket、当前URL、随机字符串、1970年1月1日00:00:00至今的秒数生成签名及及配置,返回给前端,签名记得使用https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign校验是否正确
前端拿到config后放到wx.config里执行
在wx.ready中注册事件
步骤比较多但是并不复杂,主要是这其中几个坑需要避开别踩到:
AppID和AppSecret不能用小程序的,要用公众号的,否则会报invalid url domain的错误,官方文档上并没有说明这一点,所以这个坑非常深非常隐蔽,另外这个公众号要不要与小程序关联还不清楚,我用的是关联的。
签名用到的当前URl不要解码,拿到的是什么就用什么,否则即使签名校验通过也会报签名错误
如果你用了chooseImage这个api,需要获取到选择的图片的话,官方文档上说是在success的tempFilePaths参
Bug & Tip
tip:网页内 iframe 的域名也需要配置到域名白名单。
tip:开发者工具上,可以在 web-view 组件上通过右键 - 调试,打开 web-view 组件的调试。
tip:每个页面只能有一个 web-view,web-view 会自动铺满整个页面,并覆盖其他组件。
tip:web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
tip:在 iOS 中,若存在JSSDK接口调用无响应的情况,可在 web-view 的 src 后面加个#wechat_redirect解决。
tip:避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent里,实际上并不是,是在localIds里面