This is the 12th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

In the last article, we completed the production of the product list page. This article will continue to write the product details page and complete the jump from the list page to the details page. Will involve the knowledge points are: small program with parameters in the link jump, with parameters in the network request, evaluation module vant component use.

Product Details page

Create a pages>detail folder and write corresponding WXML, JSON, JS, WXSS files. Since this is not the focus of this article, I won’t go into details. Post code directly:

<! --pages/detail/detail.wxml--> <view class="detail-box"> <view class="goods-detail"> <image src="{{detailData.picUrl}}" mode="aspectFit"></image> <view class="goods-info"> <view class="name">{{detailData.name}}</view> <view class="brief">{{detailData.brief}}</view> </view> </view> <view class="comment"> <view class="input-area"> <van-field Value ="{{comment}}" placeholder=" bind:change="onCommentChange" /> </view> <view class="rate-area"> <van-rate value="{{ rate }}" bind:change="onRateChange" /> </view> <view class="upload-area"> <van-button type="warning" </view> <image class="uploadimages" wx:for="{{imagesData}}" wx:key="index" src="{{item}}"></image> </view> </view> <view class="submit"> <van-button type="primary" Submit </van-button> </view> </view>Copy the code

Jump with parameter

To realize the jump of wechat small program page, there are the following methods to share with you:

  • Using navigation components, tabs, and page links (this method has a background when clicked)
  • Add a bindTap event to the layout of the page, and then in the method, use wX. navigatorTo to do the jump (keep the current page, jump to a page in the application, use wX. navigateBack to return to the original page).
  • Use wX. redirectTo to jump (close the current page, jump to a page in the application)
  • NavigateBack to the previous level using wx.navigateBack (close the current page and return to the previous page or multiple levels).

This article will focus on the second method, which is to add bindTap to the list page index.wxml:

<button data-goodsid ="{{item.id}}" bindtap="gotoComment"> </button>Copy the code

The jump is implemented in the list page index.js

gotoComment: function(event) { let goodIndex = event.target.dataset.goodsid wx.navigateTo({ url: '.. /detail/detail? goodIndex='+goodIndex, }) }Copy the code

Receive the parameters and send the request

On the receiving page, we retrieve the parameters passed from the previous page in the lifecycle function onLoad and call the cloud function to implement the request detail page.

onLoad: function (options) { console.log(options.goodIndex) wx.cloud.callFunction({ name: 'goodsdetail', data: { goodIndex: options.goodIndex } }).then(res => { this.setData({ detailData: JSON. Parse (res) result)) data. The info})}). The catch (err = > {wx. ShowToast ({title: 'failed'})})}Copy the code

Since network requests are involved, we still create a new cloud function, Goodsdetail, and install a Promise Request (see the previous section for details) to request data as follows:

exports.main = async (event, context) => {
  return rp(`https://iyouquan.capelabs.cn/yfwx/goods/detail?id=${event.goodIndex}`)
  .then(function (res) {
      return res
  })
  .catch(function (err) {
      // Crawling failed...
  });
}
Copy the code

Evaluation module

This module is the key module for cloud development and use. This article first writes the initial static page, and the next part will explain how to complete the evaluation of goods, upload the evaluation pictures to the cloud storage, save the evaluation content to the cloud database, and use Promise to deal with JS asynchronous problems.

Reference the Vant component

Reference the Vant component in the corresponding detail.json:

{
  "component": true,
  "usingComponents": {
    "van-field": "@vant/weapp/field/index",
    "van-button": "@vant/weapp/button/index",
    "van-rate": "@vant/weapp/rate/index"
  }
}
Copy the code

Use the Vant component

Reference the Vant component in the corresponding detail.wxml:

<van-field value="{{comment}}" placeholder=" placeholder "/> <van-rate value="{{rate}}" Bind :change="onRateChange" /> <van-button type="warning" bindtap="uploadImage">Copy the code