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

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


一. 实现截图

这里写图片描述

这里写图片描述

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


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

  1. 获得某一条新闻的具体内容的接口,simpleId为某条新闻的id:

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

  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
        });
      }
    })
  }
})

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

-------------本文结束感谢您的阅读-------------