|
|
@@ -0,0 +1,137 @@
|
|
|
+### 前言
|
|
|
+小程序http请求响应的protobuf的方法已经封装好了，下面是使用方式
|
|
|
+
|
|
|
+### 第一步：重新生成proto的js文件
|
|
|
+
|
|
|
+举一个栗子：
|
|
|
+后端提供了一个新的接口，他的protobuf请求和返回的message是：
|
|
|
+
|
|
|
+```protobuf
|
|
|
+//登录请求 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的key的命名要按照驼峰命名原则，要不然会出问题。**
|
|
|
+
|
|
|
+然后把这一段直接copy到项目目录下的proto文件夹下的xxx.proto文件中去
|
|
|
+
|
|
|
+然后使用以下命令生成bunble.js文件，**注意每次改变了proto文件都要通过下面命令重新生成一下js文件**
|
|
|
+
|
|
|
+```cmd
|
|
|
+npx pbjs -t static-module -w commonjs -o proto/bundle.js proto/*.proto
|
|
|
+```
|
|
|
+
|
|
|
+### 第二步：coding request message的编码和response message的解码
|
|
|
+在common下protoMap.js里面添加请求message的编码方法，和响应message的解码方法
|
|
|
+
|
|
|
+```js
|
|
|
+//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
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 第三步：在页面中调用接口
|
|
|
+
|
|
|
+```js
|
|
|
+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);
|
|
|
+})
|
|
|
+```
|
|
|
+多接口串联调用：举个栗子
|
|
|
+
|
|
|
+```js
|
|
|
+async function someFun(){
|
|
|
+ let res1 = await post({
|
|
|
+ server:2,
|
|
|
+ servant:1005,
|
|
|
+ data:{ ......}
|
|
|
+ })
|
|
|
+ let res2 = await post({
|
|
|
+ server:2,
|
|
|
+ servant:911,
|
|
|
+ data:{ var1:res1.data.somefield,
|
|
|
+ ......}
|
|
|
+ })
|
|
|
+ }
|
|
|
+```
|
|
|
+封装的接口返回的是promise对象，promise的用法可以去https://developer.mozilla.org/zh-CN/ 搜索
|
|
|
+
|
|
|
+最后示例代码已经提交到http://60.205.190.38:9000/MiniProgram/MqttDemo
|
|
|
+
|
|
|
+
|
|
|
+
|
houjie