One day, on a whim, I want to make a small program of wechat and try the cloud development function of wechat, so I have the following simple finished product:

This small program contains three parts of the function:

    1. Product banner picture display
    1. Display of a list of goods
    • 2.1 Display of popular products
    • 2.2 Display of ordinary commodities
    1. A guide to applets

Interested through the above small program code, their own experience ~

Well, go straight to the development process

Initialize the project

Create new projects through wechat developer tools.

Click the big + sign -> enter the AppId of your applet -> backend service check ‘applet. Cloud development ‘

Follow the above simple operation can enter your new small program, simple and quick.

The code directory structure of the project after initialization:

├ ─ ─ cloudfunctions# cloud function├ ─ ─ miniprogram# Small program foreground section├ ─ ─ the README, md# Code documentation└ ─ ─ project. Config. Json# Project profile
Copy the code

PS: To apply your own applets oh, the test AppId does not support cloud development

Then enter your cloud development console by clicking the cloud Development button:

Heh heh heh, in the next month, you can use the Balance of Resources – Basic 1 for free for one month.

A month is more than enough time to write a simple demo

Write sections of the page that make sense

The UI framework used here is Vant Pervasive P. Can quickly develop beautiful UI.

The structure code of the home page is as follows:

<! --index.wxml-->
<view class="index-page">
  <view class="navigation" style="{{navStyle}}">
    <view class="nav-text" style="{{navTextStyle}}">{{navTitle}}</view>
  </view>
  <view style="{{navStyle}}"></view>

  <view style="width: 100%; height: 300rpx; overflow: hidden;">
    <swiper 
      class="swiper"
      indicator-dots="true"
      autoplay="true" interval="5000" duration="500">
      <block wx:for="{{bannerList}}" wx:key="index">
        <swiper-item class="swiper-item" bindtap="previewGoods" data-item="{{item}}">
          <image class="swiper-img" src="{{item.url}}" mode="widthFix"></image>
          <text class="swiper-title">{{item.title}}</text>
        </swiper-item>
      </block>
    </swiper>
  </view>

  <view style="width: 100%;">
    <van-notice-bar
      left-icon="volume-o"
      text="{{notice}}"
    />
  </view>

  <view class="hot-list">
    <view wx:for="{{hotList}}" wx:key="index">
      <van-card
        tag="Hot"
        origin-price="The original {{item. Origin}}"
        price=After the "coupon {{item. The current}}"
        desc="{{item.desc}}"
        title="{{item.title}}"
        thumb="{{ item.url }}"
        bindtap="previewGoods"
        data-item="{{item}}"
        />
    </view>
  </view>

  <view class="goods-list" wx:if="{{goodsList.length > 0}}">
    <view wx:for="{{goodsList}}" wx:key="index">
      <van-card
        origin-price="The original {{item. Origin}}"
        price=After the "coupon {{item. The current}}"
        desc="{{item.desc}}"
        title="{{item.title}}"
        thumb="{{ item.url }}"
        bindtap="previewGoods"
        data-item="{{item}}"
        />
    </view>
    <view class="no-more-data">
      <van-icon name="smile-comment-o" style="margin-right: 10rpx;"/>No more data...</view>
  </view>

  <van-popup round show="{{showPopup}}" wx:if="{{isLoaded}}" close-on-click-overlay="{{false}}">
    <guide-modal wx:if="{{popupType===1}}" bind:closeGuide="onCloseGuide" courseList="{{courseList}}" goodsItem="{{toGuideItem}}"></guide-modal>
  </van-popup>

  <view bindtap="openGuide" class="strategy-btn">
    <van-button 
      size="small" 
      color="linear-gradient(to right, #f00, #EC644E)" 
      icon="send-gift-o">strategy</van-button>
  </view>

</view>
Copy the code

The resulting renderings are as follows:

Well ~ in order to do a simple but some complete small procedures, I specially configured the guide plate under the guide.

The related guide.wxml page structure code is as follows:

<! --guide.wxml-->
<view class="guideModal" style="margin-top: {{mgTop}}px">
  <view class="guideModal-head">
    <van-icon customStyle="display: block; margin-right: 4px;" name="info-o" size="16"></van-icon>
    <text>Coupon purchase steps</text>
  </view>
  <view class="guideModal-body">
    <view class="guide-item">
      <view class="guide-item-num">1</view>
      <view class="guide-item-content">
        <text>Once you understand the steps, click the button below to perform the operation</text>
      </view>
    </view>
    <view class="guide-item" wx:for="{{courseList}}" wx:for-item="course" wx:key="index">
      <view class="guide-item-num">{{course.step+1}}</view>
      <view class="guide-item-content">
        <text>{{course.title}}</text>
        <image class="image" mode="widthFix" src="{{course.img}}"></image>
      </view>
    </view>
  </view>
  <view class="guideModal-footer">
    <view class="footer-btn" bindtap="iKnow">I know the</view>
  </view>
</view>
Copy the code

The effect is as follows:

Write an API that makes sense

The interface called here, I’ll use the data courseList in guide.wxml as an example – is a step description of the data. The required data structure is:

data: [{
  step: 1.title: 'this is step1'.img: 'step 1 image note'
}]
Copy the code

Operate on the cloud development console of small programs.

I’m going to create a new collection on the database, which I’m going to call course, and then I’m going to add records to that collection. I have five steps here, so I created five data as follows:

After that, you can create a new query in the relevant JS file.

onGetCourse: function() {
  const db = wx.cloud.database();
  db.collection('course')
      .where({
        show: 1
      })
      .get({
        success: res= > {
          this.setData({
            courseList: res.data || []
          })
        },
        fail: err= >{}})}Copy the code

We can’t get the data through the above function, we have to set the data permission:

After, upload the code, arraignment line can be. Here, you can have a good time, as follows:

If this article is helpful for you to develop a small program, give a thumbs-up to encourage oh ~

The latter

  • First article: github.com/reng99/blog…

  • More: github.com/reng99/blog…