云开发（微信-小程序）笔记（八）----云存储，你来了（中）

云开发（微信-小程序）笔记（七）----云存储，你来了（上）

1.上传并显示图片

1.准备图片上传到云存储中

2.在Goods表中添加img字段，并把下载地址（只有问号之前的部分）或fileID 作该字段的值

3.创建一个页面goods
（1）在app.json中的pages字段中添加如下

"pages/goods/goods", 

4.编写goods.js字段

// pages/goods/goods.js
Page({
  onLoad(){
    wx.cloud.database().collection('Goods').get()
    .then(res => {
      console.log('请求成功！',res)
      this.setData({
        list: res.data
      })
    })
    .catch(res => {
      console.log('请求失败！',res)

    })
  }
})

5.编写goods.wxml,显示商品

<!--pages/goods/goods.wxml-->
<view wx:for="{{list}}">
  <view class="it">
    <image src="{{item.img}}" class="img"></image>
    <text>商品名：{{item.name}},价格：{{item.price}}</text>
  </view>
</view>

6.编写goods.wxss,美化界面

/* pages/goods/goods.wxss */
.img{
  /*照片的大小*/
  width: 300rpx;
  height: 200rpx;
}
.it{
  /*距离下滑线上下间隔距离及下滑线*/
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid gainsboro; 
}

7.编写goods.json,修改标题
{
  "usingComponents": {},
  "navigationBarTitleText": "商品列表"
}

2.商品列表页跳转到商品详情

1.准备图片上传到云存储中

2.在Goods表中添加img字段，并把下载地址（只有问号之前的部分）或fileID 作该字段的值

3.创建一个页面goods（商品列表），goods-1(商品详情页)
在app.json中的pages字段中添加如下

   "pages/goods/goods", 
    "pages/goods-1/goods-1", 

4.编写goods.js代码

// pages/goods/goods.js
Page({
  onLoad(){
    wx.cloud.database().collection('Goods').get()
    .then(res => {
      console.log('请求成功！',res)
      this.setData({
        list: res.data
      })
    })
    .catch(res => {
      console.log('请求失败！',res)

    })
  },
  go(e){
    console.log(e.currentTarget.dataset.id)
    wx.navigateTo({
      url: '/pages/goods-1/goods-1?id=' + e.currentTarget.dataset.id,
    })

  }
})

5.编写goods.json代码

{
  "usingComponents": {},
  "navigationBarTitleText": "商品列表"
}

6.编写goods.wxml代码

<!--pages/goods/goods.wxml-->
<view wx:for="{{list}}">
  <view class="it" bindtap="go" data-id="{{item._id}}">
    <image src="{{item.img}}" class="img"></image>
    <text>商品名：{{item.name}},价格：{{item.price}}</text>
  </view>
</view>

7.编写goods.wxss代码

/* pages/goods/goods.wxss */
.img{
  /*照片的大小*/
  width: 300rpx;
  height: 200rpx;
}
.it{
  /*距离下滑线上下间隔距离及下滑线*/
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid gainsboro; 
}

8.编写goods-1.js代码

// pages/goods-1/goods-1.js
Page({
  onLoad(options) {
    console.log(options.id)
    wx.cloud.database().collection("Goods").doc(options.id).get()
    .then( res =>{
      console.log('请求成功',res)
      this.setData({
        list: res.data
      })
    })
    .catch( res => {
      console.log('请求失败',res)
    })

  },
})

9.编写goods-1.json代码

{
  "usingComponents": {},
  "navigationBarTitleText": "商品详情"
}

10.编写goods-1.wxml代码

<!--pages/goods-1/goods-1.wxml-->
<image src="{{list.img}}" ></image>
<text>商品名：{{list.name}},商品价格：{{list.price}},商品生产地：{{list.shengchandi}}</text>

11.编写goods-1.wxss代码

/* pages/goods-1/goods-1.wxss */
image{
  /* 照片放大100% */
  width: 100%;
}

效果如图


云开发（微信-小程序）笔记（九）----云存储，你来了（下）

感谢大家，点赞，收藏，关注，评论！