Develop simple wechat applet from zero

One day, on a whim, I wanted to play wechat applet and try the cloud development function of wechat, so I had the following simple finished products:

This applet contains three functions:

    1. Display of product banner pictures
    1. Display of product list
    • 2.1 display of popular products
    • 2.2 display of ordinary goods
    1. Instructions for applets

Interested people can experience by themselves through the above small program code~

OK, let's go directly to the development process~

Initialize project

adopt Wechat developer tools Create a new project.

Click the oversized + sign - > enter the appid of the applet you applied for - > check 'applet' for back-end service 'cloud development'

According to the above simple operation, you can enter your new applet, which is simple and fast.

Code directory structure of the project after initialization:

├── cloudfunctions # Cloud function
├── miniprogram # Applet foreground part
├── # Code document description
└── project.config.json # Project profile

PS: you need to apply for your own applet. Oh, the AppId tested does not support cloud development

Then click cloud development to enter your cloud development console:

Hey, in the next month, you can use resource balanced basic version 1 for free.

Write a part of the page that looks past

The UI framework used here is Vant Weapp . Can quickly develop good-looking UI.

The structure code of the home page is as follows:

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

  <view style="width: 100%; height: 300rpx; overflow: hidden;">
      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>

  <view style="width: 100%;">

  <view class="hot-list">
    <view wx:for="{{hotList}}" wx:key="index">
        origin-price="original price {{item.origin}}"
        price="After coupon {{item.current}}"
        thumb="{{ item.url }}"

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

  <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>

  <view bindtap="openGuide" class="strategy-btn">
      color="linear-gradient(to right, #f00, #EC644E)" 


The obtained renderings are as follows:

HMM ~ in order to make a simple but complete small program, I specially configured the guidance plate of the next strategy.

Relevant guide The wxml page structure code is as follows:

<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>Purchase steps of collecting coupons</text>
  <view class="guideModal-body">
    <view class="guide-item">
      <view class="guide-item-num">1</view>
      <view class="guide-item-content">
        <text>After understanding the steps, click the button below to operate</text>
    <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">
        <image class="image" mode="widthFix" src="{{course.img}}"></image>
  <view class="guideModal-footer">
    <view class="footer-btn" bindtap="iKnow">I got it!</view>

The effect is as follows:

Write a tunable api interface

For the interface called here, I use guide Take the data courseList in wxml as an example - it is the data described in one step. The required data structure is:

data: [{
  step: 1,
  title: 'this is step1',
  img: 'step 1 image note'

Operate on the cloud development console of the applet.

Create a new set on the database. Here I name it course, and then add records to this set. I have five steps to explain here, so I have created five pieces of data, as follows:

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

onGetCourse: function() {
  const db =;
        show: 1
        success: res => {
            courseList: || []
        fail: err => {}

Just through the above functions, we can't get the data. We have to set the data permission:

After that, upload the code and put it on line. Here, you can have a good time, as follows:

If this article is helpful for you to develop small programs, praise and encourage~

Later words

Added by Mightywayne on Tue, 08 Mar 2022 08:40:09 +0200