0 0 0

微信小程序调用公众号文章简易教程

admin
2月前 329

微信小程序调用微信公众号文章可以通过以下方法实现:

方法一:将微信公众号文章嵌入 WebView
1、使用 WebView 组件
微信小程序中的 WebView 组件可以嵌入微信公众号文章。步骤如下:

在小程序页面中创建 WebView:

<!-- pages/webview/webview.wxml -->
<view class="container">
  <web-view src="{{webUrl}}"></web-view>
</view>

设置 WebView 组件的 URL:

// pages/webview/webview.js
Page({
  data: {
    webUrl: ''
  },

  onLoad: function (options) {
    this.setData({
      webUrl: decodeURIComponent(options.url) // 解码 URL
    });
  }
});

从其他页面跳转到 WebView 页面:

// pages/other/other.js
Page({
  navigateToArticle: function () {
    const articleUrl = encodeURIComponent('https://mp.weixin.qq.com/s/some_article_id');
    wx.navigateTo({
      url: `/pages/webview/webview?url=${articleUrl}`
    });
  }
});

注意
1、使用 WebView 组件时,微信公众号文章 URL 需要进行编码 (encodeURIComponent) 和解码 (decodeURIComponent)。
2、WebView 组件的 src 必须是 HTTPS 协议的 URL。
3、微信小程序 WebView 只能加载特定白名单中的域名,mp.weixin.qq.com 在微信小程序中是默认允许加载的。

方法二:在小程序中实现简易的文章展示
如果不使用 WebView,可以通过爬取微信公众号文章内容,解析并在小程序中展示。这个方法涉及到更多的后端处理:

1、爬取微信公众号文章
你可以使用第三方工具或自行编写爬虫获取微信公众号文章内容,并将其保存到你的服务器或数据库中。

2、后端 API 提供文章内容
创建一个后端 API,返回指定微信公众号文章的内容。示例:

{
  "title": "文章标题",
  "content": "文章 HTML 内容"
}

3、小程序调用 API 获取文章
在小程序中调用后端 API,并使用 rich-text 组件显示文章内容。

页面结构:

<!-- pages/article/article.wxml -->
<view class="container">
  <view class="article-title">{{title}}</view>
  <rich-text nodes="{{content}}"></rich-text>
</view>

页面逻辑:

// pages/article/article.js
Page({
  data: {
    title: '',
    content: ''
  },

  onLoad: function (options) {
    const articleId = options.id;
    this.fetchArticle(articleId);
  },

  fetchArticle: function (id) {
    wx.request({
      url: `https://your-server.com/api/articles/${id}`,
      method: 'GET',
      success: res => {
        if (res.data) {
          this.setData({
            title: res.data.title,
            content: res.data.content
          });
        }
      },
      fail: err => {
        console.error('文章获取失败', err);
      }
    });
  }
});

注意
使用 rich-text 组件展示文章内容,确保内容的 HTML 标签被正确解析。
爬取微信公众号文章可能会违反微信的政策,请确保你有合法的使用权限。

总结
嵌入 WebView:简单快速地嵌入微信公众号文章,但仅能展示,无法获取文章内容进行二次处理。

API 获取文章内容:通过后端 API 提供文章内容,在小程序中进行显示。这种方法更灵活,但需要后端支持,并且处理微信公众号的内容获取时要合法合规。

最新回复 (0)

    暂无评论

请先登录后发表评论!

返回
请先登录后发表评论!