写在前面

本篇文章是微信小程序开发入门的第十一篇，介绍小程序云开发之详情页面开发

详情页面开发

我们上篇文章已经编写了获得单个水果的详情数据的云函数，并且在小程序端成功获取了数据，现在我们要在页面上将获取的数据显示出来

先把获取到的数据赋值给fruitDetail变量，打开miniprogram\pages\fruit-detail\fruit-detail.js文件，添加如下代码，通过this.setData()方法给data中的fruitDetail变量赋值：

Page({
  data: {
    fruitDetail: {} // 添加的代码
  },
  onLoad(options) {
    ...
      .then(res => {
        // 添加的代码
        this.setData({
          fruitDetail: res.result.data.data
        })
      })
      .catch(err => {})
  },
})

然后编写页面代码，打开miniprogram\pages\fruit-detail\fruit-detail.wxml文件，编写代码如下，将fruitDetail的数据一一显示出来：

<view class="fruit_detail">
  <view class="fruit_img">此处为水果图片</view>
  <view class="fruit_info">
    <view class="fruit_price">
      <text class="oriPrice"><text class="qian">￥</text>{{fruitDetail.oriPrice}}</text>
      <text class="curPrice"><text class="qian">￥</text>{{fruitDetail.curPrice}}</text>
      <text class="vipPrice">会员价<text class="qian">￥</text>{{fruitDetail.vipPrice}}</text>
    </view>
    <view class="fruit_name">
      <view>
        {{fruitDetail.name}}
      </view>
      <view class="btn_box">
        <view class="edit_btn">
          编辑
        </view>
        <view class="del_btn">
          删除
        </view>
      </view>
    </view>
    <view class="fruit_intro">
      {{fruitDetail.intro}}
    </view>
    <view class="fruit_quantity">
      库存{{fruitDetail.quantity}}{{fruitDetail.unit}}
    </view>
  </view>
</view>

然后就是css代码，打开miniprogram\pages\fruit-detail\fruit-detail.wxss文件，编写代码如下，加了css代码后页面就出来了：

.fruit_detail {
  background-color: #fff;
  height: 100vh;
}

.fruit_img {
  width: 750rpx;
  height: 480rpx;
  line-height: 480rpx;
  text-align: center;
  color: #aaa;
  font-size: 28rpx;
  background-color: #fff;
  border-bottom: 32rpx solid #FAFAFA;
}

.fruit_info {
  padding: 32rpx;
}

.oriPrice {
  color: #bbbbbb;
  text-decoration: line-through;
}

.curPrice {
  color: #f44;
}

.vipPrice {
  display: inline-block;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 20rpx;
  background-color: #f44;
  color: #fff;
  border-radius: 0 18rpx;
  font-size: 28rpx;
  margin-left: 16rpx;
}

.qian {
  font-size: 24rpx;
}

.fruit_name {
  color: #333;
  padding: 16rpx 0 0 0;
  display: flex;
  justify-content: space-between;
}
.btn_box {
  display: flex;
  font-size: 28rpx;
}

.edit_btn {
  color: #409EFF;
  margin-right: 16rpx;
}

.del_btn {
  color: #F56C6C;
}

.fruit_intro {
  color: rgba(25, 45, 226, 0.8);
  padding-top: 16rpx;
  padding-bottom: 32rpx;
  font-size: 28rpx;
  border-bottom: 1rpx solid #FAFAFA;
}
.fruit_quantity {
  color: #999999;
  padding-top: 32rpx;
}

此时我们点击首页的某个水果，页面跳转到详情页，并且将详情信息展示出来了，页面效果如下：

这里我在页面上加了“编辑”和“删除”按钮，接下来的文章实现这两个功能

写在最后

以上就是小程序云开发之详情页面开发的全部内容