抖音开放平台Logo
开发者文档
小程序
“/”唤起搜索
控制台
  • 开发教程与代码示例
  • 入门
  • 小程序框架
  • 小程序运行时
  • 自定义组件
  • 基础教程
  • 小程序登录
  • 用户登录态签名
  • 开发 web-view 组件
  • 开发 video 视频组件
  • 开发 TabBar
  • 开发页面导航
  • 开发视图容器
  • 屏幕
  • 网络连接
  • 3 分钟调通 code2session
  • 在网络资源请求添加 referer 规则
  • 画布
  • 分包加载
  • 流加载
  • 小程序webhook
  • 多线程 Worker
  • 播放加密视频
  • 视频诊断工具
  • 实现转发和挂载
  • 获取页面节点信息
  • 响应显示区域变化
  • 敏感数据处理
  • 能力教程
  • 性能优化
  • 安全

    • 网络连接

    收藏
    我的收藏
    网络连接使得小程序可以与服务器进行数据交互，实现诸如获取远程数据、提交用户信息、上传文件、下载资源等功能。通过网络连接，小程序不再局限于本地数据和功能，能够实时获取最新内容，为用户提供更加个性化和动态的服务。

    使用场景

      1.数据获取：例如新闻类小程序从服务器获取最新新闻资讯；电商小程序获取商品列表、详情信息等。
      2.用户交互数据提交：用户在社交类小程序中发布动态、评论，在购物小程序中提交订单、收货地址等信息。
      3.文件上传与下载：如图片、视频分享类小程序上传用户创作内容，或下载用户需要的资源文件。
      4.实时数据更新：股票行情小程序实时获取最新股价信息，天气类小程序获取实时天气数据。

    目标

      1.使用 tt.request 获取服务器中的纯文本。
      2.使用 tt.uploadFile 向服务器上传图片，并显示到小程序页面中。
      3.使用 tt.downloadFile 从服务器下载刚刚上传的图片，并保存到本地。

    准备工作

      1.注册抖音开放平台账号：完成开发者认证。
      2.创建小程序：在抖音开放平台创建小程序，获取小程序的 AppID。
      3.安装抖音开发者工具：从抖音开放平台下载并安装最新版本的开发者工具，用于创建、调试和发布小程序。
      4.创建小程序项目：在开发者工具中新建一个小程序项目，填写项目名称、AppID 等信息，选择合适的模板或创建空白项目。
      5.搭建本地服务器：使用 Node.js、Express 等搭建本地服务器，用于模拟数据交互，本教程示例服务器代码如下：
        主要功能：
      ◦一段文本，在小程序发送 HTTP 请求时返回。
      ◦支持文件上传、下载。
    const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();
const port = 3000;

// 配置 multer 存储路径和文件名
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, uniqueSuffix + path.extname(file.originalname));
    }
});

const upload = multer({ storage: storage });

// 创建上传目录
if (!fs.existsSync('uploads')) {
    fs.mkdirSync('uploads');
}

// 处理根路径请求，返回文本
app.get('/', (req, res) => {
    res.send('你好，小程序');
});

// 处理文件上传请求
app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('未接收到文件');
    }
    const fileUrl = `http://localhost:${port}/${req.file.path}`;
    res.json({ imageUrl: fileUrl });
});

// 处理文件下载请求
app.get('/uploads/:filename', (req, res) => {
    const filePath = path.join(__dirname, 'uploads', req.params.filename);
    res.sendFile(filePath);
});

// 启动服务器
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

    步骤一：发起 HTTP 请求

    tt.request 用于向指定的服务器 URL 发起 HTTP（S）请求，支持 GET、POST 等多种请求方法，可以在请求中携带参数，并接收服务器返回的响应数据。
    本教程主要展示如何获取服务器中的纯文本。
      1.在 pages/index/index.js 中添加以下代码，实现 HTTP 请求的逻辑。
      ◦定义了一个页面实例，其中 data 对象包含 serverText 字段，用于存储从服务器获取的纯文本内容。
      ◦sendRequest 方法用于触发 tt.request 请求。
      ▪当请求成功且状态码为 200 时，将服务器返回的数据存储到 serverText 中，并在控制台打印成功信息。
      ▪若状态码不是 200，则在控制台打印错误信息。若请求失败，系统会在控制台输出错误信息。
    Page({
    data: {
        serverText: ''
    },
    sendRequest() {
        tt.request({
            url: 'http://localhost:3000/', // 替换为你的服务器地址
            success: (res) => {
                if (res.statusCode === 200) {
                    this.setData({
                        serverText: res.data
                    });
                    console.log('请求成功，获取到的纯文本内容：', res.data);
                } else {
                    console.error('请求失败，状态码：', res.statusCode);
                }
            },
            fail: (err) => {
                console.error('请求出错：', err);
            }
        });
    }
});
      2.在 pages/index/index.js 中添加以下代码：
    <view class="container">
    <button bindtap="sendRequest">发送请求</button>
    <view>服务器返回的纯文本内容：{{serverText}}</view>
</view>
      3.在 pages/index/index.ttss 中简单设置样式。
    .container {
    padding: 20px;
}
button {
    margin-bottom: 20px;
}
    开发完成后，页面如下：

    步骤二：上传文件

    tt.uploadFile 用于将本地文件上传到服务器，适用于上传图片、视频、文档等文件类型，常用于用户上传内容的场景。
    本教程主要展示如何向服务器上传图片，并显示到小程序页面中。
    实际开发时，务必设置实际需要交互的服务器地址，并添加到小程序的白名单中。
    如果未添加，需要在IDE 的工程配置中勾选不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书。
      1.在 pages/index/index.js 中添加以下代码，实现文件上传的逻辑。
      ◦chooseAndUploadImage 方法先调用 tt.chooseImage 让用户选择一张图片。
      ◦选择成功后，使用 tt.uploadFile 将图片上传到服务器的 /upload 接口。
      ◦上传成功后，解析服务器返回的 JSON 数据，将图片 URL 存储到 imageUrl 中。
    Page({
    data: {
        imageUrl: ''
    },
    chooseAndUploadImage() {
        tt.chooseImage({
            count: 1,
            success: (res) => {
                const tempFilePaths = res.tempFilePaths;
                tt.uploadFile({
                    url: 'http://localhost:3000/upload',
                    filePath: tempFilePaths[0],
                    name: 'file',
                    success: (uploadRes) => {
                        const data = JSON.parse(uploadRes.data);
                        this.setData({
                            imageUrl: data.imageUrl
                        });
                        console.log('图片上传成功', data);
                    },
                    fail: (uploadErr) => {
                        console.error('图片上传失败', uploadErr);
                    }
                });
            },
            fail: (chooseErr) => {
                console.error('选择图片失败', chooseErr);
            }
        });
    }
});
      2.在 pages/index/index.js 中实现上传图片的按钮并调用 JS 中的chooseAndUploadImage 方法。
      ◦包含一个按钮，点击后触发 chooseAndUploadImage 方法。
      ◦使用 <image> 组件显示上传成功后的图片，通过 tt:if 指令判断是否显示图片。
    <view class="container">
    <button bindtap="chooseAndUploadImage">上传图片</button>
    <image src="{{imageUrl}}" tt:if="{{imageUrl}}" mode="aspectFit"></image>
</view>
      3.在 pages/index/index.ttss 中简单设置样式。
    image {
    max-width: 100%;
    max-height: 300px;
}
    开发完成后，页面如下：

    步骤三：下载文件

    tt.downloadFile 用于从服务器下载文件到本地，可用于下载图片、视频、安装包等资源。
    本教程主要展示如何从服务器下载刚刚上传的图片，并保存到本地。
    实际开发时，务必设置实际需要交互的服务器地址，并添加到小程序的白名单中。
    如果未添加，需要在IDE 的工程配置中勾选不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书。
      1.在 pages/index/index.js 中添加以下代码，实现文件下载的逻辑。
      ◦data 中定义了 imageUrl 用于存储要下载的图片的 URL，savedFilePath 用于存储图片保存到本地后的路径。
      ◦downloadAndSaveImage 方法：
      ▪若下载成功（状态码为 200），获取图片的临时文件路径 tempFilePath。接着调用 tt.saveFile 将临时文件保存到本地，保存成功后将保存路径存储到 savedFilePath 中，并在控制台输出保存成功信息；若保存失败，在控制台输出错误信息。
      ▪若下载失败，在控制台输出下载失败信息。
    Page({
    data: {
        serverText: '',
        imageUrl: '',
        savedFilePath: ''
    },
    sendRequest() {
        tt.request({
            url: 'http://localhost:3000', // 替换为你的服务器地址
            success: (res) => {
                if (res.statusCode === 200) {
                    this.setData({
                        serverText: res.data
                    });
                    console.log('请求成功，获取到的纯文本内容：', res.data);
                } else {
                    console.error('请求失败，状态码：', res.statusCode);
                }
            },
            fail: (err) => {
                console.error('请求出错：', err);
            }
        });
    },
    chooseAndUploadImage() {
        tt.chooseImage({
            count: 1,
            success: (res) => {
                const tempFilePaths = res.tempFilePaths;
                tt.uploadFile({
                    url: 'http://localhost:3000/upload',
                    filePath: tempFilePaths[0],
                    name: 'file',
                    success: (uploadRes) => {
                        const data = JSON.parse(uploadRes.data);
                        this.setData({
                            imageUrl: data.imageUrl
                        });
                        console.log('图片上传成功', data);
                    },
                    fail: (uploadErr) => {
                        console.error('图片上传失败', uploadErr);
                    }
                });
            },
            fail: (chooseErr) => {
                console.error('选择图片失败', chooseErr);
            }
        });
    },
    downloadAndSaveImage() {
        tt.downloadFile({
            url: this.data.imageUrl,
            success: (downloadRes) => {
                if (downloadRes.statusCode === 200) {
                    const tempFilePath = downloadRes.tempFilePath;
                    tt.saveFile({
                        tempFilePath: tempFilePath,
                        success: (saveRes) => {
                            const savedFilePath = saveRes.savedFilePath;
                            this.setData({
                                savedFilePath: savedFilePath
                            });
                            console.log('图片下载并保存成功，保存路径：', savedFilePath);
                        },
                        fail: (saveErr) => {
                            console.error('图片保存失败', saveErr);
                        }
                    });
                } else {
                    console.error('图片下载失败，状态码：', downloadRes.statusCode);
                }
            },
            fail: (downloadErr) => {
                console.error('图片下载出错', downloadErr);
            }
        });
    }
});
      2.在 pages/index/index.js 中实现上传图片的按钮并调用 JS 中的chooseAndUploadImage 方法。
      ◦包含一个按钮，点击后触发 downloadAndSaveImage 方法。
      ◦使用 <view> 组件显示图片保存到本地后的路径，通过 tt:if 指令判断是否显示该路径信息。
    <view class="container">
    <button bindtap="downloadAndSaveImage">下载并保存图片</button>
    <view tt:if="{{savedFilePath}}">图片已保存到：{{savedFilePath}}</view>
</view>
    下载文件和上传文件的样式相似，无需在编写 pages/index/index.ttss。
    开发完成后，页面如下：

    结果验证

    你可以在 IDE 的模拟器中预览本教程实现的各个功能，也可以对小程序进行调试，详情请参见 IDE 调试和真机调试。