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

In the first few articles, we have introduced the basics of cloud development and some preparations before starting a project. Now let’s complete a small case study of cloud development product evaluation

Project introduction

By calling the product list API interface in the cloud function to get the list of product information, and complete the evaluation of the product, the evaluation picture is uploaded to the cloud storage, the evaluation content is saved to the cloud database, and involves the use of Promise to deal with JS asynchronous problems, and can obtain the current small program user information. Third-party component library Vant is called appropriately in the project. How to review and launch the project after completion.

Vant component library

Vant is the open source mobile terminal component library of Youzan’s front-end team. It serves more than 100,000 developers externally and is one of the mainstream mobile terminal component libraries in the industry. At present, Vant officially provides Vue version and wechat small program version. Here, we mainly use wechat small program version.

Installation:

Right-click on the MinProgram folder and select “Open in external Terminal Window”. Enter:

# install npmi@vant/app-s --production with NPMCopy the code

NPM construction:

Select “Tools” in the menu bar and click “NPM Build”.

Use NPM:

Also check use NPM in ‘Details’, local Settings:

After completing the above steps, you are ready to use the Vant component library in your applet.

List of goods

Call the itemlist API in the cloud function to get the itemlist, where the network request uses request-Promise.

Development Steps:

  • Create a cloud function to send network requests and obtain data;
  • Write the product list page;
  • Call the cloud function.

Right click and re-click upload and deploy each time you update the cloud function, otherwise the new changes won’t work;

To install Request-Promise: Select the corresponding cloud function folder, right-click and choose “Open in external Terminal Window”, and enter the following code in sequence:

npm install --save request
npm install --save request-promise
Copy the code

After the installation of request-Promise is complete, the following network requests are made in the cloud function:

Var rp = require('request-promise'); var rp = require('request-promise'); var rp = require('request-promise'); Cloud.init () const axios = require('axios') // 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 'fail'}); }Copy the code

Then, in the page of the applet side, call the cloud function:

getGoodsList: function() { wx.cloud.callFunction({ name: Then (res => {console.log(res.result) this.setdata ({goodsList: this.data.movieList.concat(JSON.parse(res.result).data.list) }) }).catch(err => { console.log(err) }) }Copy the code

To display the data on the page:

<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" > to evaluate < / button > < / view > < view > < view > < / block > < / view >Copy the code

In this way, the initialization of the list of goods has been completed. In the next article, we will continue to develop the details page and the final evaluation function of cloud development. Please keep paying attention to it!

Creation is not easy, point a like to encourage it ~~~