小猴云印微应用接入文档

一、安装

安装小猴云印微应用 sdk

npm install @xhyyfe/wxmp-sdk

二、配置

小程序配置

域名相关配置请联系我们！

三、接入

通过小程序 webview 组件进入微应用。

代码参考示例：

<!-- .wxml -->
<web-view src="{{url}}" bindmessage="onmessage"></web-view>

// js
import Xhyy from "@xhyyfe/wxmp-sdk";

let xhyy;
let resolver;

Page({
  data: {
    url: "",
  },
  onLoad() {
    xhyy = new Xhyy({
      // 当前小程序appid
      appid: "xxx",
      // 指定环境 test | production
      env: "test",
      // 1.9.0版本后废弃
      version: "1.0.0",
      // 首页标题 可选 默认值"小猴云印"
      title: "xxx",
      // 首页banner图 可选 数组每一项为图片链接
      banner: ["xxx", "xxx"],
      // 主题配置 可选 json配置文件url
      theme: "https://xxx.com/theme.json",
    });

    // 当微应用页面发生跳转会触发entry回调
    xhyy.entry((url) => this.setData({ url }));

    // 事件监听委派
    // 若传入相应事件将覆盖微应用本身默认行为，可在事件处理函数中自定义处理
    xhyy.on({
      // 支付成功事件：result.orderId(订单ID)
      "pay-success": (result) => console.log(result),
      // 支付失败事件: error(失败原因) result.orderId(订单ID) result.isCancel(是否为用户取消支付)
      "pay-fail": (error, result) => console.log(error, result),
    });

    // 访问页面
    xhyy.access({
      // 从服务端接口获取授权码 详细说明见"授权"
      // 首次进入必传，授权成功后在一定时间内后续访问页面可不传
      code: "xxx",
      // 渠道id 可选
      channelId: "xxx",
      // 指定进入的页面(名称)
      // 目前支持直跳页面有：
      // files(文件列表),orders(订单列表),order(订单详情),address(地址列表),
      // price(价格列表),problem(常见问题),protocol(隐私协议)
      // pay-success(支付成功),pay-fail(支付失败)
      // zip(压缩包上传打印)
      to: "files",
      // 通过对象形式传递，只有以下列出页面支持页面参数
      to: {
        // 订单列表
        name: "orders",
        params: {
          // 控制进入时，初始tab所在位置
          status_type: "pay", // ''(全部)  pay(待付款)  print(待打印)  express(待收货)  succ(已完成)  reissue(退款/售后)
        },
      },
      to: {
        // 订单详情
        name: "order",
        params: {
          // 订单号
          orderId: "xxx",
        },
      },
      to: {
        // 文件列表
        name: "files",
        params: {
          // 带入需要打印的文件，files(对象数组类型) name(带后缀文件名) url(文件链接)
          files: [{ name: "xxx.pdf", url: "https://xxx.com/xxx.pdf" }],
        },
      },
      to: {
        // 支付成功
        name: "pay-success",
        params: {
          // 订单号
          orderId: "xxx",
        },
      },
      to: {
        // 支付失败
        name: "pay-fail",
        params: {
          // 订单号 可选
          orderId: "xxx",
        },
      },
      to: {
        // 压缩包上传打印
        name: "zip",
        params: {
          // 带后缀文件名
          name: "xxx",
          // 文件链接(支持.zip, .rar, .7z)
          url: "xxx",
        },
      },
    });

    // 创建微应用消息解析器
    resolver = xhyy.createResolver();
  },
  onmessage(event) {
    resolver(event);
  },
});

注：此示例以简单方式实现，实际可将 xhyy 实例对象从单独模块导出，在 webview 页面导入使用。

注：此示例以微信小程序原生代码实现，如用框架或其他编译技术实现，可遇到不兼容问题，可采用混编方式。

四、授权

接入方实现

1. 接入方需实现生成"code"的接口，作为授权获取用户信息的凭证。
2. 接入方需实现授权接口，应用方通过"code"凭证调用授权接口获取用户信息。用户信息需包含以下字段：

| 字段名 | 字段类型 | 长度限制 | 是否必填 | 字段说明 | | -------- | -------- | -------- | -------- | ------------------------------------ | | errcode | int | 无 | 否 | 错误码，0 表示正确，其他错误码自定义 | | errmsg | string | 无 | 否 | 错误消息自定义 | | appid | string | 25 | 是 | 小程序 appid | | openid | string | 100 | 是 | 用户 openid | | mobile | string | 15 | 是 | 用户手机号 | | nickname | string | 25 | 否 | 用户昵称 | | avatar | string | 255 | 否 | 用户头像图片链接 |

注：在进入微应用前需提前获取以上必填字段相关信息。