一、公众号账号

网页中要使用微信的功能，首先得有个公众号(订阅号或服务号),用于各种配置，不同的公众号类型具备不同的接口权限，详情见 https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html

image.png

开发时，如果你的公众号还未认证，导致一些接口权限还不能使用，可以用微信提供的测试号开发，测试账号可以使用测试微信公众平台所有高级接口，测试号获取步骤如下：
1、登录微信公众平台
2、进入 开发--开发者工具，点击 公众平台测试账号

image.png
image.png

获取到 测试账号后，页面中有关于服务器、JS安全接口等配置及体验的权限列表，有了这些，就可以继续配置 开发了。

二、网页授权

网页授权获取用户基本信息：通过该接口，可以获取用户的基本信息（获取用户的OpenID是无需用户同意的，获取用户的基本信息则需用户同意）
官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

官方文档步骤说的很清楚，这里简单说下步骤

1、首先需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。 测试账号在体验接口权限表中设置

测试账号设置位置

2、用户同意授权，获取code

引导客户点开以下网址
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_re
用户同意后页面会自动跳转到配置的域名，并携带code值，后续步骤请协同后端按照官方文档处理

三、微信JS-SDK的引用

微信JS-SDK：是开发者在网页上通过JavaScript代码使用微信原生功能的工具包，开发者可以使用它在网页上录制和播放微信语音、监听微信分享、上传手机本地图片、拍照等许多能力。
官方文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
具体步骤如下

1、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

正式号 测试号

2、引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

vue 开发 可安装 weixin-jsapi

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

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

除了jsApiList字段，其他字段请让合作的后端提供接口返回给你，签名算法让你的后端小伙伴看这里 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

4、通过ready接口处理成功验证

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

以vue为例 可在 App.vue中配置如下

import wx from 'weixin-jsapi';

mounted() {
    this.wxInit();
},

methods: {
    wxInit(res) {  // res: 后端小伙伴返回给你的 
        const url = location.href.split('#')[0];
        wx.config({
          debug: false,
          appId: res.appId,
          timestamp: res.timestamp,
          nonceStr: res.nonceStr,
          signature: res.signature,
          jsApiList: ['startRecord', 'stopRecord', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'onVoicePlayEnd', 'onVoiceRecordEnd'],
        });
        wx.ready(function () { 

        }
   },
}

config配置好后，就可以正常使用jssdk的接口了 如:

methods: {
  record() {  // 录音方法
    wx.startRecord();
  }
}