微信小程序（模仿头条新闻）

项目目录结构

说明

本例子调用聚合数据，需要自己申请API，并将聚合数据的域名添加到微信公众平台上小程序后台的服务器域名之中，微信小程序暂时不支持外部链接。

例子说明

main.js - Page的内容。
Page({
data: {
//调用数据的类型
requestUrl:’top’,
//存储返回的数据类型
data: [],
//导航栏的标签
toptitle: [{ “id”: “top”, “text”: “头条” }, { “id”: “shehui”, “text”: “社会” }, { “id”: “guonei”, “text”: “国内” }, { “id”: “guoji”, “text”: “国际” }, { “id”: “yule”, “text”: “娱乐” }, { “id”: “tiyu”, “text”: “体育” }, { “id”: “junshi”, “text”: “军事” }, { “id”: “keji”, “text”: “科技” }, { “id”: “caijing”, “text”: “财经” }, { “id”: “shishang”, “text”: “时尚” }],
dataId:’top’
},


## 获取聚合数据的数据```在小程序启动时，使用main.js/Page中的requestUrl默认值，通过Onload()方法加载。getTypeData: function (requestUrl){console.log('requestUrl2:' + requestUrl);var that = this;wx.request({url: 'https://v.juhe.cn/toutiao/index?type=' + requestUrl+'&key=你的新闻头条API',data: {},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT// header: {}, // 设置请求的 headersuccess: (res) =>{console.log(res)//把取回来的值，通过this.setData赋值给了data;this.setData({ data: res.data.result.data })console.log(this.data)},fail: function (err) {console.log(err)},complete: function() {// complete//wx.hideToast();}})}<div class="se-preview-section-delimiter"></div>

添加一个数据加载时的提示框

loading:function(){
wx.showToast({
title: ‘加载中’,
icon: ‘loading’,
duration: 2000
})
},


<div class="se-preview-section-delimiter"></div>###新闻的切换**主要通过微信中的bindtap方法实现，其中data-id负责传参数。```//toptitle对于上面main.js/Pages中的toptitle,change是方法名，data-id传参数。``<text wx:for="{{toptitle}}" class="{{dataId==item.id?'active':''}}"  bindtap="change" id="" data-id="{{item.id}}" >{{item.text}}</text><div class="se-preview-section-delimiter"></div>

change:function(e){// console.log(e.target.dataset.id);// console.log(e.target.id);// e.target.dataset.id为data-id传过来的值。console.log具有打印效果，可以在控制台上，观察其赋值情况。console.log("app.requestUrl:" + e.target.dataset.id) // top guoneithis.setData({requestUrl:  e.target.dataset.id,dataId: e.target.dataset.id}),console.log("requestUrl:" +app.requestUrl);this.loading();//进行重新加载。this.getTypeData(e.target.dataset.id);},

最终的效果图：