1.微信小程序—点击商品列表进入产品的详情页面

1.1构建详情页

app.json

"pages": ["pages/detail/detail"
],

1.2路由跳转

1.2.1声明式导航跳转

使⽤⼩程序组件-导航-navigator

链接 navigator

逻辑：在navigator组件的url上写入要跳转的详情页地址,组件写在产品列表最外层

// components/prolist/prolist.wxml
<view class="prolist">
<!-- 声明式导航 --><navigator url="{{'/pages/detail/detail?proid=' + item.proid}}"wx:for="{{prolist}}" wx:key="item.proid"><view class="proitem" ><view class="itemimg"><image class="img" src="{{item.proimg}}"></image></view><view class="iteminfo"><view class="title">{{item.proname}}</view><view class="price">￥{{item.price}}</view></view></view></navigator>
</view>

1.2.2编程式导航

使⽤⼩程序提供的 api—导航实现编程式路由的跳转

链接 wx.navigateTo

常用的有：

wx.navigateTo(Object object)
保留当前⻚⾯，跳转到应⽤内的某个⻚⾯。但是不能跳到 tabbar ⻚⾯。使⽤wx.navigateBack 可以返回到原⻚⾯。⼩程序中⻚⾯栈最多⼗层

wx.switchTab(Object object)
跳转到某个tabbar ⻚⾯，并关闭其他所有非 tabbar 页面

逻辑：bindtap定义事件,采用data-params形式传递事件参数，并在事件中根据 event/a ( 随便写 )获取该参数

// components/prolist/prolist.wxml<!-- 编程式导航 -->
<view class="pro" wx:for="{{pros}}" wx:key="proid"  data-proid='{{item.proid}}' bindtap='toDetail'><view class="imgitem"><image src="{{item.proimg}}"></image></view><view class="infoitem"><view class="title">{{item.proname}}</view><view class="price">￥{{item.price}}</view></view>
</view>

// components/prolist/prolist.js
methods: {  //组件的方法
// 编程式导航 跳转到详情页toDetail(a){// console.log(a)   // 获取data-xxx数据const {proid} =a.currentTarget.datasetwx.navigateTo({url: `/pages/detail/detail?proid=${proid}`})}}

1.3详情页渲染

pages/detail/detail.wxml<view class="detailItem"><view class="detailImg"><image src="{{proDetail.proimg}}"/></view><view class="detailInfo"><view>{{proDetail.proname}}</view><view class="detailPrice">￥{{proDetail.price}}</view><view>{{proDetail.note}}</view></view>
</view>

pages/detail/detail.jsimport { requestFn } from './../../utils/index.js' //引用发起请求的自定义的函数
Page({onLoad: function (options) {// console.log(options,12) //获取编程导航地址栏携带信息this.getdetailDataFn(options)//调用产品详情页函数},// 产品详情页getdetailDataFn(a) { //console.log(a) //获取编程导航地址栏携带信息const { proid } = a //获取详情页产品idrequestFn({ url: '/pro/detail?proid=' + proid }).then(res => {var article = res.data.data.detail;this.setData({proDetail: res.data.data})})}
})

utils/index.js //自定义的发起请求的函数const baseUrl = 'http://daxun.kuboy.top/api'    export function requestFn(options){const { url, data, method}=options;wx.showLoading({title:"加载中"})return new Promise((resolve,reject)=>{wx.request({url:baseUrl+url,data:data||{},//默认值method:method||'GET',success:(res)=>{resolve(res)},fail:err=>{reject(err)},complete:()=>{wx.hideLoading()}})})
}

逆战GOGO之微信小程序—点击商品列表进入详情页面相关推荐

微信小程序点击商品跳转商品详情页面的方法
最近在学习微信小程序电商类开发的时候遇到了一个问题.自己写好的json AIP 接口想通过点击相同的图片跳转到商品详情页面无法实现,几经周折后想到了 navigator 通过页面传参取json数据 ...
微信小程序点击页面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开发中 ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
微信小程序点击放大图片
微信小程序点击放大图片在做微信小程序的时候遇到了这个点击放大的事件,这里记录一下 checkmap:function(e){var imageurl=this.data.mapimagesrc;co ...
微信小程序点击按钮分享指定页面
微信小程序点击按钮分享指定页面 1.在wxml里写所要点击的按钮 <button data-info='{{order}}' open-type="share" hover- ...
微信小程序点击复制功能
微信小程序点击复制功能 wx.setClipboardData({data: data, // data就是需要复制的数据success: res => {this.onClose() // 复 ...
微信小程序点击加音效
微信小程序点击加音效 1.首先微信小程序的开发文档里有这样一个方法wx.createInnerAudioContext() 2.封装方法 eggMusic(){const innerAudioCont ...

逆战GOGO之微信小程序—点击商品列表进入详情页面