专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

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

ins518 2024-11-27 15:15:58 技术文章 12 ℃ 0 评论

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

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表