uniapp开发微信小程序使用物流服务的查询组件展示订单物流信息，以及使用中会遇到的问题

需求描述

自己开发的微信小程序商城，用户下单后如何像淘宝、京东等可以查看跟踪物流配送状态那，我们可以使用微信小程序自带的物流服务下的查询组件来实现，只需要简单配置即可跟踪同城配送订单状态以及快递物流的配送状态，如下图所示：

可以查看官方文档，不过文档是针对微信小程序的，下面我们就按照步骤，给大家说一下在uniapp中如何安装查询插件，可以实现微信小程序内查询物流订单。

1.组件权限开通

在小程序后台找到，支付与交易 -> 物流服务 -> 查询组件，点击开通，在弹窗选择开通即可，完成后即可使用该物流查询组件，可以看到查看接口文档查看具体的参数。

2.在uniapp项目中导入插件

如果使用的微信原生开发，那么就需要在小程序的app.json中声明，如果使用的uniapp开发的，那就需要在根目录下找到manifest.json -> 点击源码视图 -> 引入插件，如下图所示，在mp-weixin中写入如下代码：

javascript 复制代码

"plugins": {
	"logisticsPlugin": {
		"version": "2.1.12",
		"provider": "wx9ad912bf20548d92"
	}
}

3.在页面中使用

以下图为例，页面中有个"配送跟踪"的文本，点击的时候来查看物流轨迹，在当前页面中执行如下代码。

javascript 复制代码

//引入插件
const plugin = requirePlugin('logisticsPlugin');

//添加点击事件触发组件
<text @click="toDeliveryPage">配送跟踪</text>

//在方法中调用插件方法
const toDeliveryPage = async () => {
	try {		
		plugin.openWaybillTracking({
			waybillToken: ?????
		});
	} catch (err) {
		console.log(err);
	}
};

直接将上面代码拷贝至你的项目，重新编译有可能会报错：

MiniProgramError

This application has not registered any plugins yet.

Error: This application has not registered any plugins yet.

出现这个错误，可以删掉根目录下打包文件unpackage -> dist -> dev -> mp-weixin删掉这个文件夹，直接重新编译，应该就没有这个错误了。

4.调用微信后台API获得waybillToken值

我的后台使用unicloud，所以就在客户端调用云对象，调用api来查询微信快递服务详情获得waybillToken

javascript 复制代码

const { encryption } = require('xxm-wx-crypto');
async trace_waybill({ _id } = {}) {
	try {
		let {
			errCode,
			errMsg,
			data: order = {}
		} = await dbJQL.collection('JLJ-pay-order').doc(_id).field(`transport_info,transport_order,openid`).get({
			getOne: true
		});
		let { openid, transport_order = {}, transport_info = {} } = order;
		const waybill_id = transport_info.type === 0 ? transport_order.trans_order_id : transport_order.express_order_id;

		let { errcode, errmsg, waybill_token } = await encryption({
			url_path: 'https://api.weixin.qq.com/cgi-bin/express/delivery/open_msg/trace_waybill',
			openid: openid,
			receiver_phone: transport_info.user_phone,
			waybill_id
		});
		if (errcode != 0) return result({ errCode: 400, errMsg: 'error', custom: errmsg });
		return result({ errCode: 0, errMsg: 'success', data: { waybill_token } });
	} catch (err) {
		return result({ errCode: 500, errMsg: 'bug', custom: err });
	}
}

在上面云对象中使用了xxm-wx-crypto插件，去插件市场下载，按照文档调用微信后台API获取到waybillToken，在客户端就可以使用获取的值获得订单详情。

javascript 复制代码

const toDeliveryPage = async () => {
	try {		
		let { errCode, errMsg, data } = await orderCloudObj.trace_waybill({ _id: id });
		plugin.openWaybillTracking({
			waybillToken: data.waybill_token
		});
	} catch (err) {
		console.log(err);
	}
};

注意： 想要查看订单详情，不能在开发者工具查看，需要使用预览或者真机调试，才能看到跳转到物流订单轨迹详情。