微信小程序常用操作

1、登录

wx.login（）

登录是常用的操作，这里面有几个函数在网上比较流行的现在已经失效了。

1、wx.getUserInfo函数

2、wx.getUserProFile函数

2022.12月份起 两个已经失效,目前微信小程序手册给出的官方方法是通过wx.login 进行解决，

wx.login({
            success: (res) => {
            console.log(e);
            }
        })

通过wx.login函数获取到小程序的code

获得code后 通过官方提供的wx.request()回调函数到后端指定链接，传值code 让服务器访问``code2Session接口获取openid 并返回到小程序，登录状态通过storage来存储. 官方提供的小程序端界面如下：

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        },
        success:(result)=>{
            //此处填写成功获取返回值的验证状态。storage
        }

      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

code2session接口

code2Session接口通过GET模式调用：

GET https://api.weixin.qq.com/sns/jscode2session 

请求参数为：

属性	类型	必填	说明
appid	string	是	小程序 appId
secret	string	是	小程序 appSecret
js_code	string	是	登录时获取的 code，可通过wx.login获取
grant_type	string	是	授权类型，此处只需填写 authorization_code

返回参数为：

属性	类型	说明
session_key	string	会话密钥
unionid	string	用户在开放平台的唯一标识符，若当前小程序已绑定到微信开放平台帐号下会返回，详见 UnionID 机制说明。
errmsg	string	错误信息
openid	string	用户唯一标识
errcode	int32	错误码

调用示例

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 

返回数据为：

{
"openid":"xxxxxx",
"session_key":"xxxxx",
"unionid":"xxxxx",
"errcode":0,
"errmsg":"xxxxx"
}

如此通过上述流程就可以成功获取openid 进一步进行注册或者判断。

code2session接口的返回错误码如下：可以对应查找问题。

错误码	错误码取值	解决方案
40029	code 无效	js_code无效
45011	api minute-quota reach limit mustslower retry next minute	API 调用太频繁，请稍候再试
40226	code blocked	高风险等级用户，小程序登录拦截 。风险等级详见用户安全解方案
-1	system error	系统繁忙，此时请开发者稍候再试

官方提供的流程图：

几个注意事项：

说明
1.调用 wx.login()获取 临时登录凭证code ，并回传到开发者服务器。
2.调用 auth.code2Session 接口，换取 用户唯一标识OpenID、 用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 session_key。
之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

注意事项
1.会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。
2.临时登录凭证 code 只能使用一次

相关的通知

关于规范使用小程序 wx.login 接口获取登录凭证 (code) 的通知

---

根据平台设计，开发者通过 wx.login 接口获取 code 后需要调用 服务端接口 auth.code2Session ，将 code 换取 openid、unionid、session_key 等信息。但目前存在部分开发者不规范使用 code，通过在小程序中获取的 code 换取 网页授权 access_token。

为规范接口使用，自 2023 年 1 月 8 日 14 时起，开发者通过小程序中获取的 code 将无法换取网页授权 access_token ，返回错误码为 40242 。请存在不规范使用的开发者关注并及时调整，避免对业务造成影响。

2、网络传值

1、wx.request

网络传值是小程序非常重要的一块，类似vue。

网络传值非常重要的函数wx.request

官方文档提供的实例代码：

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址,
  mothed:"GET",
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

在传值过程中有几个要注意的地方：

1、关注POST请求和GET请求的区别

实例代码中 header是GET请求使用，而POST请求则应该是：（详见官方文档的data参数说明）

header: {
   'Content-Type': 'application/x-www-form-urlencoded'
   },

同时，要注意接收端的路由使用POST。这里要记载下我的笨事。

我写了一个测试小程序，代码和后端thinkphp6我怎么查找都没有找出问题，但是重要一传送，控制台就反馈控制器找不到。而改成GET就成功传值。这个问题困扰了我整整一天，甚至在想是不是官方以后不让用POST了。最终发现在路由界面我用的是Route::get（）定义的路由，改成Route::post()后成功传值。

该函数参数和值文档提供如下表格说明：

参数 Object object

	属性	类型	默认值	必填	说明	最低版本
	url	string		是	开发者服务器接口地址
	data	string/object/ArrayBuffer		否	请求的参数
	header	Object		否	设置请求的 header，header 中不能设置 Referer。 content-type 默认为 application/json
	timeout	number		否	超时时间，单位为毫秒。默认值为 60000	2.10.0
	method	string	GET	否	HTTP 请求方法
	合法值说明OPTIONSHTTP 请求 OPTIONSGETHTTP 请求 GETHEADHTTP 请求 HEADPOSTHTTP 请求 POSTPUTHTTP 请求 PUTDELETEHTTP 请求 DELETETRACEHTTP 请求 TRACECONNECTHTTP 请求 CONNECT
	dataType	string	json	否	返回的数据格式
	合法值说明json返回的数据为 JSON，返回后会对返回的数据进行一次 JSON.parse其他不对返回的内容进行 JSON.parse
	responseType	string	text	否	响应的数据类型	1.7.0
	合法值说明text响应的数据为文本arraybuffer响应的数据为 ArrayBuffer
	enableHttp2	boolean	false	否	开启 http2	2.10.4
	enableQuic	boolean	false	否	开启 quic	2.10.4
	enableCache	boolean	false	否	开启 cache	2.10.4
	enableHttpDNS	boolean	false	否	是否开启 HttpDNS 服务。如开启，需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见 移动解析HttpDNS	2.19.1
	httpDNSServiceId	string		否	HttpDNS 服务商 Id。 HttpDNS 用法详见 移动解析HttpDNS	2.19.1
	enableChunked	boolean	false	否	开启 transfer-encoding chunked。	2.20.2
	forceCellularNetwork	boolean	false	否	wifi下使用移动网络发送请求	2.21.0
	success	function		否	接口调用成功的回调函数
	fail	function		否	接口调用失败的回调函数
	complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

	属性	类型	说明	最低版本
	data	string/Object/Arraybuffer	开发者服务器返回的数据
	statusCode	number	开发者服务器返回的 HTTP 状态码
	header	Object	开发者服务器返回的 HTTP Response Header	1.2.0
	cookies	Array.<string>	开发者服务器返回的 cookies，格式为字符串数组	2.10.0
	profile	Object	网络请求过程中一些调试信息，查看详细说明	2.10.4

object.fail 回调函数

参数 Object err

属性	类型	说明	最低版本
errMsg	String	错误信息
errno	Number	errno 错误码，错误码的详细说明参考 Errno错误码	2.24.0

返回值

RequestTask

基础库 1.4.0 开始支持，低版本需做兼容处理。

请求任务对象

data 参数说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

• 对于 GET 方法的数据，会将数据转换成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
• 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
• 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

2、RequestTask

很少使用，如需使用则到官方手册查询

RequestTask.abort()
中断请求任务

RequestTask.onHeadersReceived(function listener)
监听 HTTP Response Header 事件。会比请求完成事件更早

RequestTask.offHeadersReceived(function listener)
移除 HTTP Response Header 事件的监听函数

RequestTask.onChunkReceived(function listener)
监听 Transfer-Encoding Chunk Received 事件。当接收到新的 chunk 时触发。

RequestTask.offChunkReceived(function listener)
移除 Transfer-Encoding Chunk Received 事件的监听函数

示列代码

const requestTask = wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '' ,
    y: ''
  },
  header: {
    'content-type': 'application/json'
  },
  success (res) {
    console.log(res.data)
  }
})
requestTask.abort() // 取消请求任务

3、wx.downloadFile

wx.downloadFile({
  url: 'https://example.com/audio/123', //仅为示例，并非真实的资源
  success (res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      wx.playVoice({
        filePath: res.tempFilePath
      })
    }
  }
})

本函数参数如下

Object object

属性	类型	默认值	必填	说明	最低版本
url	string		是	下载资源的 url
header	Object		否	HTTP 请求的 Header，Header 中不能设置 Referer
timeout	number		否	超时时间，单位为毫秒	2.10.0
filePath	string		否	指定文件下载后存储的路径 (本地路径)	1.8.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

Object res

	属性	类型	说明	最低版本
	tempFilePath	string	临时文件路径 (本地路径)。没传入 filePath 指定文件存储路径时会返回，下载后的文件会存储到一个临时文件
	filePath	string	用户文件路径 (本地路径)。传入 filePath 时会返回，跟传入的 filePath 一致
	statusCode	number	开发者服务器返回的 HTTP 状态码
	profile	Object	网络请求过程中一些调试信息，查看详细说明	2.10.4

profile 说明

结构属性		类型说明
redirectStart	number	第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0
redirectEnd	number	最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为 0
fetchStart	number	组件准备好使用 HTTP 请求抓取资源的时间，这发生在检查本地缓存之前
domainLookupStart	number	DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
domainLookupEnd	number	DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
connectStart	number	HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等。注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
connectEnd	number	HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等。注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间。注意这里握手结束，包括安全连接建立完成、SOCKS 授权通过
SSLconnectionStart	number	SSL建立连接的时间,如果不是安全连接,则值为 0
SSLconnectionEnd	number	SSL建立完成的时间,如果不是安全连接,则值为 0
requestStart	number	HTTP请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存。连接错误重连时，这里显示的也是新建立连接的时间
requestEnd	number	HTTP请求读取真实文档结束的时间
responseStart	number	HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
responseEnd	number	HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
rtt	number	当次请求连接过程中实时 rtt
estimate_nettype	number	评估的网络状态 unknown, offline, slow 2g, 2g, 3g, 4g, last/0, 1, 2, 3, 4, 5, 6
httpRttEstimate	number	协议层根据多个请求评估当前网络的 rtt（仅供参考）
transportRttEstimate	number	传输层根据多个请求评估的当前网络的 rtt（仅供参考）
downstreamThroughputKbpsEstimate	number	评估当前网络下载的kbps
throughputKbps	number	当前网络的实际下载kbps
peerIP	string	当前请求的IP
port	number	当前请求的端口
socketReused	boolean	是否复用连接
sendBytesCount	number	发送的字节数
receivedBytedCount	number	收到字节数
protocol	string	使用协议类型，有效值：http1.1, h2, quic, unknown

返回值

DownloadTask

基础库 1.4.0 开始支持，低版本需做兼容处理。

一个可以监听下载进度变化事件和取消下载的对象

4、UploadTask

方法

UploadTask.abort()

中断上传任务

UploadTask.onProgressUpdate(function listener)

监听上传进度变化事件

UploadTask.offProgressUpdate(function listener)

移除上传进度变化事件的监听函数

UploadTask.onHeadersReceived(function listener)

监听 HTTP Response Header 事件。会比请求完成事件更早

UploadTask.offHeadersReceived(function listener)

移除 HTTP Response Header 事件的监听函数

const uploadTask = wx.uploadFile({
  url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
  filePath: tempFilePaths[0],
  name: 'file',
  formData:{
    'user': 'test'
  },
  success (res){
    const data = res.data
    //do something
  }
})

uploadTask.onProgressUpdate((res) => {
  console.log('上传进度', res.progress)
  console.log('已经上传的数据长度', res.totalBytesSent)
  console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
})

uploadTask.abort() // 取消上传任务

5、wx.uploadFile

上传图片等 wx.chooseImage

//示例代码
wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

功能描述

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。

参数Object object

属性	类型	默认值	必填	说明	最低版本
url	string		是	开发者服务器地址
filePath	string		是	要上传文件资源的路径 (本地路径)
name	string		是	文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
header	Object		否	HTTP 请求 Header，Header 中不能设置 Referer
formData	Object		否	HTTP 请求中其他额外的 form data
timeout	number		否	超时时间，单位为毫秒	2.10.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数 Object res

属性	类型	说明
data	string	开发者服务器返回的数据
statusCode	number	开发者服务器返回的 HTTP 状态码

返回值 UploadTask

基础库 1.4.0 开始支持，低版本需做兼容处理。

一个可以监听上传进度进度变化的事件和取消上传的对象

6、其他方式见手册

WebSocket、mDNS、TCP 通信、UDP 通信

3、跳转

1、wx.redirectTo

功能描述

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.redirectTo({
  url: 'test?id=1'
})

2、wx.navigateTo

功能描述

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
events	Object		否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
eventChannel	EventChannel	和被打开页面进行通信

示例代码

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过 eventChannel 向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})


//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听 acceptDataFromOpenerPage 事件，获取上一页面通过 eventChannel 传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

3、wx.switchTab

功能描述

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

// app.json
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}

wx.switchTab({
  url: '/index'
})