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

最近有小伙伴在开发小程序商城项目,问到关于如何实现点击产品,跳转到详情页请求不同的产品数据,详情页的样式结构可以是一样的,但是产品数据肯定不一样,因此这篇文章主要讲解跨页面数据传递的实现原理

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

详情页请求不同数据的实现原理

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

首页的wxml结构:

<!--index.wxml-->
<view>
        <block wx:for='{{brand}}' wx:key="{{index}}">
        <navigator url="/pages/details/details?goodsId={{index}}">
            <view>
                <image src='{{item}}' mode='widthFix'></image>
            </view>
            </navigator>
        </block>
</view>

首页的js数据:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
        //产品列表数据;
        brand: ['/img/prolist01.png', '/img/prolist02.png','/img/prolist03.png'],
  }
})

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

详情页wxml结构:

<!--pages/details/details.wxml-->

<text>产品名称:{{showTitle}}</text>
<view>产品图片:</view>
<image src='{{showImg}}' mode='widthFix'></image>
<view>产品描述:</view>
<view>{{showDesc}}</view>

详情页js数据:

// pages/details/details.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
        showTitle: '', //详情页显示标题;
        showImg: '', //详情页显示图片;
        showDesc: '', //详情页显示描述;
        //下面是先进行存储的不同产品数据;
        productsList: [
            { title: '我是产品名称1', img: '/img/prolist01.png', desc: '产品1非常好,balabala~~~' },
            { title: '我是产品名称2', img: '/img/prolist02.png', desc: '产品2非常好,balabala~~~' },
            { title: '我是产品名称3', img: '/img/prolist03.png', desc: '产品3非常好,balabala~~~'},
        ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
        var goodsId = options.goodsId;
            this.setData({
                showTitle: this.data.productsList[goodsId].title,
                showImg: this.data.productsList[goodsId].img,
                showDesc: this.data.productsList[goodsId].desc,
            });
  }
})

因仅做demo演示,因此案例都是采用了本地数据,实际项目中需要通过ajax进行请求服务器中的产品数据。

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

onLoad: function (options) {
    var goodsId = options.goodsId;
  }

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

this.setData({
    showTitle: this.data.productsList[goodsId].title,
    showImg: this.data.productsList[goodsId].img,
    showDesc: this.data.productsList[goodsId].desc,
});

总结

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

demo源码下载地址:
链接:https://pan.baidu.com/s/12qdQLDdCXEkgNLBb2ItHkQ
提取码:uayy

推荐阅读更多精彩内容