前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >终于打通了视频号跳小程序，直播带货搞起来

终于打通了视频号跳小程序，直播带货搞起来

原创
作者头像
悟空码字
修改于 2021-04-12 10:32:53
2.7K0
修改于 2021-04-12 10:32:53
举报
文章被收录于专栏：悟空码字，程序人生悟空码字，程序人生

为了帮助开发者通过视频号直播变现，微信官方提供了小程序接入视频号的能力。这算是一个新功能，也不能说是新开放的，因为从内测到半全量也有一段时间了。

这个小程序包含了在微信侧开的小商店，也包含了商户自己开发的小程序，对应上官方的词，就是标准版交易组件和自定义版交易组件。

当视频号和小程序打通之后，视频号所属的商业价值也渐渐体现出来了，视频号不仅可以给商家做品牌宣传，同时也能利用视频号为自己的小程序商城引流。

特别要说的是在视频号中开直播，还可以上架自己小程序的商品，用户在看直播的过程中点击商品链接直接跳到商家的小程序去下单，商家可以在自己开发的小程序上加入各种营销逻辑，可以说这个功能是万千想通过视频号直播卖货的小程序开发者所期盼已久的。

我们要说的是自定义版交易组件，按官方给的文档操作一遍，把流程记录下来，便能开通自定义版交易组件。

上传商品审核

准备好调用接口的工具，比如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.myqcloud.com/goods/goods_editor/20200908/2262470a04834b81a6e35cd4ccea3022.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/bfe16244f4bb4d38b26bb7aca797eac9.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/0f9a584041a04872baf368c2278f5cbb.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/0592d8b6b31e431d90096fd50a79fd3b.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/613e7388c84c4bd4a8dde3f8f4077d6c.png"
    ],
    "qualification_pics": [],
    "desc_info": 
    {
        "desc": "旅行毯办公室午睡毯空调毯子小被子",
        "imgs": 
        [
            "https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/a2d499638f0d41c1b63a6f3243895e11.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/3fcf472a369b4353b53b6195dbe9c5ab.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/cc6ae3d7bd8648dda51ece5d6a3486e3.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/6a9c7bc9b5ab4284a1757289d8bba257.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.com/goods/goods_editor/20200908/84ecce2caa0d4920bccb8b046e176085.png",
"https://cxy-1257372379.cos.ap-shanghai.myqcloud.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.myqcloud.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.myqcloud.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.myqcloud.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.myqcloud.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.myqcloud.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.myqcloud.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端省市区三级联动选择器

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

微信小程序音视频
小程序·云开发
java

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

微信小程序音视频
小程序·云开发
java
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
免费体验产品介绍产品文档
精选特惠 用云无忧
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2024 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论