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

时间: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、编译运行代码,点击按钮,新闻列表加载了

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

© 2026 海能知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com