理想技术网 - 简易
https://im1.cc/tag/%E7%AE%80%E6%98%93/
-
微信小程序调用公众号文章简易教程
https://im1.cc/Front/252.html
2024-06-29T11:42:00+08:00
微信小程序调用微信公众号文章可以通过以下方法实现：方法一：将微信公众号文章嵌入 WebView使用 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}`
});
}
});注意使用 WebView 组件时，微信公众号文章 URL 需要进行编码 (encodeURIComponent) 和解码 (decodeURIComponent)。WebView 组件的 src 必须是 HTTPS 协议的 URL。微信小程序 WebView 只能加载特定白名单中的域名，mp.weixin.qq.com 在微信小程序中是默认允许加载的。方法二：在小程序中实现简易的文章展示如果不使用 WebView，可以通过爬取微信公众号文章内容，解析并在小程序中展示。这个方法涉及到更多的后端处理：爬取微信公众号文章你可以使用第三方工具或自行编写爬虫获取微信公众号文章内容，并将其保存到你的服务器或数据库中。后端 API 提供文章内容创建一个后端 API，返回指定微信公众号文章的内容。示例：{
"title": "文章标题",
"content": "文章 HTML 内容"
}小程序调用 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 提供文章内容，在小程序中进行显示。这种方法更灵活，但需要后端支持，并且处理微信公众号的内容获取时要合法合规。