效果描述:
按动主页按钮跳转至列表页,在列表页显示请求网页所获取的信息,并通过所得信息的id的不同,链接到不同的网页进一步获取不同信息。
触碰按钮跳转至列表页
触碰表题按钮跳转至详情页
,其中不同的按钮对应的详情页内容不同而格式相同。
这样的好处是,可以通过网页信息的改变自动改变页面信息。
流程:
使用Api:
wx.request() //请求网页信息
wx.navigateTo() //跳转页面
注意点:
1.在列表页,要将网页上获取的信息根据id的不同,选择对应信息显示在列表页,并将其显示在详情页的开头出,该处使用全局变量来实现页面间的信息传输;
2.列表页跳转至详情页,要根据自身携带的id来选择将从那个网页获取详情并显示,该处通过字符串的拼接实现页面间的id传输。
Api使用方法:
获取网页信息:
wx.request({
url: 'http://www.获取信息的网址',
data: '',
header: {},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: function(res) {
console.log(res)
that.setData({
faq:res.data.content,
faqId:res.data.content.id,
})
fail: function(res) {},
complete: function(res) {},
})
跳转到faq页面:
wx.navigateTo({
url: ../faq/faq,
})
全局变量的使用:
在列表页面,每个列表的标题来源于网页信息,所以定义全局变量用来在页面间传输标题信息。全局变量定义在app.js中。
//app.js
App({
faqPage:"";
})
因为页面要使用全局变量,所以要引入app.js。
var app = getApp();
全局变量的赋值和使用:
//faq.js 列表页
answer:function(es){ //点击按钮后调用answer函数,传入值es
var faqId = es.currentTarget.id //将es里表示id的部分传给faqId
var faq = this.data.faq;
var n = faqId; //通过不同的id将不同的标题赋给全局变量faqPage
app.faqPage = faq[n-1].question;
}
//faq6.js 详情页
data{
faqP:"" //定义本页的变量
}
onLoad: function (options) {
var faqPage1 = app.faqPage//页面初始化时调用全局变量,将其赋值给函数的局部变量faqPage1
this.setData({
faqP: faqPage1 //将函数的局部变量赋值给页面的data里的变量faqP,这样就可以在faq6的wxml里使用该变量了。
})
}
字符串的拼接实现页面间的id传输:
answer:function(es){
var faqId = es.currentTarget.id
var newUrl = '../faq6/faq6?buttonId=' + faqId;//'原链接?buttonId='+id,这个buttonId是一个自己定义的变量名,可更改。
wx.navigateTo({
url: newUrl, //新的链接,跳转至原链接地址所指页面,并传给它一个id
})
}
wx.request({
url: 'http://www.请求网页' + buttonId, //网页的相同部分+id,字符串的拼接形成不同的网址
data: '',
header: {},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: function (res) {
},
fail: function (res) { },
complete: function (res) { },
})
}
源代码:
//faq.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getData_faq()
},
//请求问题界面
getData_faq:function(){
var that = this;
wx.request({
url: 'http://www.网络请求列表信息',
data: '',
header: {},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: function(res) {
that.setData({
faq:res.data.content,
faqId:res.data.content.id,
})
},
fail: function(res) {},
complete: function(res) {},
})
},
// 按钮跳转回答界面
answer:function(es){
var faqId = es.currentTarget.id
var faq = this.data.faq;
var newUrl = '../faq6/faq6?buttonId=' + faqId;
wx.navigateTo({
url: newUrl,
})
var n = faqId;
app.faqPage = faq[n-1].question;
}
})
//faq6.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
faqP: ""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getData_faq(options.buttonId)
var faqPage1 = app.faqPage
this.setData({
faqP: faqPage1
})
},
//请求回答api
getData_faq: function (buttonId) {
var that = this;
var n = app.faqId;
wx.request({
url: 'http://www.详情页网络请求网址' + buttonId,
data: '',
header: {},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: function (res) {
that.setData({
content: res.data.content
})
},
fail: function (res) { },
complete: function (res) { },
})
}
})