小程序云开发demo-利用云函数获取凤凰网新闻的标题

小程序云开发demo

利用云函数获取凤凰网新闻的标题

新建一个云函数 getNews
image.png

//getNews/index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
//代理模块
const axios=require("axios");
//
const cheerio=require("cheerio");
// 云函数入口函数
exports.main = async (event, context) => {
  // const wxContext = cloud.getWXContext()
  let webUrl = "http://news.ifeng.com/";
  let res= await axios.get(webUrl);
  // console.log(res.data);
  // news - stream - newsStream - mr13
  let arr=[];
  let $=cheerio.load(res.data);
  $(".news-stream-newsStream-mr13 a").each(
    (k,v)=>{
      arr.push({
        title:$(v).text()
      })
    }
  )
  return arr;
}

记得要用npm安装相应的模块,

npm i axios cheerio wx-server-sdk  -S 

最好在vscode的终端安装

image.png

最后记得同步云函数

image.png


客户端
image.png

//获取新闻
  getNews() {
    //调用云函数
    wx.cloud.callFunction({
      name: "getNews"
    }).then(res => {
      console.log(res.result);
      this.setData({
        titleArr: res.result
      })
    })
  },


前台页面
image.png

<!--pages/news/index.wxml-->
<!-- <text>pages/news/index.wxml</text> -->
<button type="primary" bindtap="getNews">点击我获取新闻</button>
<view wx:for="{{titleArr}}">
<!-- 拿到所有的凤凰网的新闻标题 -->
  <h3 class="titleStyle">{{item.title}}</h3>
  
</view>


案例效果图
image.png

发布了49 篇原创文章 · 获赞 3 · 访问量 5095

猜你喜欢

转载自blog.csdn.net/weixin_43487066/article/details/105492759