1 简介

当我们分享其他站点的页面时，如果只有一个链接略显枯燥，如果有标题，内容提纲，图片，则大大提高了读者了阅读可能。

本文尝试在支付宝小程序中实现一个抓取功能（提取网页的标题、描述和图片），由于支付宝小程序不能直接从客户端访问外部网站的 HTML 数据，因此需要使用云函数或自建后端服务来处理网页抓取和解析。

2 实现思路

用户输入链接：用户在小程序前端输入一个网页链接。

调用云函数或后端服务：小程序调用云函数或后端接口，传递该链接。

解析网页内容：在云函数或后端服务中，爬取网页内容并解析出标题、描述和图片。

返回解析结果：将解析到的元数据返回给小程序前端。

展示结果：前端展示解析得到的标题、描述和图片。

3 支付宝小程序实现步骤

1. 使用云函数实现网页解析 (Node.js)

支付宝小程序支持使用云函数来处理后台逻辑。下面的代码展示了如何通过云函数获取网页的元数据。

云函数代码 (Node.js)：

javascript

const axios = require('axios');
const cheerio = require('cheerio');

exports.main = async (event, context) => {
  const { url } = event;

  try {
    // 1. 获取网页内容
    const response = await axios.get(url);
    const html = response.data;

    // 2. 使用 cheerio 解析 HTML
    const $ = cheerio.load(html);

    // 3. 提取标题
    const title = $('title').text();

    // 4. 提取描述
    const description = $('meta[name="description"]').attr('content') || $('meta[property="og:description"]').attr('content');

    // 5. 提取图片
    const image = $('meta[property="og:image"]').attr('content');

    // 6. 返回数据
    return {
      success: true,
      data: {
        title,
        description,
        image
      }
    };
  } catch (error) {
    return {
      success: false,
      error: error.message
    };
  }
};

1. 支付宝小程序前端页面代码
   前端的实现需要处理用户输入，并调用云函数来获取网页的元数据。

页面布局 (axml)：用于展示解析后的数据。
html

  <view class="container">
    <input class="input" placeholder="请输入网址" bindinput="onInputChange" />
    <button onTap="fetchMetadata">获取网页信息</button>

    <view class="result">
      <view>标题: {
  {metadata.title}}</view>
      <view>描述: {
  {metadata.description}}</view>
      <image a:if="{
  {metadata.image}}" src="{
  {metadata.image}}" />
    </view>
  </view>
  页面逻辑 (js)：用于处理用户输入并调用云函数。
  javascript
  Copy code
  Page({
    data: {
      url: '',
      metadata: {
        title: '',
        description: '',
        image: ''
      }
    },

    // 获取用户输入
    onInputChange(e) {
      this.setData({
        url: e.detail.value
      });
    },

    // 调用云函数获取网页信息
    fetchMetadata() {
      const { url } = this.data;

      if (!url) {
        my.showToast({
          content: '请输入网址',
        });
        return;
      }

      my.cloud.callFunction({
        name: 'fetchMetadata', // 云函数名称
        data: { url },
        success: (res) => {
          if (res.result.success) {
            this.setData({
              metadata: res.result.data
            });
          } else {
            my.showToast({
              content: '获取信息失败',
            });
          }
        },
        fail: (error) => {
          my.showToast({
            content: '网络错误',
          });
        }
      });
    }
  }); 

1. 配置与部署
   云函数部署：支付宝小程序开发工具提供了云函数的支持，你可以在开发工具中创建并部署云函数。
   云开发初始化：确保在 app.js 中初始化云开发环境：
   javascript

   App({

    onLaunch() {
      my.cloud.init({
        env: 'your-cloud-env-id', // 替换为你自己的云环境 ID
      });
    }
    });
   

2. 展示效果
   当用户在支付宝小程序中输入 URL 并点击“获取网页信息”按钮时，小程序会调用云函数进行网页解析，然后展示解析出的标题、描述和图片。

5 小结

支付宝小程序不允许直接从前端访问外部网站的 HTML 内容，因此我们需要通过云函数或自建后端服务来实现网页抓取与解析。通过使用云函数中的 axios 和 cheerio 库，爬取并解析网页的元数据（标题、描述和图片），并将结果返回给前端显示。