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

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

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

首页的wxml结构:

首页的js数据：

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

详情页wxml结构：

详情页js数据：

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

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

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

微信版本升级后，打开微信，点击底部的“发现”这个菜单项，就会发现升级后的“发现”菜单里，增加了“小程序”这样一个功能。

点击打开小程序后，可以看到有附近的小程序和我的小程序，附近的小程序是所在定位周边的小程序。

下面的小程序列表可以看到的是我们之前打开过的一些小程序，如果有自己觉得很好用的小程序就可以点击左上角，添加到我的小程序里面。

微信小程序还有具有搜索功能，打开搜索页面可以输入想要找的小程序。

第一步，把要改变样式添加到相应js文件的全局变量中，如： data : { color : '#000' }

第二步，将变量绑定到view中,如：<view style="color:{{color}}">

第三步，在view中添加事件，如： bindtap="changeColor"

第四步，在相应js文件中添加该自定义方法：

, changeColor: function(e){

thissetData({ color : '#fff' });

}

要进入订单详情页面，需要先获取用户的订单信息，然后根据订单号或者其他唯一标识符来查询订单详情。具体的实现步骤如下：

1 在小程序中，用户参与活动抽奖后，可以获得一个奖品或者优惠券等。

2 当用户获得奖品或者优惠券后，需要生成一个订单，并将订单信息保存到后台数据库中。

3 在小程序中，用户可以通过点击“我的订单”按钮来查看自己的订单列表。

4 在订单列表中，用户可以找到自己获得的奖品或者优惠券的订单，并点击进入订单详情页面。

5 在订单详情页面中，用户可以查看自己的订单信息，包括订单号、奖品名称、优惠券码等。

6 如果用户获得的奖品需要在实体店领取，可以在订单详情页面中显示实体店的地址和****，方便用户前往领取。

7 如果用户获得的奖品可以直接在小程序中使用，可以在订单详情页面中显示使用方式和注意事项等。

总之，进入订单详情页面需要先生成订单并保存到后台数据库中，然后在小程序中查询订单信息，并展示在订单详情页面中。

很多刚刚开始主动接触小程序的朋友们不太清楚，一些使用频率较高的小程序该怎么添加到固定位置？今天来和大家分享如何添加小程序到我的小程序里。

方式一：小程序入口

点击微信底部导航“发现” —>点击“小程序”—>在最近使用列表中能看到历史使用的小程序—>选中喜欢的小程序向左滑动，点击添加到我的小程序，即可完成添加，之后在我的小程序中就能看到自己添加的小程序。

方式二：顶部下拉搜索入口

在微信的聊天页面，按住页面往下拉—>在最近使用的小程序中选中喜欢的小程序，按住往下拖—>下方会出现一个添加框，拖至此处即可添加为我的小程序。

方式三：在小程序页面 *** 作

先进入一个小程序首页—>点击右上角的“…”—>点击添加到我的小程序。

注：这个 *** 作同样适用于小程序简介页面和授权登录页面。

以上就是怎样将微信小程序添加到我的小程序里的教程分享，希望能够对大家有所帮助。微信的这个设计可以让用户更方便地使用小程序，增加用户和小程序之间的粘性。

以上就是关于微信小程序：详情页请求不同数据的实现原理全部的内容，包括:微信小程序：详情页请求不同数据的实现原理、微信里的小程序怎样弄、微信小程序，weixin，求助，一个循环列表，点击自身时增加一个样式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！