微信小程序和用网易新闻api实现自己的微信小程序

每次因为看见别人写的新东西，自己就也想做一个，不知道是不是一个好习惯哎。微信小程序已经出来很久了，最近才开始学了一点皮毛，做了个小东西，用到了网易新闻接口，实现了小程序上的新闻浏览。但是很遗憾没有通过审核，因为含有时政信息，让选成企业小程序，企业小程序的认证需要注册公司的才可以，所以就没办法了。不说这些伤心的事了，接下来看一下实现的过程吧。

一. 实现截图

二. 网易新闻api
百度了一下就找到了这个免费的接口，在这里感谢一下网易啊，棒棒哒！
1. 获得某类新闻的接口，type为新闻的种类，page为请求的页数，limit为一页显示的条数：

https://wangyi.butterfly.mopaasapp.com/news/api?type=war&page=1&limit=10

获得某一条新闻的具体内容的接口，simpleId为某条新闻的id：

https://wangyi.butterfly.mopaasapp.com/detail/api?simpleId=1

新闻的种类：

war:军事
tech: 科技
edu: 教育
ent: 娱乐
money: 财经
gupiao: 股票
travel:旅游

三. 实现的部分代码
1. newslist.wxml

<view class="body">
<view  class="nav-bar"><view bindtap="browsing" id="war" style="color: {{color.war}}">军事</view><view bindtap="browsing" id="sport" style="color: {{color.sport}}">体育</view><view bindtap="browsing" id="tech" style="color: {{color.tech}}">科技</view><view bindtap="browsing" id="edu" style="color: {{color.edu}}">教育</view><view bindtap="browsing" id="ent" style="color: {{color.ent}}">娱乐</view><view bindtap="browsing" id="money" style="color: {{color.money}}">财经</view><view bindtap="browsing" id="gupiao" style="color: {{color.gupiao}}">股票</view><view bindtap="browsing" id="travel" style="color: {{color.travel}}">旅游</view>
</view>
<view class="load" hidden="{{hidden}}">加载中...</view>
//加载更多新闻所以使用滑动窗口，并绑定相应的处理事件
<scroll-view scroll-y="true" bindscrolltolower="loadmore" bindscrolltoupper="loadmore" class="news-container" style="height:{{scrollHeight}}px;"><block wx:for="{{newslist}}" wx:for-item="newsItem">//navigator相当于html中的<a>，点击携带新闻id<navigator url="../news/news?newsid={{newsItem.id}}"><view class="news-item"><view class="text-img"><view class="text"><text>{{newsItem.title}}</text></view><view class="img"><image src="{{newsItem.imgurl}}" mode="aspectFill"></image></view></view><view class="news-footer"><text>{{newsItem.time}}</text></view></view></navigator></block>
</scroll-view>
<view class="load" hidden="{{hidden}}">加载中...</view>
</view>

2.newslist.js

//最初加载页面时的url
var url = 'https://wangyi.butterfly.mopaasapp.com/news/api?type=war&page=1&limit=10';var colors = {war: '#BDC6B8',sport: '#BDC6B8',tech: '#BDC6B8',edu: '#BDC6B8',ent: '#BDC6B8',money: '#BDC6B8',gupiao: '#BDC6B8',travel: '#BDC6B8'}//点击某类新闻时导航栏上对应的字变为红色
var changeColor = function (curColor){for (var i in colors){if (i == curColor){colors[i] = 'red';}else{colors[i] = '#BDC6B8';}}}
Page({//data中定义页面中需要的数据data:{newslist:[],page: 1,newstype: 'war',scrollHeight: 0,hidden: true,color: {war: 'red',sport: '#BDC6B8',tech: '#BDC6B8',edu: '#BDC6B8',ent: '#BDC6B8',money: '#BDC6B8',gupiao: '#BDC6B8',travel: '#BDC6B8'}},// 页面初始化 options为页面跳转所带来的参数onLoad:function(options){var _this = this;this.setData({hidden: false, // 阴藏或显示加载更多});// 网络请求wx.request({url: url,method: 'post',success: (res) => {_this.setData({newslist: res.data.list,hidden: true});}});//获得窗口的高度，在划到页面最底部时加载更多要用wx.getSystemInfo({success: function(res) {_this.setData({scrollHeight: res.windowHeight});}});},//浏览某条新闻browsing: function(event){var newstype = event.currentTarget.id;changeColor(newstype);this.setData({newstype: newstype,color: colors});url = 'https://wangyi.butterfly.mopaasapp.com/news/api?type='+ newstype + '&page=1&limit=10';wx.request({url: url,method: 'post',success: (res) => {this.setData({newslist: res.data.list,page: 1});}});},//下拉或上拉加载更多loadmore: function (event){this.setData({hidden: false,page: this.data.page + 1});url = 'https://wangyi.butterfly.mopaasapp.com/news/api?type='+ this.data.newstype + '&page=' + this.data.page + '&limit=' + this.data.page * 10;wx.request({url: url,method: 'post',success: (res) => {this.setData({newslist: res.data.list,hidden: true});}})}
})

四. 如何将HTML代码转换为WXML代码

当我们获得每条新闻的详细信息时，获得的是HTML代码，但是HTML代码在小程序中是不显示的，所以需要将它转换为WXML代码，我们可以利用wxParse这个插件去转换，下载链接：https://github.com/icindy/wxParse

使用方法如下：

js文件如何编写：

//引入wxParse.js文件
var WxParse = require('../wxParse/wxParse.js');
/*
*第一个参数：newsContent为要绑定的魔板
*第二个参数：html为获得的文本标签格式，也可为md格式
*第三个参数：str为获得的HTML字符串，newsContent为要绑定的魔板
*第四个参数：_this为Page对象本身，即this
*第五个参数：可省略，为自适应图片的内边距，默认为0
*/WxParse.wxParse('newsContent', 'html', str, _this);

wxml文件如何编写：

//引入wxParse.wxml文件
<import src="../wxParse/wxParse.wxml"/>
<view class="mainbody">
//data中的newsContent为bindName，必须与 WxParse.wxParse()的第一个参数同名<template is="wxParse" data="{{wxParseData:newsContent.nodes}}"/>
</view>

大概内容就这么多，其他的看官方文档很快就可以上手了。代码已经上传到github，欢迎查看并下载。哪里有问题也请多多提醒。

微信小程序和用网易新闻api实现自己的微信小程序相关推荐

新闻API采集，打造高效自媒体
在信息时代,新闻报道已经不再是传统媒体的专属领域,越来越多的个人或团体开始涉足自媒体领域.但是,如何获取海量.全面.及时的新闻信息成为了自媒体从业者们面临的重要问题.这时候,新闻API采集技术应运而生 ...
微信小程序运用云函数调用新闻类API
微信小程序运用云函数调用新闻类API 微信小程序运用云函数调用新闻类API 新闻列表的编写云函数的编写 JS方法 wxml页面编写 wxss样式最终效果截图微信小程序运用云函数调用新闻类API ...
微信小程序（模仿头条新闻）
微信小程序(模仿头条新闻) 项目目录结构说明本例子调用聚合数据,需要自己申请API,并将聚合数据的域名添加到微信公众平台上小程序后台的服务器域名之中,微信小程序暂时不支持外部链接. 例子说明 ma ...
微信小程序云开发之新闻博客社区项目debug后的项目代码
大家好,我是csdn的博主:lqj_本人这是我的个人博客主页:lqj_本人的博客_CSDN博客-微信小程序,html特效,vue2基础领域博主本次文章主要时为我最近在哔哩哔哩上的新发布的视频做一个 ...
微信小程序城市定位(百度地图API)
概述微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
小程序api 分享scene_抛弃微信小程序API的嵌套回调吧！
wx-promise-pro是一个强大.优雅的微信小程序异步库,可以将微信小程序嵌套回调的异步API转换成用Promise对象包装过的API,再结合async/await语法,就可以 ...
微信小程序使用阿里云物联网API开发物联网应用
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...
微信小程序入门教程之四：API 使用
目录一.WXML 渲染语法二.客户端数据储存三.远程数据请求四.组件五.获取用户个人信息六.多页面的跳转七.wx.navigateTo() 本篇就介绍怎么使用 API. 所有示例的完整代 ...
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...

微信小程序和用网易新闻api实现自己的微信小程序

微信小程序和用网易新闻api实现自己的微信小程序相关推荐

最新文章

热门文章