微信小程序开发-使用axios访问网站数据、mpvue（一）

微信小程序，通过云函数去访问凤凰网上的新闻数据
云函数入口文件 ：cloudfunctions目录下的dataOpera.js

const cloud = require('wx-server-sdk');
cloud.init();
// 使用npm去安装axios与cheerio
const axios = require("axios");
const cheerio = require("cheerio"); 


// 云函数入口函数
exports.main = async (event, context) => {
  // 访问凤凰网
  let res = await axios.get("https://news.ifeng.com/");
  console.log(res);
  
  let $ = cheerio.load(res.data);
  let arr = [];
  // each(k,v) k是number类型，v是cheerioElement元素，如果只填一个参数，输出的是元素的下标
  $(".news-stream-newsStream-mr13 a").each((k,v)=>{
    console.log(k);
    // 将取的数据先存入对象中，属性名:属性值 的形式
    let obj ={
      title:$(v).text()
    }
    // 将取得的数据放入数组中，后续再取别的数据方便
    arr.push(obj);
  });
  return arr;
}

miniprogram目录下逻辑处理
pages/myCloud/index.js

// 先获取数据库的引用
const db = wx.cloud.database();
const _ = db.command;
Page({
  // 获取新闻
  getNews(){
    wx.cloud.callFunction({
      name:"getNews"
    }).then(res=>{
      console.log(res.result);
    });
  }
});

miniprogram目录下的视图部分
pages/myCloud/index.wxml

<view>
  <button type="primary" bindtap="getNews">获取新闻</button>
</view>

注意：

• 云函数创建完成后，需要将它上传部署到云端，我们再执行看具体效果或功能；
• 访问网络数据，先安装依赖包axios和cheerio；
• 使用each()方法获取数据后先存对象中，以属性名:属性值的形式,再将其存入数组中，便于后续其他数据的获取和使用；

使用框架去开发小程序
先来看一下mpvue框架
官方给出的介绍：mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js
的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

使用mpvue开发小程序，有哪些优点及作用？

• 彻底的组件化开发能力：提高代码
  完整的 Vue.js 开发体验
• 方便的 Vuex 数据管理方案：方便构建复杂的应用
• 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
• 支持使用 npm 外部依赖
• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
• H5 代码转换编译成小程序目标代码的能力

mpvue的使用

全局安装 vue-cli
npm install -s vue-cli

创建一个基于 mpvue-quickstart 模板的新项目
vue init mpvue/mpvue-quickstart my-test

安装依赖
cd my-test
npm install

启动构建
npm run dev