微信小程序：详情页请求不同数据的实现原理

Posted 2023-03-22

参考技术A

如图所示是接下来需要完成的效果：

页面结构：2个， index (首页)以及 details (详情页)，首页是产品列表，点击产品后进入对应的详情页。

首页的wxml结构:

首页的js数据：

对于详情页请求数据，核心在于点击对应产品然后请求对应的产品数据，因此这里的 navigator 组件跳转的url至关重要，这里的 /pages/details/details?goodsId=index 是模拟了后台提供的数据接口，后面的 goodsId 作为产品的辨识符，当点击之后可以获取到当前点击的是哪个产品，以供详情页进行请求数据。

详情页wxml结构：

详情页js数据：

详情页请求数据的重点在于生命周期函数， onLoad 函数，它可以在页面加载的时候进行触发，并可以通过参数获取到跳转链接上面的辨识符，也就是通过 onLoad 函数中的 options ，获取到了刚才在 index.wxml 页面url中的辨识符： goodId ；

通过它可以获取到对应的产品数据，再将数据进行修改更新到详情页结构 details.wxml 即可。

本案例中跨页面传递数据主要是利用了URL传值，在另外一个页面中接收，并将数据渲染到页面中，这个过程就需要用到生命周期函数：onLoad函数。

微信小程序--通过请求网页获取信息并显示

效果描述：

按动主页按钮跳转至列表页，在列表页显示请求网页所获取的信息，并通过所得信息的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) { },
    })
  }
})