微信JS-SDK调用文档

转载

mb5fe55acf14b1a 2021-08-19 16:21:00

微信JS-SDK调用文档

1 什么是微信JS-SDK

微信JS-SDK是微信公众平台^①面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

①微信公众平台:管理服务号、订阅号、小程序的后台管理平台

2 微信JS-SDK使用环境

微信JS-SDK是基于微信浏览器使用，所以只能在微信内打开链接或者是小程序才可调用微信JS-SDK。下文将介绍在vue中如何引入微信JS-SDK，以公众号为例子。

3 开发环境准备

3.1 内网穿透工具

在开发过程中，微信需要和调试页面有通讯，所以要求调试的网页通过外网也可访问，考虑到公司开发都在内网环境，所以需要内网穿透工具，将内网IP映射成对外可访问的域名。在这里推荐使用Ngrok工具。推荐理由:免费。

参考文档地址

3.2 公众号后台准备

①登录微信公众平台，进入【设置与开发】-->【基本配置】，获取开发者ID。后续会用到。

微信JS-SDK调用文档_公众号

②进入【设置与开发】-->【公众号设置】-->【功能设置】，配置JS接口安全域名。配置域名后，公众号开发者才可在该域名下调用微信开放的JS接口。需要注意的是每个月只有5次修改机会。

微信JS-SDK调用文档_公众号_02

微信JS-SDK调用文档_扫一扫_03

③进入【设置与开发】-->【开发者工具】-->【web开发者工具】绑定自己的微信账号。

微信JS-SDK调用文档_微信js_04

3.3 微信开发者工具

微信开发者工具是为了方便开发者们在PC端调试页面的工具，简单点说可以是PC版的微信浏览器，也是开发调试必备工具。

①工具下载地址

②常用功能如下图

微信JS-SDK调用文档_公众号_05

4 在vue中安装js-sdk

①npm安装jweixin-js

npm install weixin-js-sdk

②使用jweixin-js

import wx from "weixin-js-sdk";

5 调用扫一扫功能

①所有使用JS-SDK的页面必须先注入配置信息wx.config()，这里可以参考JS-SDK说明文档的步骤三

微信JS-SDK调用文档_微信_06

②wx.config()需要以下几个参数

debug ：自己填写，测试环境中可以开启，生产环境中需要关闭
appId：本文3.2中有提及appid的获取途径
timestamp：制作签名时的时间戳
nonceStr：制作签名的随机串
signature：签名，微信提供了签名算法，点进附录1可见，拉到页面最底下有加密demo可供下载使用。简单来说签名由SHA1加密（url+timestamp+nonceStr+jsapi_ticket）组成。考虑到jsapi_ticket是会过期的，并且有使用次数，所以我们后端定时访问微信接口获取jsapi_ticket储存在redis中，再做一个接口，前端通过接口给后端传入url，由后端进行加密后返回给前端timestamp、nonceStr、signature
jsApiList: []：页面需要用到的JS接口

③考虑到将来可能很多页面都需要调用微信扫一扫，所以将微信的接口封装成js文件。页面使用时只需要调用封装好的接口就好了，代码如下。

import wx from "weixin-js-sdk";
import { apiGetWeiChatSign } from "@/api/common"; //后端做好的接口，访问这个接口可获取到相对应的签名、时间戳、随机串

//注入微信配置
export function getWxConfig(url, jsApiList, debug = false) {
  var tempAppId = "自己的AppId";
  var tempUrl = { url: url };
  apiGetWeiChatSign(tempUrl)
    .then(response => {
      wx.config({
        debug: debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: tempAppId, // 必填，公众号的唯一标识,可从公众号后台获取
        timestamp: response.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: response.data.nonceStr, // 必填，生成签名的随机串
        signature: response.data.signature, // 必填，签名
        jsApiList: jsApiList // 必填，需要使用的JS接口列表
      });
    })
    .catch(() => {
      alert("微信配置失败，请联系管理员!");
    });
}

//调用微信扫一扫
export function getWxSanQRCode(scanType, callback, needResult = 1) {
  wx.scanQRCode({
    needResult: needResult, // 0：扫描结果由微信处理，1：直接返回扫描结果
    scanType: scanType, // 一维码：barCode，二维码：qrCode。scanType:["qrCode","barCode"]
    success: callback, //调用接口成功时
    fail: function() {
      alert("扫码启动失败，请联系管理员!");
    }
  });
}

④页面调用封装好的扫一扫功能