项目简介

通过在云函数中调用商品列表API接口获取商品信息列表，并完成对商品的评价，评价图片上传到云存储，评价内容保存到云数据库同时涉及使用Promise处理JS异步问题，并且能够获取当前小程序用户信息。项目中适当调用第三方组件库Vant。项目完成后如何审核上线等。

Vant组件库

Vant 是有赞前端团队开源的移动端组件库，对外服务十多万开发者，是业界主流的移动端组件库之一。目前 Vant 官方提供了Vue 版本和微信小程序版本，这里我们主要使用微信小程序版本。

安装：

选择minprogram文件夹右击，选择“在外部终端窗口中打开”输入：

# 通过 npm 安装 
npm i @vant/weapp -S --production

npm 构建：

选择菜单栏中的‘工具’，点击选择npm构建；

使用npm：

还要在‘详情’，本地设置中勾选使用npm:

完成以上步骤后，就可以在小程序中使用Vant组件库了。

商品列表

在云函数中调用商品列表API接口获取商品信息列表，这里网络请求使用request-promise。

开发步骤：

新建云函数，发送网络请求，获取数据；
编写商品列表页面；
调用云函数。

每次更新云函数都要右击重新点击上传并部署，不然新的修改将不会起作用；

request-promise 的安装：选择对应云函数文件夹，右击选择“在外部终端窗口中打开”,依次输入以下代码：

npm install --save request
npm install --save request-promise

完成request-promise 的安装,云函数中发起的网络请求如下：

// 云函数入口文件
const cloud = require('wx-server-sdk')
// 引入request-promise用于做网络请求
var rp = require('request-promise');
cloud.init()
const axios = require('axios')
// 云函数入口函数
exports.main = async (event, context) => {
  let url = 'https://iyouquan.capelabs.cn/yfwx/goods/list?categoryId=1008002&page=1&limit=10';
  return await rp(url)
    .then(function (res) {
      return res
    })
    .catch(function (err) {
      return '失败'
    });
}

然后在小程序端的页面中，对云函数进行调用：

 getGoodsList: function() {
    wx.cloud.callFunction({
      name: 'movielist',  // 新建的云函数名称
    }).then(res => {
      console.log(res.result)
      this.setData({
        goodsList: this.data.movieList.concat(JSON.parse(res.result).data.list)
      })
    }).catch(err => {
      console.log(err)
    })
  }

将数据展示的页面上：

<view class="goods-list">
  <block wx:for="{{goodsList}}" wx:key="index">
    <view class="list-box">
      <view class="img">
        <image src="{{item.picUrl}}" mode="aspectFit"></image>
      </view>
      <view class="info">
        <view class="title">{{item.name}}</view>
        <view class="brief">{{item.brief}}</view>
        <view class="btn">
          <button data-goodsId="{{item.id}}" bindtap="gotoComment">去评价</button>
        </view>
      </view>
    </view>
  </block>
</view>

这样就完成了商品列表的初始化，接下里的文章，将要继续开发详情页面以及云开发最终的评价功能，请大家持续关注！

创作不易，点个赞鼓励鼓励吧~~~

小程序云开发入门（7）-列表页构建

项目简介

Vant组件库

安装：

npm 构建：

使用npm：

商品列表