零门槛搭建微信抖音双平台小程序社交分享带货实操技术指南

一、前期准备：10分钟搞定必要账号与工具

核心工具全开源或免费试用，不需要复杂编程基础，全程按步骤走即可。

1.1 申请免费开发账号

• 微信小程序账号：https://mp.weixin.qq.com/，注册个人类目（带货类目可后续升级，先快速上线测试），注册完成后获取AppID、AppSecret
• 抖音小程序账号：https://developer.open-douyin.com/，同样注册个人开发者，注册后绑定身份证号获取AppID、AppSecret、Key

1.2 安装开发工具

• 微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，选择对应系统（Windows/Mac/Linux）版本下载安装
• 抖音开发者工具：https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/developer-instrument/download/developer-instrument-download，选择对应系统版本下载安装
• VS Code编辑器（可选但推荐，处理代码更方便）：https://code.visualstudio.com/，默认安装即可

二、快速搭建基础框架：20分钟完成双端复用90%代码

使用开源模板，代码已适配微信+抖音双端，复制粘贴改3个地方就能生成基础首页。

2.1 下载并导入双端模板

模板下载地址：https://github.com/tencentcloud/mpvue-demo-douyin/releases/tag/v1.0.0（mpvue是跨双端的Vue.js框架，个人无需付费）

1. 点击上方链接下载压缩包，解压后得到文件夹mpvue-demo-douyin
2. 打开微信开发者工具，点击「导入项目」，选择解压后的文件夹，填入之前获取的微信小程序AppID，项目名称填「双端社交分享带货」，点击「确定」
3. 打开抖音开发者工具，点击「导入项目」，选择同一个解压后的文件夹，填入之前获取的抖音小程序AppID，项目名称同样填「双端社交分享带货」，点击「导入」

2.2 修改基础配置

用VS Code打开mpvue-demo-douyin文件夹，找到以下3个文件修改：

1. 修改配置文件config/index.js，找到douyinAppId、wxAppId、wxAppSecret，改成自己的：

   ```javascript module.exports = { dev: { assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, host: 'localhost', port: 8080, autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, useEslint: false, showEslintErrorsInOverlay: false, devtool: 'cheap-module-eval-source-map', cacheBusting: true, cssSourceMap: true, wxAppId: '你的微信小程序AppID', wxAppSecret: '你的微信小程序AppSecret', douyinAppId: '你的抖音小程序AppID', douyinKey: '你的抖音小程序Key' }, build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', productionSourceMap: true, devtool: 'source-map', productionGzip: false, productionGzipExtensions: ['js', 'css'], bundleAnalyzerReport: process.env.npm_config_report } } ```

2. 修改首页标题，找到src/pages/index/index.vue，把第1行template里的标题改成自己的：

   ```vue ```

3. 修改商品列表（暂时用本地静态数据），找到src/pages/index/index.vue，把data里的productList替换成自己的商品：

   ```javascript data () { return { productList: [ { id: 1, title: '农家自种赣南脐橙10斤装', img: 'https://img14.360buyimg.com/n1/jfs/t1/100001/1/10001/100001/65000000e1234567.jpg', price: 29.9, shareText: '超甜赣南脐橙，产地直供，扫码下单享优惠' }, { id: 2, title: '新疆阿克苏冰糖心苹果5斤装', img: 'https://img14.360buyimg.com/n1/jfs/t1/100002/2/10002/100002/65000000e1234568.jpg', price: 19.9, shareText: '正宗阿克苏冰糖心，脆甜多汁，今日特价' } ] } } ```

三、核心功能：30分钟搞定社交分享+下单跳转

这是社交分享带货的核心，分享后好友点击直接跳转到商品详情页（这里暂时跳转到首页对应商品锚点，后续可升级独立商品页），点击下单跳转到第三方免费链接（比如拼多多、淘宝客、有赞微商城个人版，链接需提前注册获取）。

3.1 微信端分享功能开发

找到src/pages/index/index.vue，添加以下代码到script标签的methods里：

```javascript shareToWechat (item) { // 判断是微信小程序环境 if (wx) { wx.showShareMenu({ withShareTicket: true }) wx.onShareAppMessage(() => { return { title: item.shareText, path: `/pages/index/index?id=${item.id}`, imageUrl: item.img } }) wx.showToast({ title: '点击右上角「分享给朋友」', icon: 'none', duration: 2000 }) } } ```

然后在template里的每个商品卡片下方添加分享按钮：

```vue ```

3.2 抖音端分享功能开发

同样在methods里添加：

```javascript shareToDouyin (item) { // 判断是抖音小程序环境 if (tt) { tt.showShareMenu({ withShareTicket: true }) tt.onShareAppMessage(() => { return { title: item.shareText, path: `/pages/index/index?id=${item.id}`, imageUrl: item.img } }) tt.showToast({ title: '点击右下角「分享」按钮', icon: 'none', duration: 2000 }) } } ```

修改template里的分享按钮，改成双端兼容的：

```vue 分享 ```

3.3 下单跳转功能开发

在methods里添加通用的跳转函数，替换buyUrl为你自己的第三方免费商品链接（拼多多多多进宝、淘宝联盟淘宝客都可以，个人无需资质的话选拼多多多多进宝个人版即可注册获取商品链接）：

```javascript buyProduct (item) { // 替换成你自己的对应商品链接 const buyUrl = 'https://mobile.yangkeduo.com/goods.html?goods_id=123456789' if (wx) { wx.navigateToMiniProgram({ appId: 'wx2e16d0baee6bd71e', // 拼多多小程序固定AppID path: 'pages/goods/goods?goods_id=123456789', // 替换成你的商品ID对应的路径 success: () => {}, fail: (err) => { console.error(err) wx.showToast({ title: '跳转失败，请重试', icon: 'none' }) } }) } else if (tt) { tt.navigateToMiniProgram({ appId: 'tte9c007d9f3b12345', // 替换成你自己要跳转的抖音第三方小程序AppID（比如有赞、京喜） path: 'pages/goods/goods?id=123456789', // 替换成对应的路径 success: () => {}, fail: (err) => { console.error(err) tt.showToast({ title: '跳转失败，请重试', icon: 'none' }) } }) } } ```

四、本地测试与正式上线

4.1 本地测试

1. 在微信开发者工具点击「编译」，查看首页商品、分享按钮、购买按钮是否正常工作
2. 在抖音开发者工具点击「编译」，用抖音扫码登录测试账号，查看同样功能

4.2 正式上线

上线前注意：个人类目暂时只能做「工具」或「内容」，可以选择「内容导购」升级到企业或个体工商户类目（个体工商户资质最简单，几百块就能办，当天或3天左右下来，也可以先用内容类目暂时分享链接不直接带货。

1. 微信端：在微信开发者工具点击「上传」，填写版本号（比如1.0.0）和项目备注，然后登录https://mp.weixin.qq.com/，进入「版本管理」提交审核，审核通过后点击「发布」
2. 抖音端：在抖音开发者工具点击「上传」，填写同样的版本号和项目备注，然后登录https://developer.open-douyin.com/，进入「小程序管理」提交审核，审核通过后点击「发布」