微信小程序和用网易新闻api实现自己的微信小程序
来源:互联网 发布:速写练线稿推荐 知乎 编辑:程序博客网 时间:2024/05/22 02:20
每次因为看见别人写的新东西,自己就也想做一个,不知道是不是一个好习惯哎。微信小程序已经出来很久了,最近才开始学了一点皮毛,做了个小东西,用到了网易新闻接口,实现了小程序上的新闻浏览。但是很遗憾没有通过审核,因为含有时政信息,让选成企业小程序,企业小程序的认证需要注册公司的才可以,所以就没办法了。不说这些伤心的事了,接下来看一下实现的过程吧。
一. 实现截图
二. 网易新闻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
//最初加载页面时的urlvar 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实现自己的微信小程序
- 利用Camera API实现自己的拍照和摄像程序——android开发
- 微信小程序实战--基于微信小程序的新闻客户端
- 用文本文件实现的动态实时发布新闻的程序
- 用文本文件实现的动态实时发布新闻的程序
- 分享一个网易新闻的api接口
- 微信小程序入门-新闻列表
- 微信小程序demo(新闻类)
- 微信小程序—新闻阅读器
- 微信小程序demo(新闻类)
- 微信小程序demo(新闻类)
- 微信小程序-网易云音乐
- 【微信小程序】实现属于自己的美美哒弹窗
- intel dpdk api 添加自己的库和创建自己的实例程序
- 一个简单网易新闻页面的实现
- 实现网易新闻的tab切换效果
- Viewpager实现类似网易新闻的效果
- 实现网易新闻框架的搭建
- windows防火墙无法启动0x8007042c解决办法
- uva 1637 概率DP
- 编程感想
- Vector是线程安全的
- treegrid 新增,编辑状态时锁定要编辑行,以防保存时选中的行不是正在新增或编辑的行
- 微信小程序和用网易新闻api实现自己的微信小程序
- bcache安装配置
- cmder的安装与配置
- 获取网页标题
- 通过HDMI获取显示器EDID数据
- 五类ip
- SharePoint入门
- 神经网络模型:感知器
- python中的glob 模块学习文件路径查找