The previous two articles explained the development process of the front-end docking WeChat official account web page, pre-configuration and front-end docking WeChat official account web page development process, authorization docking , this article explains the use of WeChat JSSDK, the official document address
1. Inject permission verification configuration through the config interface
All pages that need to use JS-SDK must first inject configuration information, otherwise they will not be able to call, the same url only needs to be called once, the parameters required for config injection are debug, appid, timestamp, nonceStr, signature, jsApiList, except for debug and jsApiList Several items need to be returned by the interface, because there cannot be plaintext parameters in the code. Of course, the front-end also has a way to obtain it. If it is used to test the front-end, it can also be obtained. Later articles will talk about it
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: ['chooseImage','getLocation'] // 必填，需要使用的 JS 接口列表
});
If the injection is successful, the following data will be returned
Second, the use of the interface
First of all, the use of interface methods must be the first step to succeed. Here are a few examples about the use of methods. For more methods, please refer to the official documentation
1. Interface for taking pictures or selecting pictures from the mobile phone album
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地 ID 列表，localId可以作为 img 标签的 src 属性显示图片
}
});
2. Preview picture interface
wx.previewImage({
current: '', // 当前显示图片的 http 链接
urls: [] // 需要预览的图片 http 链接列表
});
3. Get the geographic location interface
wx.getLocation({
isHighAccuracy: true, //返回高精度位置
type: 'gcj02', // 默认为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; // 位置精度
}
});