微信小程序--通過請求網頁獲取信息並顯示
阿新 • • 發佈:2018-07-19
data- png itl nload var faq 進一步 div src 。
效果描述:
按動主頁按鈕跳轉至列表頁,在列表頁顯示請求網頁所獲取的信息,並通過所得信息的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 varfaqId = 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) { }, }) } })
微信小程序--通過請求網頁獲取信息並顯示