锐客网

  1. 首页 > 睿知 > >

微信小程序新手教程开发示例体验( 三 )

睿知


wx.request({
url: API_URL_L,
data: {
key: API_KEY,
date: today
},
header: {
&＃39;Content-Type&＃39;: &＃39;application/json&＃39;
},
success: resolve,
fail: reject
})
})
return promise
}
function getEvents() {
var tmpDate = new Date()
var today = tmpDate.getMonth()1
today = today&＃39;/&＃39;tmpDate.getDate()
return fetchEvents(today)
.then(function(res) {
// console.log(res.data.result)
return res.data.result
})
.catch(function(err) {
console.log(err)
return []
})
}
// 获取详细信息
function fetchDetail(e_id) {
var promise = new Promise(function(resolve, reject){
wx.request({
url: API_URL_D,
data: {
key: API_KEY,
e_id: e_id
},
header: {
&＃39;Content-Type&＃39;: &＃39;application/json&＃39;
},
success: resolve,
fail: reject
})
})
return promise
}
function getDetail(e_id) {
return fetchDetail(e_id)
.then(function(res) {
// console.log(res.data.result)
return res.data.result
})
.catch(function(err) {
console.log(err)
return []
})
}
module.exports = {
getEvents: getEvents,
getDetail: getDetail
}
注: 请将API_KEY的值替换为你申请到的KEY
我们要利用API获取的数据有两种 ， 一是「事件列表」 ， 另一种是事件对应的「详细信息」 ， 上面使用到了ES6原生提供的Promise对象 ， 具体请参考阮一峰的《JavaScript标准参考教程(alpha)》中「Promise对象」一节
最后还用到了module.exports对外暴露两个函数 ， 使外部可以调用
我们继续打开pages/index/index.js文件 ， 修改成这样
const util = require(&＃39;../../utils/util.js&＃39;)
Page({
data: {
hidden: false,
events: []
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
var self = this
util.getEvents().then(function(data) {
self.setData({
hidden: true,
events: data
})
})
}
})
然后打开pages/detail/detail.js ， 修改如下
const util = require(&＃39;../../utils/util.js&＃39;)
Page({
data:{
hidden: false,
detail: {}
},
onLoad:function(param){
// 页面初始化 param为页面跳转所带来的参数
var self = this
util.getDetail(param.id).then(function(result){
self.setData({
detail: result[0]
})
})
},
onReady:function(){
// 页面渲染完成
wx.setNavigationBarTitle({
title: this.data.detail.title
})
this.setData({
hidden: true
})
}
})
这里我们调用了wx.setNavigationBarTitle方法动态设置导航栏的标题内容 ， 需要注意的是必须在页面渲染完成之后 ， 即onReady之后才能调用该方法修改导航栏标题
【微信小程序新手教程开发示例体验】这次教程就到这里结束啦～涉及到的部分知识点并没有详细介绍和说明 ， 如果有不明白的地方请大家根据我给出的链接去查看详细的介绍 ， 此文权当快速上手的一个引子 ， 更加深入的内容以及小程序的其他API的使用 ， 还需要各位亲自去实践 ， 欢迎交流～

推荐阅读


上一篇：芦竹沥

下一篇：罗曼蒂克式爱情是什么意思 富有诗意、浪漫的爱情