微信小程序新闻标题获取实例

 时间:2026-02-13 02:19:09

1、打开开发者工具,创建项目在项目pages文件夹下新建mypage文件夹,并在文件夹内新建mypage,并在app.json配置文件将mypage设为第一页面

微信小程序新闻标题获取实例

2、在mypage.wxml中写代码如下:

<view wx:for="{{datalist}}" >

{{index}}:{{item.title}}

</view>

<button bindtap="refresh">clickme</button>

点击button循环显示新闻。

微信小程序新闻标题获取实例

3、在mypage.js中获取app对象,代码如下;

var app = getApp()

微信小程序新闻标题获取实例

4、在app.js中创建一个getNews函数,用来发送请求,获取新闻列表,这里用的某合接口,代码如下:

getNews:function(callback){

wx.request({

url: 'http://v.juhe.cn/toutiao/index?type=&key=test',

success(res) {

console.log(res.data);

callback(res.data.result.data)

}

})

},

key要换成自己的

微信小程序新闻标题获取实例

5、在mpage.js中定义一个空数组,代码如下:

data: {

datalist:[]

},

微信小程序新闻标题获取实例

6、在mypage.js中添加mypage.wxml按钮的事件响应函数,在函数中调用app.js中的getNews方法,并创建数据处理回调函数,代码如下:

refresh:function(){

var that = this;

app.getNews(function(data){

that.setData({ datalist: data })

})

}

微信小程序新闻标题获取实例

7、点击--详情--本地设置,取消小程序的请求校验

微信小程序新闻标题获取实例

8、编译运行代码,点击按钮,新闻列表加载了

微信小程序新闻标题获取实例

  • 自考如何在网上报名
  • win10在哪添加打印机?
  • 冷却液找哪里可以做成分检测,方法是什么
  • LOL具有真实伤害的英雄有哪些
  • 我的诊室:胃痛要警惕心肌缺血性疾病
  • 热门搜索
    锦江旅游上海旅行社 重庆三日游旅游攻略 广西有哪些旅游景点 度蜜月旅游攻略 去哈尔滨旅游攻略 现在去哪里旅游最好 塔斯马尼亚旅游 温州洞头旅游攻略 旅游学刊官网 山西旅游景点介绍