结构调整->前后端接口统一

结构调整

为了个小程序叠加上我们proto的类型需要引入第三方的包，为了引入第三方的包，需要对小程序的目录结构做一个调整，调整之后，就可以很方便的构建npm，引入一下ts，js的库。

所有目录的路径都是以miniprogram为根目录

步骤1：把typings下面的index.d.ts内容复制到miniprogram目录下，取名可以为appoptions.ts

步骤2：删除

步骤3：将其它的都移动到miniprogram目录下

步骤4：将所有目录为miniprogram/配置都删除，或者改为./

步骤5：删除tsconfig.json里面的typeRoots属性，可以根据npm拉下来的typing来定义。

步骤6：在小程序的文件夹安装protobufjs

在微信开发工具中重新导入项目，选择miniprogram目录打开。

npm install protobufjs

步骤7：在miniprogram目录下创建如下文件夹，用来放protojs。

步骤8：在server/proto/gen.bat编辑下面代码用来生成ts，js文件

protoc -I=. --go_out=plugins=grpc,paths=source_relative:gen/go trip.proto
protoc -I=. --grpc-gateway_out=paths=source_relative,grpc_api_configuration=trip.yaml:gen/go trip.proto

set PBTS_BIN_DIR= ..\..\wx\miniprogram\node_modules\.bin
set PBTS_OUT_DIR=..\..\wx\miniprogram\service\proto_gen

%PBTS_BIN_DIR%\pbjs -t static -w es6 trip.proto --no--create --no--decode --no--verify --no--delimited -o %PBTS_OUT_DIR%/trip_pb.js

%PBTS_BIN_DIR%\pbts -o %PBTS_OUT_DIR%/trip_pb.d.ts %PBTS_OUT_DIR%/trip_pb.js

运行结果，只能运行使用变量的第一行命令，不知第如何解决，可以自己复制在cmd中再运行第二行命令。

步骤9：在微信开发工具中，在本地设置中勾选使用npm模块，在工具菜单中选择构建npm项目。并且在生成的trip_pb.js文件夹中假如下面代码。

import * as $protobuf from "protobufjs";

成功！

测试

步骤10：开启服务的，用下面代码测试：

wx.request({
      url:"http://localhost:8080/trip/123",
      method: "GET",
      success: res =>{
        // coolar.GetTripResponse.fromObject就是生成的ts代码
        const getTripResponse = coolar.GetTripResponse.fromObject(res.data as object)
        console.log(getTripResponse)
      },
      fail: console.log,
    })

可以发现这里面有些字段没有获取到，这是因为驼峰命名和下划线命名的问题。

步骤11：修改下面代码：

//mux := runtime.NewServeMux(runtime.WithMarshalerOption(
//		runtime.MIMEWildcard, &runtime.JSONPb{
//			MarshalOptions: protojson.MarshalOptions{UseEnumNumbers: true, //UseProtoNames: true}},
//	))
mux := runtime.NewServeMux(runtime.WithMarshalerOption(
		runtime.MIMEWildcard, &runtime.JSONPb{
			MarshalOptions: protojson.MarshalOptions{UseEnumNumbers: true, UseProtoNames: false}},
	))

但是网络上的rest属性命名格式是下划线命名。恢复步骤11的修改，改为true。

步骤12：在小程序端安装camelcase-keys，并使用。

npm install camelcase-keys

wx.request({
      url:"http://localhost:8080/trip/123",
      method: "GET",
      success: res =>{
        // coolar.GetTripResponse.fromObject就是生成的ts代码
        const getTripResponse = coolar.GetTripResponse.fromObject(
            camelcaseKeys(res.data as object, {
                deep:true,
            }))
        console.log(getTripResponse)
      },
      fail: console.log,
    })

步骤13：需要再次构建npm

可以接收到数据。成功！

步骤14：将status：2转有效信息

console.log("status is", coolar.TripStatus[getTripResponse.trip?.status!])

这一系列的工作都是为了可以用.就可以得到各种方法，属性（在服务端我们定义的trip.proto）。这样极大方便前后端对接口的理解和统一化

miniprogram_npm这里面的就是用到的包，是需要打包到客户端的

.gitignore里面加下面配置

wx/miniprogram/**/*.js
!**/wx/miniprogram/service/proto_gen/*.js

node_modules
miniprogram_npm

Property ‘getUserProfile‘ does not exis t on type ‘Wx‘ 问题解决

由于版本的问题导致的，升级版本。

npm run tsc

抛出以下错误

修改package.json文件，提升选项“miniprogram-api-typings”的版本

npm install
npx tsc