手把手教你快速打通微信小店跟小程序

通过自12月19日微信小店开始内测“送礼物”功能以来，业界对微信电商市场的关注度急剧上升。品牌和商家不仅关注如何入驻和运营，还特别关注如何与小程序实现深度融合，为了解决这一需求，云开发也推出微信小店小程序解决方案。

动手之前的准备工作

点击腾讯云控制台，开通云开发-微搭服务

https://console.cloud.tencent.com/lowcode/overview/index申请微信开放平台注册小程序资质

https://mp.weixin.qq.com/开通微信小店并上架产品

已获取到需要带货的小店及商品信息（主要是店铺appid、商品id）下载微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html微信小店小程序开发实战

一、绑定小程序授权登录到微搭后台服务，进入小程序开发认证页面

微搭提供的小程序认证包含扫码授权认证和全托管认证，一个腾讯云账号仅能选择一种认证方式。首次扫码授权认证小程序时，需要腾讯云主账号操作（在账号中心更新登录方式）。全托管认证小程序不依赖腾讯云主账号的操作权限。

个人使用，可以直接选择扫码授权，服务商和开发商可以选择全托管认证

认证成功后，认证状态会显示授权成功。

二、安装小店模板和数据模板进入云开发平台的模板中心，选择“小程序跳转微信小店”模板，进行安装。

安装完成后，进入云数据库页面，可以看到两张微信小店的数据表。

三、搭建小程序和管理后台点击可视化开发，选择从空白创建

可以选择用AI构建或自行构建方式来搭建小店小程序能力。

3.1 通过AI能力构建页面在编辑器右侧使用云开发Copilot，通过AI对话的方式生成页面。例如，输入“生成一个微信小店首页，添加商品列表”

AI生成后，对效果如不满意，可以多生成数次，或针对性局部进行手工调整。

3.2 可视化搭建有自定义构建需求的客户，也可以直接用组件搭建。

添加页面，选择小店组件，拖拽小店的相关组件自行搭建页面布局和相关内容。

3.3 绑定商品数据以AI生成的页面为例，页面选择商品列表组件，在左侧大纲树找到数据列表节点

选择数据模型

‍选择之前生成「商品配置」数据表。‍

左侧大纲树，在数据列表下级找到小店商品，点击小店appid右侧“fx”按钮。

‍选择对应内容，在循环对象中找到“当前项值”，点击后在末尾添加.appid 。该步骤是将后台数据库查出的数据进行绑定的过程，其中appid字段是小店的店铺appid字段。‍

商品id绑定同上，选择商品id右侧“fx”按钮，展开后找到循环对象中的“当前项值”

点击后在末尾添加.product_id（此步骤为从后台数据库查出的数据进行绑定，product_id字段是小店内的商家商品id字段）

3.4 发布小程序（直接构建小程序）调整好页面，如图勾选好小程序，点击右上角发布按钮，进行发布。

发布完成后后，会提醒需要提交审核，此步骤为微信官方的小程序审核，提交审核通过后，可正式发布。

3.5 发布小程序（集成到现有小程序代码）

微搭构建的小店页面可以嵌入现有小程序中，使用发布中导出代码包，即可下载微搭构建的小程序页面代码包，然后导入到微信开发者IDE，原小程序的代码工程中即可使用。

3.6 构建商品数据管理应用

云开发平台支持通过数据表一键生成管理应用，找到微信小店商品配置数据表，点击”生成应用“

弹出提示，点击确认

点击PC预览，查看管理后台的效果，无问题后，直接点击发布按钮

发布完成后即可访问对应管理后台链接。

3.7配置域名

部分客户有自己的小程序域名，可以在通过微搭服务接入。选择「环境配置」的「HTTP访问服务」的定义域名，点击“添加域名“按钮。

添加域名，然后将域名解析到分配的cname。解析成功后即可将域名+路径的方式和构建的小程序或者数据管理后台应用绑定。

于是，通过三个步骤，我们就得到了一个关微信小店的入口小程序和对应的商品数据管理后台，可以快速将广告投流、社群运营、会员管理等多场景与微信小店打通，将流量转化为交易啦~

目前，模板中心也支持第三方开发者为商家提供定制化服务，欢迎各位企业服务商和个人开发者投稿上架。

感兴趣的朋友们可点击”阅读原文“上手体验，也可以留言说出你的业务需求哦