微信小程序运用云函数调用新闻类API

在小程序中调用API有调用限制，只能给5个可信域名发送请求，而且需要备案。而在云函数中则不受到这样的限制。所以使用云函数调用API更为好。

新闻列表的编写

云函数的编写

首先要找到一个适合自己程序的api接口。其次再进行云函数的编写。以我找到的api为例。
云函数的名称：newslist是新闻页面的列表

// 云函数入口文件
const cloud = require('wx-server-sdk')
var rp = require('request-promise');
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {return rp(`https://api.isoyu.com/api/News/new_list?type=3&page=5`).then(function (res) {console.log(res);return res;}).catch(function (err) {console.error(err);})
}

JS方法

新闻列表的JS方法

  onLoad: function (options) {//引用方法this.getNewsList();},getNewsList: function () {var that = this//预加载wx.showLoading({title: '加载中',})wx.cloud.callFunction({//云函数的名称name: 'newslist',data: {//云函数中插入数据}}).then(res => {var result = JSON.parse(res.result)console.log(result.data);that.setData({readlist:result.data//写入新闻列表内容});// console.log(that.setData);wx.hideLoading();}).catch(err => {console.log(err);wx.hideLoading();})},//加载新闻详情goToDetail: function(event){//获取wxml中data-id中的数据postidvar postid = event.currentTarget.dataset['id'];//console.log('postid:' + postid);//页面跳转wx.navigateTo({url: '../news/new_detail/new_detail?postid=' + postid});},

wxml页面编写

<view wx:for="{{readlist}}" wx:key="item"><view class='news1' data-id="{{item.postid}}" bindtap="goToDetail"><view class='news-img'><image src="{{item.imgsrc}}" /></view><view class='news-text'><view class='news-text-1'><text>{{item.title}}</text></view><view class='news-text-2'><text>{{item.ptime}}</text></view></view></view>
</view>

wxss样式

.news1{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;
}
.news-img{width: 30%;height: 180rpx;margin: 2px;
}
.news-img image{width: 100%;height: 100%;
}
.news-text{width: 68%;height: 180rpx;
}
.news-text-1{font-size: 18px;
}
.news-text-2{font-size: 15px;color: rgba(128, 128, 128, 0.932);text-align: right;padding-right: 10rpx;padding-top: 30rpx;
}
.news-line{width: 100%;height: 1px;background-color: rgba(128, 128, 128, 0.466);
}

最终效果截图

微信小程序运用云函数调用新闻类API相关推荐

微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
uniapp实现微信小程序调用云函数及问题解决
uniapp实现微信小程序调用云函数及问题解决使用工具 HBuilder X 微信开发者工具实现步骤 1.在项目根目录下创建functions文件夹(此为wxcloudfunctions文件夹,可 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
文章目录前言一.功能说明二.代码实现 1.创建主界面Page 2.WXML 2.JS 3.WXSS 4.合法域名校验 5.图片缓存刷新问题的解决小结专题文章链接前言本篇文章,将对照专题案 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（一）：准备开始
文章目录前言案例说明专题文章链接前言作为一个程序开发的老鸟,有时候想使用微信小程序,开发实现一些实用的小功能.由于小程序往往需要有后台数据的支持,所以一般还需要搭建一个Server服务器,来 ...
微信小程序的云开发以及与传统开发的比较
一.微信小程序的云开发概念云开发就是一套解决小程序前后端开发的一种云端能力它提供了一整套云服务及简单.易用的 API 和管理界面,以尽可能降低后端开发成本,让开发者能够专注于核心业务逻辑的开发.尽 ...
微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论,  <vie ...
c语言京东购物系统,仿京东商城: 自主使用微信小程序实现的网上商城案例（包括前端和后台），利用了微信小程序的云数据库...
仿京东网上商城介绍自主使用微信小程序实现的仿京东网上商城案例(包括前端和后台),数据库利用了微信小程序的云数据库软件架构软件架构说明数据库表设计本系统数据库主要用了微信小程序自带的云数据库 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...
微信小程序申请医疗-就医服务类目解决办法
微信小程序申请医疗-就医服务类目申请解决办法选择方式为提供合同方式由于我们公司不是医院这种类型的公司,所以没有卫生部的批文,只能选择这一种方式. 准备审核需要的资料承诺函合同首尾页拍照,然后通 ...

微信小程序运用云函数调用新闻类API

微信小程序运用云函数调用新闻类API

微信小程序运用云函数调用新闻类API

新闻列表的编写

云函数的编写

JS方法

wxml页面编写

wxss样式

最终效果截图

微信小程序运用云函数调用新闻类API相关推荐

最新文章

热门文章