connect-miniprogram

A Connect and gRPC client for Weixin Miniprogram

适配小程序的 Connect 客户端。可以在小程序中使用 Connect 协议和 gRPC 协议的 API。

Connect is a family of libraries for building browser and gRPC-compatible HTTP APIs: you write a short Protocol Buffer schema and implement your application logic, and Connect generates code to handle marshaling, routing, compression, and content type negotiation. It also generates an idiomatic, type-safe client in any supported language.

Polyfill

Connect libraries relys on some APIs that not provided in Weixin environment.

Connect 依赖了一些微信小程序不支持的 API。所以需要引入 Polyfill。

API	Polyfilled by
Headers	mswjs/headers-polyfill
TextEncoder	samthor/fast-text-encoding
TextDecoder	samthor/fast-text-encoding

Method 1 Use "shimming" (recommended)

Use the bundlers "shimming" feature to replace all usage of Headers TextEncoder TextDecoder with the polyfill version. This is the recommended method because it doesn't pollute the global scope.

使用打包工具的 “Shimming” 功能替换代码中所有的 Headers TextEncoder TextDecoder。比较推荐这种方法，因为这样不会污染 global 对象。

Webpack:

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      Headers: ['connect-miniprogram/shims.js', 'HeadersPolyfill'],
      TextDecoder: ['connect-miniprogram/shims.js', 'FastTextDecoder'],
      TextEncoder: ['connect-miniprogram/shims.js', 'FastTextEncoder'],
    }),
  ],
};

Taro:

{
  webpackChain: (chain, webpack) => {
    chain.plugin('shimming').use(webpack.ProvidePlugin, [
      {
        Headers: ['connect-miniprogram/shims.js', 'HeadersPolyfill'],
        TextDecoder: ['connect-miniprogram/shims.js', 'FastTextDecoder'],
        TextEncoder: ['connect-miniprogram/shims.js', 'FastTextEncoder'],
      },
    ]);
  };
}

Method 1 Use "polyfill"

Import the polyfill at the start of your code:

在小程序代码最开头插入以下内容：

import 'connect-miniprogram/polyfill';

How to use 使用方法

The usage of this library is basically the same with @connectrpc/connect-web. You can click the link to read its doc. You can also clone the repo and try out the example-taro project.

使用方法跟 @connectrpc/connect-web 基本相同，你可以点击链接查看文档。你也可以克隆代码，用 example-taro 尝试。

import { createPromiseClient } from '@connectrpc/connect';
import {
  createConnectTransport,
  createGrpcWebTransport,
} from 'connect-miniprogram';
import { ElizaService } from '@buf/bufbuild_eliza.bufbuild_connect-es/buf/connect/demo/eliza/v1/eliza_connect';

const connectTransport = createConnectTransport({
  baseUrl: 'https://demo.connectrpc.com',
  // You need to mannualy pass the request function. You can also pass functions from 3rd party frameworks like `Taro.requst`, as long as they are compatible with Weixin's API
  request: wx.request,
});

// You can also use create a grpc-web transport. The usage is the same.
const grpcWebTransport = createGrpcWebTransport({
  baseUrl: 'https://demo.connectrpc.com',
  request: wx.request,
});

const client = createPromiseClient(ElizaService, connectTransport);

async function unary() {
  const res = await client.say({
    sentence: 'I feel happy.',
  });
  console.log(res);
}

async function serverStream() {
  for await (const res of client.introduce({ name: 'Joseph' })) {
    console.log(res);
  }
}

Limitations

• Doesn't support interceptor and contextValues option.
• Doesn't support signal option because Weixin doesn't have AbortSignal API.
• Doesn't support stream request body because either fetch or Weixin dosen't support sending stream request.