标签：格式 new 页面 col 初始 列表 app.js 自动 res
按动主页按钮跳转至列表页，在列表页显示请求网页所获取的信息，并通过所得信息的id的不同，链接到不同的网页进一步获取不同信息。
触碰按钮跳转至列表页
触碰表题按钮跳转至详情页
，其中不同的按钮对应的详情页内容不同而格式相同。
这样的好处是，可以通过网页信息的改变自动改变页面信息。
wx.request() //请求网页信息
wx.navigateTo() //跳转页面
1.在列表页，要将网页上获取的信息根据id的不同，选择对应信息显示在列表页，并将其显示在详情页的开头出，该处使用全局变量来实现页面间的信息传输；
2.列表页跳转至详情页，要根据自身携带的id来选择将从那个网页获取详情并显示，该处通过字符串的拼接实现页面间的id传输。
获取网页信息：
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) { }, }) } })
标签：格式 new 页面 col 初始 列表 app.js 自动 res
原文地址：https://www.cnblogs.com/cff2121/p/9337498.html
