微信小程序--通過請求網頁獲取信息並顯示

效果描述：

按動主頁按鈕跳轉至列表頁，在列表頁顯示請求網頁所獲取的信息，並通過所得信息的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) { },
    })
  }
})