小程序使用protobuf.md 4.1 KB

前言

小程序http请求响应的protobuf的方法已经封装好了,下面是使用方式

第一步:重新生成proto的js文件

举一个栗子: 后端提供了一个新的接口,它的protobuf请求和返回的message是:

//登录请求 1005
message login_req
{
    bytes  phone            = 1;
    uint32 type             = 2;//登录类型,1:密码登录,2:验证码登录
    bytes  verifyInfo      = 3;//1密码,2验证码
    int64  time				= 4;//纳秒,游客登陆用的
    uint32 systemType      = 5;//系统类型,0全部,1:ios,2:android

}

//登录响应 1006
message login_rsp {
    ErrorInfo errInfo  = 1; // 错误码信息
    uint32   id       = 2;
    bytes    token    = 3; // 访问令牌
    bytes sskey       = 4;
}

注意 不要直接copy过来,message的field的命名要按照驼峰命名原则,要不然会出问题。

然后把这一段直接copy到项目目录下的proto文件夹下的xxx.proto文件中去

然后使用以下命令生成bunble.js文件,注意每次改变了proto文件都要通过下面命令重新生成一下js文件

npx pbjs -t static-module -w commonjs -o proto/bundle.js proto/*.proto

第二步:coding request message的编码和response message的解码

在common下protoMap.js里面添加请求message的编码方法,和响应message的解码方法

//1005 是后端提供的此接口的servant
protoMap['1005'] = {
	requestEncode: function(request) { //登录请求的编码
		//创建login_req的message对象
		let loginMessage = user.login_req.create({
			type: request.data.type,
			//如果phone定义的是bytes,这里要转换一下,
			//如果phone定义的是string,这里就不需要Buffer.from了
			//要确认phone是string类型,才能把phone的bytes更换成string
			phone: Buffer.from(request.data.phone),
			//同phone,在proto文件中字段名(verifyInfo)最好用驼峰命名规则,不要用verify_info
			verifyInfo: Buffer.from(request.data.verifyInfo),
		})
		//login_req的message 编码转换为Buffer数据
		let buffer = user.login_req.encode(loginMessage).finish()
		//返回请求的ArrayBuffer
		return getRequestBuffer(request,buffer)
	},
	responseDecode: function(response) { //登录响应的解码
		//得到loginRsp message的buffer数据
		let loginRspBuf = getResponseDataBuf(response)
		//解码得到loginRsp的message对象
		let loginRspMessage = user.login_rsp.decode(loginRspBuf)
		//把loginRsp Message对象转换为js对象
		let obj = user.login_rsp.toObject(loginRspMessage, {
			longs: String,
			enums: String,
		})
		//如果proto定义的字段是bytes,在这里可以转换成一下String
		//也可以直接在proto文件中把字段的bytes 类型 替换成string类型,
		//但是要确认这个字段是string类型的,string类型在这里就不需要转换了
		if(typeof obj.errInfo.errorMessage !== 'undefined'){
			obj.errInfo.errorMessage = Buffer.from(obj.errInfo.errorMessage).toString()
		}
		if(typeof obj.token !== 'undefined'){
			obj.token = Buffer.from(obj.token).toString()
		}
		return obj
	}
}

第三步:在页面中调用接口

import post from '../../common/httpClient.js'
post({
	server:2,//后端提供的此接口的server
	servant:1005,//后端提供的此接口的servant
	data:{
		phone:'13246541321',//对应loginReq的phone字段
		type:1,//同上
		verifyInfo:'asdasd'//同上
	}
})
.then((res) =>{
	/* res的结构
	  {
		  code:0,错误码 number类型
		  msg:"",错误消息 string类型
		  data:对应loginRsp的js对象
	  }
	 */
	if(res.code === 0){//成功
		
	}else{
		//失败
	}
}, (err) => {//出现异常
	console.log(err);
})

多接口串联调用:举个栗子

async function someFun(){
	  let res1 = await post({
		  server:2,
		  servant:1005,
		  data:{ ......}
	  })
	  let res2 = await post({
		  server:2,
		  servant:911,
		  data:{ filed1:res1.data.somefield,
		  ......}
	  })
	}

封装的接口返回的是promise对象,promise的用法可以去https://developer.mozilla.org/zh-CN/ 搜索

最后示例代码已经提交到http://60.205.190.38:9000/MiniProgram/MqttDemo