微信小程序获取公众号文章列表及显示文章的示例代码


Posted in Javascript onMarch 10, 2020

微信小程序中如何打开公众号中的文章,步骤相对来说不麻烦。

1、公众号设置

小程序若要获取公众号的素材,公众号需要做一些设置。

1.1 绑定小程序

公众号需要绑定目标小程序,否则无法打开公众号的文章。
在公众号管理界面,点击小程序管理 --> 关联小程序

微信小程序获取公众号文章列表及显示文章的示例代码

输入小程序的AppID搜索,绑定即可。

微信小程序获取公众号文章列表及显示文章的示例代码

1.2 公众号开发者功能配置

(1) 在公众号管理界面,点击开发模块中的基本配置选项。

微信小程序获取公众号文章列表及显示文章的示例代码

(2) 开启开发者秘密(AppSecret),注意保存改秘密。
(3) 设置ip白名单,这个就是发起请求的机器的外网ip,假如是在自己电脑那就是自己电脑的外网ip,若部署到服务器那就是服务器的外网ip。

微信小程序获取公众号文章列表及显示文章的示例代码

2、获取文章信息的步骤

以下只是作为演示。

实际项目中在自己的服务端程序中获取,不要在小程序中直接获取,毕竟要使用到appid、appsecret这些保密性高的参数。

2.1 获取access_token

access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token。API文档

private String getToken() throws MalformedURLException, IOException, ProtocolException {
		// access_token接口https请求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
		String path = " https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential";
		String appid = "公众号的开发者ID(AppID)";
		String secret = "公众号的开发者密码(AppSecret)";
		URL url = new URL(path+"&appid=" + appid + "&secret=" + secret);
		HttpURLConnection connection = (HttpURLConnection) url.openConnection(); 
		connection.setRequestMethod("GET");
		connection.connect();
		
		InputStream in = connection.getInputStream();
		byte[] b = new byte[100];
		int len = -1;
		StringBuffer sb = new StringBuffer();
		while((len = in.read(b)) != -1) {
			sb.append(new String(b,0,len));
		}
		
		System.out.println(sb.toString());
		in.close();
		return sb.toString();
	}

2.2 获取文章列表

API文档

private String getContentList(String token) throws IOException {
		String path = " https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token=" + token;
		URL url = new URL(path);
		HttpURLConnection connection = (HttpURLConnection) url.openConnection(); 
		connection.setRequestMethod("POST");
		connection.setDoOutput(true);
		connection.setRequestProperty("content-type", "application/json;charset=utf-8");
		connection.connect();
		// post发送的参数
		Map<String, Object> map = new HashMap<>();
		map.put("type", "news"); // news表示图文类型的素材,具体看API文档
		map.put("offset", 0);
		map.put("count", 1);
		// 将map转换成json字符串
		String paramBody = JSON.toJSONString(map); // 这里用了Alibaba的fastjson
		
		OutputStream out = connection.getOutputStream();
		BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(out));
		bw.write(paramBody); // 向流中写入参数字符串
		bw.flush();
		
		InputStream in = connection.getInputStream();
		byte[] b = new byte[100];
		int len = -1;
		StringBuffer sb = new StringBuffer();
		while((len = in.read(b)) != -1) {
			sb.append(new String(b,0,len));
		}
		
		in.close();
		return sb.toString();
	}

测试:

@Test
	public void test() throws IOException {
		
		String result1 = getToken();
		Map<String,Object> token = (Map<String, Object>) JSON.parseObject(result1);
		String result2 = getContentList(token.get("access_token").toString());
		System.out.println(result2);
	}

微信小程序获取公众号文章列表及显示文章的示例代码

转换成json格式,参数说明查看上面的API文档

微信小程序获取公众号文章列表及显示文章的示例代码

微信小程序获取公众号文章列表及显示文章的示例代码

其中第二张图片中的url即为公众号文章的地址,获取到多少片tem项中就会有多少项,只要得到上面的结果那么在小程序中打开公众号文章已经成功一大半了。

最后在小程序中利用<web-view src="...."></web-view>组件打开即可,src中为文章的url地址。

微信小程序获取公众号文章列表及显示文章的示例代码

到此这篇关于微信小程序获取公众号文章列表及显示文章的示例代码的文章就介绍到这了,更多相关小程序获取公众号文章列表内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery用于查询操作的实现代码
May 10 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
非常漂亮的js烟花效果
Mar 10 #Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 #Javascript
微信小程序实现搜索功能
Mar 10 #Javascript
原生JS实现烟花效果
Mar 10 #Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 #Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 #Javascript
You might like
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
django模板语法学习之include示例详解
2017/12/17 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
高级Java程序员面试题
2016/06/23 面试题
医学生实习自荐信
2013/10/01 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
服务员岗位职责
2014/01/29 职场文书
补充协议书范本
2014/04/23 职场文书
交通文明倡议书
2014/05/16 职场文书
世博会口号
2014/06/20 职场文书
北京故宫导游词
2015/01/31 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python