本系列教程，以【中二少年工具箱】小程序为案例demo，具体效果请在微信中搜索该小程序查看。或在微信输入框输入 ==#小程序://中二少年工具箱/6buitXgPnjHV21r==
前言
在小程序的开发过程中，我们有很多场景需要借助小程序官方api实现效果。我们在查看小程序官方api时，经常会遇到几个名词：appid，secret、access_token 等，这些名词之间有什么关系？有没有一个清晰的脉络，让同学们学会如何使用所有官方api？
本文将会带大家彻底学会调用小程序官方api那些事。
一、官方api简介
微信小程序涉及登录、分享、支付等依托微信能力的便捷功能，都需要官方提供的api来实现。官方api让我们的小程序可以接入微信生态的大部分功能，具体可查阅微信小程序官方文档。
二、调用api概述
调用前，我们要首先了解几个关键的名词。
access_token ：调用官方api的凭证。调用官方api，需要一个凭证，在每次调用时将凭证作为参数携带，通知官方的服务器是正常的合法用户。
appid+secret：如果获取access_token这个凭证？需要appid+secret这个组合。我们申请作为微信小程序的开发者，官方就会给我们颁发一个appid，作为我们身份的唯一id认证。secret可以随时申请，申请新的后，旧的就会失效。这样就可以保证，当我们的access_token泄露后，可以再重新申请新的access_token。
所有的官方api都需要上面三个名词的配合，才可以获取调用权限。至于每个api还需要什么其他参数，需要查阅官网，这些参数没有什么特殊的，就和我们平时写的后端接口需要传入参数是一样的。
三、获取access_token
我们先查看官网对它的介绍：
access_token 是小程序全局唯一后台接口调用凭据，调用绝大多数后台接口时都需使用。开发者可以通过 getAccessToken 接口获取并进行妥善保存。
为了 access_token 的安全性，后端 API 不能直接在小程序内通过 wx.request 调用，即 api.weixin.qq.com 不能被配置为服务器域名。开发者应在后端服务器使用getAccessToken获取 access_token，并调用相关 API
上面的文档主要明确了几点：
1.access_token是官方api的调用凭据。
2.开发者可以通过getAccessToken接口获取access_token
3.为了安全，getAccessToken接口只能通过服务器环境（后端代码）调用，小程序内（本质是前端）无法直接调用。当然，web端肯定也是无法调用的。
根据官网中getAccessToken的接口文档，代码实现如下：
/**
* 微信小程序签发token*/
async getTokenWx(): Promise<any> {
const url = 'https://api.weixin.qq.com/cgi-bin/token';
const data = {
grant_type: 'client_credential',
appid: 'wx9cxxxxxxxxxxxxx',
secret: '66ba194xxxxxxxxxxxxxxxxxxxxx',
}
const result = await this.httpService.request({
url,
method: 'GET',
params: data,
})
return result.data
}
上面的代码是使用midwayjs框架实现的，写在service层。关键代码解析：
1.url ：官网提供的获取access_token的接口地址。
2.grant_type：授权类型，它为啥是client_credential这几个字母，我也不清楚，就是官方定义的一个规则，照写就行。
3.appid+secret：申请成为开发者时，官方提供的两个参数，可以标志开发者身份。
4.GET：上面的接口需要通过GET的方式调用。如果同学使用的不是内置的httpService，比如使用axios，应该参照axios插件的语法。
四、使用access_token调用官方api
下面以获取小程序码接口为例，我为大家讲解一个完整的调用官方api范例。强调一下：所有调用官方api的行为都在后端实现。
controller层如下：
/**
* 获取无限制的微信小程序码*/
@Post('/getWXACodeUnlimited')
async getWXACodeUnlimited(@Body('env_version') env_version:string){
// 获取微信token
const token = await this.authService.getTokenWx()
// 根据token获取小程序码
return await this.wxUserService.getWXACodeUnlimited(token.access_token,env_version)
}
代码解释：
1.@Post('/getWXACodeUnlimited')：定义接口的路由（接口名）
2.env_version：设置接口调用环境，调用获取小程序码接口时需要。
3.const token = await this.authService.getTokenWx()是上面章节中定义的service方法，获取到token对象，token中包含access_token的值和过期时间。利用过期时间，可以保存到redis缓存，减少访问频率，如果同学的项目和我的小程序一样没几个人访问，不用考虑过期时间这个参数，直接用就行。
4.this.wxUserService.getWXACodeUnlimited：调用方法getWXACodeUnlimited，获取小程序码。
getWXACodeUnlimited的service层实现：
/**
* 根据token获取微信小程序码
* @Param access_token - 微信token
* @Param env_version - 环境版本:develop,release
* */
async getWXACodeUnlimited(access_token: string, env_version: string) {
const url = 'https://api.weixin.qq.com/wxa/getwxacodeunlimit';
const cId = nanoid()
const data = {
scene: 'cId=' + cId,
page: 'pages/about/about',
env_version
}
const params = {
access_token
}
const result = await this.httpService.request({
url,
method: 'POST',
responseType: 'arraybuffer', // 指定响应类型为二进制数据
data,
params
})
return {
imgData: result.data,
cId
}
}
代码解释：
1.url ：官网提供的获取小程序码的接口地址。
2.data ：官网提供的，该接口body可以接收的参数。
3.params:官网明确提示，access_token只可作为url参数传递，不可以作为body参数。关于body参数和url参数的不同，大家可以自行查阅。这里为大家纠正一个误区，我们使用post方式调用接口时，使用更多的是body参数，是因为body参数的各种优势，并不意味着post方式的接口，无法传递url参数。
对应的官网参数解释如下：
4. cId：这是我自定义的一个参数，用来实现其他业务功能的，大家可以不用关心。
五、其他不需要access_token的官方api
上面已经提到，大部分官方接口调用都需要access_token，但是也有部分接口不需要access_token，比如登录接口，官网简介如下：
可以看到，这个接口并不需要access-token，只要提供appid、secret、js_code即可。
代码实现：
/*根据临时code，获取wx返回的登录信息*/
async getOpenidWx(userData:{code:string}): Promise<any> {
const url = 'https://api.weixin.qq.com/sns/jscode2session';
const data = {
appid: 'wx9cxxxxxxxxxxxxx',
secret: '66baxxxxxxxxxxxxxxxxxxxxxxxxxxx',
js_code: userData.code,
grant_type: 'authorization_code'
}
const result = await this.httpService.get(url, {params: data})
return result
}
上面的js_code参数是通过wx.login获取的临时code，我使用的uniapp框架，则是通过uni.login获取临时code。完整的登录功能可以另开文章讲解，这里只是以此为例，讲述官方api调用的方式。
总结
博主的大部分demo示例都会放到：中二少年学编程的示例项目。戳链接，查看示例效果。如果链接失效，请手动输入地址：lizetoolbox.top:8080/#/
本文知识点总结：
1.access_token获取方法
2.以access_token为凭证调用官方api接口
3.不以access_token为凭证调用官方api接口
有任何前端项目、demo、教程需求，都可以联系博主，博主会视精力更新，免费的羊毛，不薅白不薅！~
