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

Posted 2023-01-09 不靠谱的作曲家

前面两篇文章讲解了前端对接微信公众号网页开发流程，前期配置 和 前端对接微信公众号网页开发流程，授权对接，本篇文章讲解关于微信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; // 位置精度
  
);