用uview写一个小程序商品详情页

当然可以！以下是使用uView框架编写一个商品详情页的示例代码：

<template>
  <view class="container">
    <view class="header">
      <!-- 商品图片 -->
      <image :src="product.image" mode="aspectFill" class="product-image"></image>
      <!-- 商品标题和价格 -->
      <view class="product-info">
        <text class="product-title">{{ product.title }}</text>
        <text class="product-price">￥{{ product.price }}</text>
      </view>
    </view>
    <view class="content">
      <!-- 商品描述 -->
      <text class="product-desc">{{ product.desc }}</text>
      <!-- 商品属性 -->
      <view class="product-attributes">
        <text v-for="(value, key) in product.attributes" :key="key" class="attribute-item">
          {{ key }}: {{ value }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      product: {
        title: '商品标题',
        price: 99.99,
        desc: '这是一个商品描述',
        image: '商品图片链接',
        attributes: {
          属性1: '值1',
          属性2: '值2',
          属性3: '值3'
        }
      }
    };
  }
};
</script>

<style>
.container {
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.product-image {
  width: 120px;
  height: 120px;
}

.product-info {
  flex-grow: 1;
  margin-left: 10px;
}

.product-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-price {
  font-size: 16px;
  color: #ff0000;
}

.content {
  margin-bottom: 20px;
}

.product-desc {
  margin-bottom: 10px;
}

.product-attributes {
  display: flex;
  flex-wrap: wrap;
}

.attribute-item {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>

这段代码通过uView框架实现了一个简单的商品详情页，包括商品图片、标题、价格、描述和属性等信息的展示。你可以根据实际需求进行修改和扩展。希望对你有所帮助！