前端对接微信公众号网页开发流程，JSSDK使用

前面两篇文章讲解了前端对接微信公众号网页开发流程，前期配置和前端对接微信公众号网页开发流程，授权对接，本篇文章讲解关于微信JSSDK的使用，官方文档地址

一、通过 config 接口注入权限验证配置

所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用，同一个 url 仅需调用一次，config注入所需参数有debug、appid、timestamp、nonceStr、signature、jsApiList，除了debug和jsApiList其他几项都需接口返回，因为代码中不能有明文参数出现，当然前端也有办法获取，如果是用来测试前端也可以获取，后面的文章会讲到

wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['chooseImage','getLocation'] // 必填，需要使用的 JS 接口列表
});

注入成功会返回以下数据
在这里插入图片描述

二、接口的使用

首先接口方法的使用必须是第一步能成功。下面举几个关于方法使用的例子，更多方法可参考官方文档

1.拍照或从手机相册中选图接口

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
  		// 返回选定照片的本地 ID 列表，localId可以作为 img 标签的 src 属性显示图片
  }
});

2.预览图片接口

wx.previewImage({
  current: '', // 当前显示图片的 http 链接
  urls: [] // 需要预览的图片 http 链接列表
});

3.获取地理位置接口

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; // 位置精度
  }
});