微信小程序点击商品跳转商品详情页面的方法

最近在学习微信小程序电商类开发的时候遇到了一个问题。自己写好的json AIP 接口想通过点击相同的图片跳转到商品详情页面无法实现，几经周折后想到了 navigator 通过页面传参取json数据下标的方法，这个方法实测可以使用以下是部分json数据和小程序代码。

顺便分享一个json转API的网站：myjson 创建API快捷跳转

一、封装wx.request
当然不进行封装也是可以用的，这里封装只是为了方便使用，初学者不介意直接上手封装。

index.js内容：

export const get=(url,data,callback)=>{wx.request({url:url,data:data,method:"GET",success:(res)=>{callback(res.data)}})fail:(err)=>{callback(err)}
}
export const post = (url, data, callback) => {wx.request({url: url,data: data,method: "POST",success: (res) => {callback(res.data)}})fail: (err) => {callback(err)}
}

baseUrl.js 内容：

export const baseurl ="https://api.myjson.com/bins";
//地址为API地址相同部分

list.js 内容：

import * as baseurl from "./baseUrl.js"
export const homeurl = baseurl.baseurl +"/hcjz6"
export const idxurl = baseurl.baseurl +"/1d5j42"
//加号后面的地址为API地址不同的部分

二、主页内容

json数据：

//id必须有，不然无法通过传参获取下标
{"count": 3,"start": 0,"subjects": [{ "id":0,"RMB":"￥104","getrmb":"336人付款","images": {"src": "https://img.alicdn.com/bao/uploaded/i3/23558426/O1CN01gafmuE2C79oxkNlDd_!!0-item_pic.jpg_300x300q85s150.jpg_.webp"},"title": "简易电脑桌台式书桌家用简约写字台临时办公桌子特价出租房公寓桌"},{"id":1,"RMB":"￥2090","getrmb":"226人付款","images": {"src": "https://img.alicdn.com/bao/uploaded/i2/2121734468/TB2WCb3h04opuFjSZFLXXX8mXXa_!!2121734468.jpg_300x300q85s150.jpg_.webp"},"title": "皮床双人床真皮床榻榻米床现代简约网红床卧室欧式多功能婚床主卧"}]
}

WXML

<!-- navigator 中的url 路径是详情页面所在的位置，？后面的cat是绑定id来传参的 -->
<view class="shopping">
<navigator class="shop" wx:for="{{list}}" bindtap="clickD" url="../home/home?cat={{item.id}}"><image src="{{item.images.src}}"></image><view><text>{{item.title}}</text></view><view class="price"><text>{{item.RMB}}</text><text>{{item.getrmb}}</text></view></navigator>
</view>

import *as API from "../../api/index.js"
import *as url from "../../api/list.js"onLoad: function (options) {API.get(url.idxurl, { start: this.data.start, count: this.data.count }, res => {console.log(res)this.setData({list: res.subjects})})}

三、商品详情

WXML

<swiper><view wx:for="{{list.shoplun}}" wx:key="*this"><swiper-item><image src="{{item.src}}"></image></swiper-item></view>
</swiper>
<view>{{list.xq.rmb}}</view>
<view>{{list.xq.endrmb}}</view>
<view>{{list.xq.title}}</view>
<view>
<view wx:for="{{list.images}}" wx:key="*this" >
<image src="{{item.src}}"></image>
</view>
</view>

//这里的options接收的就是主页navigator传的参，也就是cat=什么，所以下标才是options.cat。
import *as API from "../../api/index.js"
import *as url from "../../api/list.js"
onLoad: function (options) {API.get(url.homeurl,{start:1,count:4},(res)=>{this.setData({list: res.subject.shop[options.cat]})})}

部分json数据代码

{"subject": {"shop": [{"shoplun": [{"src": "https://img.alicdn.com/imgextra/i3/23558426/O1CN01gafmuE2C79oxkNlDd_!!0-item_pic.jpg_640x640q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/TB1s6c1FFXXXXcNXFXXXXXXXXXX_!!0-item_pic.jpg_640x640q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/23558426/TB29b.KgFXXXXbeXpXXXXXXXXXX_!!23558426.jpg_640x640q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/23558426/TB2BMZSgFXXXXXrXpXXXXXXXXXX_!!23558426.jpg_640x640q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/23558426/T2xCZQXthXXXXXXXXX_!!23558426.jpg_640x640q80_.webp"}],"xq": {"rmb": "91-133","endrmb": "96-138","title": "简易电脑桌台式书桌家用简约写字台临时办公桌子特价出租房公寓桌","sf": "快递 免运费","shope": "月销638","city": "北京"},"images": [{"src": "https://img.alicdn.com/imgextra/i1/23558426/O1CN01JLzpwM2C79p03D0EQ_!!23558426.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/23558426/O1CN01OqSoEN2C79p0bA4W2_!!23558426.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/23558426/O1CN01oqkbch2C79p18Coli_!!23558426.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/23558426/O1CN01rFe7dr2C79oxH9nXR_!!23558426.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/23558426/O1CN01dUVyHN2C79ozIQjF6_!!23558426.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i1/23558426/O1CN01znGAwP2C79ozIRw6l_!!23558426.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i1/23558426/O1CN01HOEOuj2C79oz8c9KW_!!23558426.jpg_640x0q80_.webp"},{"src": "https://gw.alicdn.com/tfs/TB1d0h2qVYqK1RjSZLeXXbXppXa-1125-960.png?getAvatar=avatar"}]},{"shoplun": [{"src": "https://img.alicdn.com/imgextra/i2/2121734468/TB2WCb3h04opuFjSZFLXXX8mXXa_!!2121734468.jpg_640x640q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/TB2Md12oHBkpuFjy1zkXXbSpFXa_!!2121734468.jpg_640x640q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/TB2aN2Gh00opuFjSZFxXXaDNVXa_!!2121734468.jpg_640x640q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i1/2121734468/TB27aJTtXXXXXcHXXXXXXXXXXXX_!!2121734468.jpg_640x640q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/2121734468/TB26MeMixtmpuFjSZFqXXbHFpXa_!!2121734468.jpg_640x640q80_.webp"}],"xq": {"rmb": "2090-4770","endrmb": "4180-9540","title": "皮床双人床真皮床榻榻米床现代简约网红床卧室欧式多功能婚床主卧","sf": "家装物流 免运费","shope": "月销395","city": "广东佛山"},"images": [{"src": "https://img.alicdn.com/imgextra/i4/2121734468/O1CN01BX8M0f1isOC2vZwQT_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/2121734468/TB2oUh3aB_B11BjSspcXXb0sVXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/TB2M9RLcKtTMeFjSZFOXXaTiVXa_!!2121734468.gif_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/TB2pt_5h04opuFjSZFLXXX8mXXa_!!2121734468.gif_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i1/2121734468/TB2PSipgHXlpuFjy1zbXXb_qpXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i1/2121734468/TB2DeGai_JYBeNjy1zeXXahzVXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/2121734468/TB2dtFplVXXXXX4XXXXXXXXXXXX_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i1/2121734468/TB2TEjCh.hnpuFjSZFpXXcpuXXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/TB2aN2Gh00opuFjSZFxXXaDNVXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/TB2RRrphVXXXXaeXXXXXXXXXXXX_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/TB2zGbahVXXXXXgXpXXXXXXXXXX_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/TB2uG66i3aTBuNjSszfXXXgfpXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/TB22ookq5pnpuFjSZFkXXc4ZpXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/TB2h9v.ol8kpuFjSspeXXc7IpXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/TB26Uy6k4RDOuFjSZFzXXcIipXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/TB24eNxiHlmpuFjSZFlXXbdQXXa_!!2121734468.gif_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/TB2pZz0obVkpuFjSspcXXbSMVXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i1/2121734468/TB2U5b2cthvOuFjSZFBXXcZgFXa_!!2121734468.gif_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i1/2121734468/TB2NODOol4lpuFjy1zjXXcAKpXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/TB2r.qnhgJkpuFjSszcXXXfsFXa_!!2121734468.gif_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/TB2dCD.ol8kpuFjSspeXXc7IpXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/TB2lt5Hhl0lpuFjSszdXXcdxFXa_!!2121734468.gif_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/TB2crZxqYBmpuFjSZFuXXaG_XXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i4/2121734468/O1CN01O4guAo1isOC0i8l7U_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i1/2121734468/TB2njCFhhXkpuFjy0FiXXbUfFXa_!!2121734468.gif_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/2121734468/TB2N.geq4xmpuFjSZFNXXXrRXXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i1/2121734468/TB2i81EhhXlpuFjSsphXXbJOXXa_!!2121734468.gif_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/TB2w8l1Xh3X61Bjy0FlXXaGtVXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/2121734468/TB2YIGXb4vzQeBjSZFxXXXLBpXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/O1CN011VH5b21isO6gWBLB8_!!2121734468.png_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/TB2y_03d41YBuNjy1zcXXbNcXXa_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/2121734468/TB2Wvb3eVXXXXbMXpXXXXXXXXXX_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i2/2121734468/O1CN011DiDJi1isOByIXWIg_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/2121734468/O1CN01nbnmHZ1isOC2FuTaX_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://img.alicdn.com/imgextra/i3/2121734468/O1CN01mL9BJv1isO62pZSjq_!!2121734468.jpg_640x0q80_.webp"},{"src": "https://gw.alicdn.com/tfs/TB1d0h2qVYqK1RjSZLeXXbXppXa-1125-960.png?getAvatar=avatar"}]}

四、实现效果

实现效果如下：
主页点击任意商品

跳转点击商品对应的详情页面（偷懒不想布局了…见谅）

最终实现点击哪个商品跳转哪个商品的详情页面。

以上如果有不足的地方请大家及时指正~感谢阅读。

微信小程序点击商品跳转商品详情页面的方法相关推荐

微信小程序左上角返回按钮跳转到指定页面
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 在当前页面的 onUnload 执行页面跳转 onUnload: function () {wx.reLaun ...
微信小程序-学生登录后跳转-显示教师页面信息
1.页面跳转. //页面跳转wx.redirectTo({url: '../teachers/teachers' //跳转到教师页面}) 2.显示老师页面信息 wxml中 <view class ...
微信小程序入门与实战之构建阅读详情页面
构建文章详情页面由于通常我们的后端人员可能没办法先给我们提供数据,所以我们要采用先静后动的开发方式. 我们所要实现的效果,如图所示: 基础代码: <view class="conta ...
微信小程序---搜索功能并跳转搜索结果页面
搜索页面: search.wxml页面: <view class="form"><input class="searchInput" valu ...
微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面 1 w ...
微信小程序实现锚点跳转
微信小程序实现锚点跳转 1.先上效果图,看看是不是你想要的. 2.主要用到的微信小程序的scroll-view 组件实现该效果.核心主要是使用scroll-into-view属性跳转对应的标签页和标签 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
微信小程序点击更改样式-点击获得下划线
微信小程序点击更改样式-点击获得下划线 <view class="container"> <scroll-view class='headerBox' scrol ...
微信小程序点击弹出输入框
微信小程序点击弹出输入框第一次写博客,我决定不要太old school. let's get it!最近在学习微信开发,刚接触到微信小程序,自己尝试着做了一个简单的小程序,过程中发现类似web开发中 ...

微信小程序点击商品跳转商品详情页面的方法

微信小程序点击商品跳转商品详情页面的方法相关推荐

最新文章

热门文章