Taro，前端如何对接微信物流查询插件

原创已于 2024-12-12 20:33:03 修改 · 930 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#taro #微信 #前端

于 2024-05-06 21:44:14 首次发布

微信小程序专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在Taro小程序中配置微信物流查询组件，包括在app.config.ts中的配置，处理因插件导致的打包体积问题，以及在项目中使用和遇到的常见错误及解决方法。

taro小程序开发对接微信物流查询组件（一切的基础在于后台配置了这个插件）

一、在app.config.ts中进行配置

由于插件的使用可能导致打包体积过大，采取分包加载的形式，将插件写入要使用的包中

export default defineAppConfig({
  pages: [
    'pages/home/default/index', 
    'pages/tab1/default/index', 
    'pages/tab2/default/index', 
    'pages/tab3/index', 
  ],
  subpackages: [
    {
      root: 'packageA',
      name: 'packageA',
      pages: [
        'project/index', 
        'project/video-play', 
      ],
    },
    {
      root: 'packageB',
      name: 'packageB',
      pages: [
        'address/index', 
        'address/addAddress/index', 
      ],
      // 添加插件需要授权使用
      plugins: {
        logisticsPlugin: {
          version: '2.2.19',
          provider: 'wx9ad912bf20548d92',
        },
      },
    },
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'xxxxxxxxx',
    navigationBarTextStyle: 'black',
  },
  tabBar: {
    position: 'bottom',
    selectedColor: '#44CBB4',
    borderStyle: 'black',
    list: [
      {
        pagePath: 'picUrl',
        text: '首页',
        iconPath: 'picUrl',
        selectedIconPath: 'picUrl',
      },
      {
        pagePath: 'picUrl',
        text: 'tab2',
        iconPath: 'picUrl',
        selectedIconPath: 'picUrl',
      },
      {
        pagePath: 'picUrl',
        text: 'tab3',
        iconPath: 'picUrl',
        selectedIconPath: 'picUrl',
      },
      {
        pagePath: 'picUrl',
        text: 'tab4',
        iconPath: 'picUrl',
        selectedIconPath: 'picUrl',
      },
    ],
  },

});

二、常见错误

在app.config.ts注册插件之后，再次运行yarn dev:weapp运行项目可能会遇到一些错误

TypeError: Function.prototype.apply was called on WeakMap.prototype.get, which is a string and not a function

解决这个错误安装qs指定版本即可

yarn add qs@6.9.6 / npm install qs@6.9.6 安装qs指定版本依赖包

三、使用

  import Taro, { requirePlugin } from '@tarojs/taro';
    const plugin = requirePlugin('logisticsPlugin');

  //此接口由后端提供
  const goLogistics = async (id) => {
    const { data } = await getDeliver({
      id: id, //订单id
      appid: '传入自己的appid',
    });
    const { waybill_token } = JSON.parse(data);
    // 物流插件
    plugin.openWaybillTracking({
      waybillToken: waybill_token,
    });
  };

ps: 物流查询插件只能查询通过微信支付的订单