每次因为看见别人写的新东西，自己就也想做一个，不知道是不是一个好习惯哎。微信小程序已经出来很久了，最近才开始学了一点皮毛，做了个小东西，用到了网易新闻接口，实现了小程序上的新闻浏览。但是很遗憾没有通过审核，因为含有时政信息，让选成企业小程序，企业小程序的认证需要注册公司的才可以，所以就没办法了。不说这些伤心的事了，接下来看一下实现的过程吧。
一. 实现截图
这里写图片描述
这里写图片描述
二. 网易新闻api
百度了一下就找到了这个免费的接口，在这里感谢一下网易啊，棒棒哒！
- 获得某类新闻的接口，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:旅游
三. 实现的部分代码
- 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，欢迎查看并下载。哪里有问题也请多多提醒。gitbub链接：https://github.com/lwjcode/news
网友评论