为了帮助开发者通过视频号直播变现，微信官方提供了小程序接入视频号的能力。这算是一个新功能，也不能说是新开放的，因为从内测到半全量也有一段时间了。
这个小程序包含了在微信侧开的小商店，也包含了商户自己开发的小程序，对应上官方的词，就是标准版交易组件和自定义版交易组件。
当视频号和小程序打通之后，视频号所属的商业价值也渐渐体现出来了，视频号不仅可以给商家做品牌宣传，同时也能利用视频号为自己的小程序商城引流。
特别要说的是在视频号中开直播，还可以上架自己小程序的商品，用户在看直播的过程中点击商品链接直接跳到商家的小程序去下单，商家可以在自己开发的小程序上加入各种营销逻辑，可以说这个功能是万千想通过视频号直播卖货的小程序开发者所期盼已久的。
我们要说的是自定义版交易组件，按官方给的文档操作一遍，把流程记录下来，便能开通自定义版交易组件。
上传商品审核
准备好调用接口的工具，比如postman，接口地址：
https://api.weixin.qq.com/shop/spu/add?access_token=xxxxxxxxx
请求参数：
代码语言：javascript复制{
"out_product_id": "719",
"title": "毛毯百搭休闲珊瑚绒毯子100*150cm",
"path": "pages/productDetail/productDetail?id=719",
"head_img":
[
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/2262470a04834b81a6e35cd4ccea3022.png",
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/bfe16244f4bb4d38b26bb7aca797eac9.png",
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/0f9a584041a04872baf368c2278f5cbb.png",
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/0592d8b6b31e431d90096fd50a79fd3b.png",
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/613e7388c84c4bd4a8dde3f8f4077d6c.png"
],
"qualification_pics": [],
"desc_info":
{
"desc": "旅行毯办公室午睡毯空调毯子小被子",
"imgs":
[
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/a2d499638f0d41c1b63a6f3243895e11.png",
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/3fcf472a369b4353b53b6195dbe9c5ab.png",
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/cc6ae3d7bd8648dda51ece5d6a3486e3.png",
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/6a9c7bc9b5ab4284a1757289d8bba257.png",
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/84ecce2caa0d4920bccb8b046e176085.png",
"https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/1eb2d60219294f1d91c90d9f2984eb24.png"
]
},
"third_cat_id": 1445,
"brand_id": 2100000000,
"info_version": "1.0.0",
"skus":
[
{
"out_product_id": "719",
"out_sku_id": "27359029914",
"thumb_img": "https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/4c8666db52914f60aac3a1d9dc362cb0.png",
"sale_price": 990,
"market_price": 1990,
"stock_num": 200,
"sku_code": "sku27359029914",
"barcode": "9029914",
"sku_attrs":
[
{
"attr_key": "选择颜色",
"attr_value": "酒红"
},
{
"attr_key": "选择套装",
"attr_value": "100cm*150cm"
},
{
"attr_key": "选择面料",
"attr_value": "珊瑚绒毯"
}
]
},
{
"out_product_id": "719",
"out_sku_id": "27359029915",
"thumb_img": "https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/12164a04b6174c2ca363029e38541d33.png",
"sale_price": 990,
"market_price": 1990,
"stock_num": 300,
"sku_code": "sku27359029915",
"barcode": "9029915",
"sku_attrs":
[
{
"attr_key": "选择颜色",
"attr_value": "蓝色"
},
{
"attr_key": "选择套装",
"attr_value": "100cm*150cm"
},
{
"attr_key": "选择面料",
"attr_value": "珊瑚绒毯"
}
]
},
{
"out_product_id": "719",
"out_sku_id": "27359029916",
"thumb_img": "https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/86ce2ecdb9ef489ebfb62aa1634990db.png",
"sale_price": 990,
"market_price": 1990,
"stock_num": 400,
"sku_code": "sku27359029916",
"barcode": "9029916",
"sku_attrs":
[
{
"attr_key": "选择颜色",
"attr_value": "米黄"
},
{
"attr_key": "选择套装",
"attr_value": "100cm*150cm"
},
{
"attr_key": "选择面料",
"attr_value": "珊瑚绒毯"
}
]
},
{
"out_product_id": "719",
"out_sku_id": "27359029917",
"thumb_img": "https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/ea6957f402df49e587b19a3742befd53.png",
"sale_price": 990,
"market_price": 1990,
"stock_num": 500,
"sku_code": "sku27359029917",
"barcode": "9029917",
"sku_attrs":
[
{
"attr_key": "选择颜色",
"attr_value": "深灰"
},
{
"attr_key": "选择套装",
"attr_value": "100cm*150cm"
},
{
"attr_key": "选择面料",
"attr_value": "珊瑚绒毯"
}
]
}
]
}返回参数：
代码语言：javascript复制{"errcode":0,"errmsg":"","data":{"product_id":403741756,"out_product_id":"719","create_time":"2021-04-09 18:06:03","skus":[{"sku_id":332295576,"out_sku_id":"27359029914"},{"sku_id":332296576,"out_sku_id":"27359029915"},{"sku_id":332297576,"out_sku_id":"27359029916"},{"sku_id":332298576,"out_sku_id":"27359029917"}]}}看到这就说明商品上传成功了，如果没什么太大问题，几分钟就审核通过
了，如过有接入商品审核回调通知会收到回调通知，如果没有则可以调用获取商品接口查看结果，审核通过的商品默认上架。
下一笔订单
调用微信jsapi支付接口，生成唤起收银台所需参数，包括timeStamp、nonceStr、package、signType、paySign，支持普通支付和合单支付，注意，要接入微信支付回调哦，需要在回调中获取到transaction_id和支付时间pay_time，在同步订单的时候使用。不清楚微信支付的同学可以参考我以前发的文章，这里就不再说了。
前端小程序代码修改基础库配置以支持新的组件配置，在开发分支流程 app.json 中添加【"usingShopPlugin": true】参数设置，然后写一个调用收银台的方法，注意，和传统的支付不一样的是多了一个参数orderInfo，传的是订单数据。还有一个要提醒的是，orderInfo-"order_detail"-"pay_info"需要传入微信侧预付订单id即prepay_id和预付时间prepay_time
代码语言：javascript复制wx.requestOrderPayment({
timeStamp: '1617464449815',
nonceStr: '35ZR2CmUp2zF1wkb',
package: 'prepay_id=wx0923190624398bf8905108e4db42c80000',
signType: 'MD5',
paySign: 'D95618D55A23D90BF5878DFAE598034E',
orderInfo: {
"create_time": "2021-04-09 23:20:25",
"type": 0,
"out_order_id": "mg2021023009984231904112",
"openid": "omFMi5ZtFu9KXB9u9YL7UvOpoz7U",
"path": "/pages/order?out_order_id=mg2021023009984231904112",
"out_user_id": "273590",
"order_detail":
{
"product_infos":
[
{
"out_product_id": "719",
"out_sku_id":"27359029915",
"product_cnt": 2,
"sale_price": 2,
"path": "pages/productDetail/productDetail?id=719",
"title" : "蓝色-毛毯百搭休闲珊瑚绒毯子100*150cm",
"head_img": "https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/12164a04b6174c2ca363029e38541d33.png",
},
{
"out_product_id": "719",
"out_sku_id":"27359029916",
"product_cnt": 3,
"sale_price": 3,
"path": "pages/productDetail/productDetail?id=719",
"title" : "米黄-毛毯百搭休闲珊瑚绒毯子100*150cm",
"head_img": "https://cxy-1257372379.cos.ap-shanghai.myzijiebao.com/goods/goods_editor/20200908/86ce2ecdb9ef489ebfb62aa1634990db.png",
}
],
"pay_info": {
"pay_method": "微信支付",
"prepay_id": "wx0923190624398bf8905108e4db42c80000",
"prepay_time": "2021-04-09 23:19:06"
},
"price_info": {
"order_price": 6,
"freight": 1,
"discounted_price":1,
"additional_price": 1,
"additional_remarks": "税费"
}
},
"delivery_detail": {
"delivery_type": 1,
},
"address_info": {
"receiver_name": "大大",
"detailed_address": "福建省厦门市思明区莲前街道",
"tel_number": "18205980089",
"country": "中国",
"province": "福建",
"city": "厦门",
"town": "思明区莲前街道"
}
},
success (res) { },
fail (res) { }
})同步订单支付结果
当第二步成功的下了一笔订单之后，就要同步订单支付结果，
接口地址：
https://api.weixin.qq.com/shop/order/pay?access_token=xxxxxxxxx
请求参数：
代码语言：javascript复制{
"out_order_id": "mg2021023009984231904112",
"openid": "omFMi5ZtFu9KXB9u9YL7UvOpoz7U",
"action_type": 1,
"transaction_id": "4200000986923274282021040793",
"pay_time": "2021-04-09 23:21:43"
}顺利的话接口会返回成功，MP后台也会新收到一条如下的通知，恭喜你，到这一步，组件算是完成了接入。
接下来就是到视频号里面测试一下效果，先关联商家小程序，然后开一场直播，点击添加商品，就会出现刚刚上传已审核通过的商品，在直播的时候，用户点击该商品就会直接进入商家小程序进行下单操作了。
注意，完成这些操作后只是接入了组件，以后要直播带货，在开播前要上传好商品信息给微信侧审核，只有审核通过的商品才会添加进直播间带货，只有审核通过的商品才会添加进直播间带货，只有审核通过的商品才会添加进直播间带货，重要的事情说三遍。
至此，自定义版交易组件接入完成，快去直播带货吧。
上一篇：Vue整合element-china-area-data实现PC端省市区三级联动选择器
