引言

一、微信JSSDK简介

二、Vue项目接入微信JSSDK步骤

1. 准备工作

2. 引入JS文件

// 安装weixin-js-sdk
yarn add weixin-js-sdk

// 在所需页面的代码里导入
import wx from "weixin-js-sdk";

3. 注入权限验证配置

通过config接口注入权限验证配置,以下是示例代码:

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

4. 调用微信接口

wx.getLocation({
  type: 'wgs84', // 返回经纬度坐标类型
  success: function (res) {
    var latitude = res.latitude; // 纬度
    var longitude = res.longitude; // 经度
    // 使用经纬度坐标进行地图选点等功能
  }
});

三、实现原生交互体验

  • 地图选点
  • 拍照、选图
  • 语音识别
  • 分享
  • 扫一扫
  • 支付

四、总结