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


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 相关文章推荐
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
js实现上传图片及时预览
May 07 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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 删除记录实现代码
2009/03/12 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
python线程的几种创建方式详解
2019/08/29 Python
pandas中ix的使用详细讲解
2020/03/09 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
毕业生求职简历中的自我评价
2013/10/18 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript