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

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.dataset
	      wx.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.js

import { requestFn } from './../../utils/index.js' //引用发起请求的自定义的函数
Page({
 onLoad: function (options) {
    // console.log(options,12) //获取编程导航地址栏携带信息
    this.getdetailDataFn(options)//调用产品详情页函数
  },

// 产品详情页
    getdetailDataFn(a) { 
      //console.log(a) //获取编程导航地址栏携带信息
      const { proid } = a	//获取详情页产品id
      requestFn({ 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()
       }
     })
   })
}