Zero Foundation – Introduction to WeChat Mini Programs

Table of contents

foreword

This tutorial mainly introduces the registration, composition, related code functions, debugging and publishing of WeChat Mini Programs. To learn to make WeChat Mini Programs, it is best to have HTML, CSS, and JavaScript basics, of course, it doesn’t matter if you don’t! The operation is very simple, the code is very simple, please rest assured to eat!

1. Prerequisites for making WeChat Mini Programs

1. Related introduction

To learn to make WeChat Mini Programs, there are two websites that we must know first!

[WeChat public platform] : WeChat public platform is our operating platform for small program registration, small program management, and small program release, which is equivalent to a control platform for our small programs. Here we can also see the operation of our applet, such as: plug-in updates, user access, etc. We also apply for some functions that require permissions on this platform, such as WeChat payment, WeChat search, etc.
Wechat Open Document : Wechat Open Platform is one of our development documents. It contains applet production guides, frameworks, components, APIs, etc. It is a good help document in our development process.

2. Development tools

WeChat Mini Programs have their own development tools (WeChat Developer Tools), which can be downloaded through WeChat Open Documents . It is highly recommended for everyone to use them. You just need to download and install it according to your needs.

2. WeChat Mini Program Registration

After clicking to enter, we will be asked to fill in the relevant information, we just need to follow the prompts to fill in.
Tip: The mailbox will be used as the login account, and the mailbox that has not been registered on the WeChat public platform, has not been registered on the WeChat open platform, and has not been bound to the personal WeChat account should be filled in.

After activating the mailbox, select the subject type according to the situation, and register subject information as required. Here we choose “personal type” if there is no other requirement. (The personal type does not support WeChat authentication, WeChat payment and advanced interface capabilities.) After filling in the relevant information, the registration process of the applet is completed.
Reminder: After the subject information is submitted, it cannot be modified. The subject will become the only legal subject and contracting subject for you to use the services and functions of the WeChat public platform. It cannot be changed or modified when other business functions are opened later.

3. Build the first WeChat applet

1. Mini Program Creation

First enter the WeChat public platform, then find “Settings” in the left navigation bar and click to enter, obtain the AppID of the applet in the account information module at the bottom of the basic settings, and copy it.

Then open the downloaded WeChat developer tool and use WeChat scan code to log in. After successful login, select “Mini Program” under “Mini Program Item”, and click + to create a new Mini Program item. Enter the corresponding information as required, and paste the content copied in the previous step in the AppID of the applet. Here we do not use cloud development first, select the language as JavaScript, and click New to create a small program.

2. Introduction to the Mini Program project structure directory

The picture above shows the structure directory of the applet we have created. Next, we will introduce each file in detail.

├── pages       # Store each page of the applet, one page and one folder (index page, logs page) 
    │ ├── index   # index page 
    │ │ ├── index.js      # Page logic (store logic code) 
    │ │ ├── index.json    # page configuration 
    │ │ ├── index.wxml    # page structure (code for page content structure) 
    │ │ └── index.wxss    # page style sheet (code for modifying page style) 
    │ └── logs    # logs page 
    │ ├── logs.js       # page logic 
    │ ├── logs.json     # page configuration 
    │ ├── logs.wxml     # page structure 
    │ └── logs.wxss     # page style sheet 
    ├── app. js      # The logic file of the 
    applet ├── app.json    # The configuration file of the applet
    ├── app.wxss    # global public style file
    ├── project.config.json
    └── utils
        └── util.js

Comrades with front-end foundation can take a look at the comparison between WeChat applet and web front-end:

  • wxml is similar to HTML file, used to write the tags and skeleton of the page, but only the components encapsulated by the applet itself can be used in it;
  • wxss is similar to CSS file, it is used to write page style, just replace css file with wxss file;
  • The js file is similar to the JavaScript file in front-end programming, and is used to write the page logic of the applet;
  • json file is used to configure the style and behavior of the page.

4. Practical drills

In this part, we will complete the establishment of the bottom menu bar and the establishment of some basic structure of the page.

bottom menu bar

The first is the establishment of the bottom option bar, here we use four pages, and the bottom menu bar needs at least two pages to build.

We need to configure it under the app.json file.
The code under “pages” is what we must configure when we create a new page. Every time we create a page, we need to configure it here. For example: index page, we need to write the file path “pages/index/index” of the newly created page under “pages”.

The code under “window” is the default configuration of our applet.

The code under “tabBar” is our bottom menu bar configuration.

  • “color” is the text color of our unselected pages;
  • “selectedColor” is the text color of our selected page;
  • “backgroundColor” is the background color of our bottom menu bar;
  • “borderStyle” is the color of the bottom menu bar border, there are only two colors;
  • “position” determines whether the menu bar is at the bottom or the top. Here we use the bottom bottom;
  • Under “list” is the page corresponding to our menu bar. Among them: “iconPath” is the icon file path displayed when it is not selected; “selectedIconPath” is the icon file path displayed when it is selected;

The code is as follows (app.json):

{
  "pages": [
    "pages/index/index",
    "pages/index/order",
    "pages/index/discuss",
    "pages/index/user"
  ],
  "subPackages": [],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#bfbfbf",
    "selectedColor": "#E3846F",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabs/index.png",
        "selectedIconPath": "static/tabs/index_on.png"
      },
      {
        "pagePath": "pages/index/order",
        "iconPath": "static/tabs/order.png",
        "selectedIconPath": "static/tabs/order_on.png"
      },
      {
        "pagePath": "pages/index/discuss",
        "iconPath": "static/tabs/discuss.png",
        "selectedIconPath": "static/tabs/discuss_on.png"
      },
      {
        "pagePath": "pages/index/user",
        "iconPath": "static/tabs/user.png",
        "selectedIconPath": "static/tabs/user_on.png"
      }
    ]
  },
  "usingComponents": {},
  "sitemapLocation": "sitemap.json"
}

basic structure

The structure code of the page is stored in the xxx.wxml file, which is used to write the relevant page content and show it to the public. Here are a few commonly used tags

<view></view>Labels are commonly used in applet development, and are equivalent to the ones in the web front-end that are <div></div>often used to structure the applet.

<swiper></swiper>The label is the label of the carousel image encapsulated by the applet, which is more convenient for us to create a carousel image, which <swiper-item></swiper-item>is the position of the image in our carousel.

<image></image>Tags are tags used to store images.

In addition, the code we use to modify the sample is placed in the xxx.wxss file to modify the style of the page. In the applet, we can no longer import external style sheets through the link tag like the Web front-end. We can Write our style content directly under the xxx.wxss file and introduce it through the class selector (class).

The size unit in the applet is rpx, you need to remember it.

The above is the basic layout of the page, you can refer to the code and write it yourself.

The code is as follows (index.wxml):

<view class="content">
  <view class="home">
    <swiper indicator-dots="{{indicatorDots}}" circular="{{true}}" autoplay="{{true}}" interval="3000">
      <block wx:for="{{swipers}}" wx:for-item="item" wx:for-index="index" wx:key="index">
        <swiper-item>
          <image src="{{item}}"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="search">
    <view class="search-ico-wapper">
      <image class="search-ico" src="/static/UI/search.png" mode></image>
    </view><input class="search-text"  type = "text"  value = ""  placeholder = "Click to enter search content"  maxlength = "10"  focus = "{{true}}" /> 
  </ view > 
  < view  class = "points" > My points </ view > 
  < view  class = "menu" > 
    < view  class = "A" > A </ view > 
    <view class="B">B</view>
    <view class="C">C</view>
  </view>
</view>

The code is as follows (index.wxss):

.home swiper {
  width: 750rpx;
  height: 400rpx;
}
.home image {
  width: 100%;
  height: 100%;
}
.search {
  position: absolute;
  width: 500rpx;
  height: 60rpx;
  background-color: #F4F4F4;
  display: flex;
  margin-top: -30rpx;
  float: left;
  align-items: center;
  border-radius: 27rpx;
  border: 3rpx solid #F4F4F4;
  padding-left: 30rpx;
  justify-content: center;
  margin-left: 15%;
}
.search-text {
  font-size: 30rpx;
}
.search-ico-wapper {
  margin-right: 10rpx;
}
.search-ico {
  width: 36rpx;
  height: 36rpx;
}
.points {
  margin-top: 50rpx;
  width: 710rpx;
  height: 250rpx;
  margin-left: 20rpx;
  border-radius: 17rpx;
  box-shadow: 1rpx 1rpx 1rpx 4rpx #F5F5F5;
}
.menu {
  margin-top: 20rpx;
}
.A {
  background-color: red;
  float: left;
  width: 350rpx;
  height: 350rpx;
  margin: 10rpx;
  margin-left: 20rpx;
  border-radius: 17rpx;
  box-shadow: 1rpx 1rpx 1rpx 4rpx #F5F5F5;
}
.B {
  background-color: green;
  float: left;
  width: 350rpx;
  height: 170rpx;
  margin-top: 10rpx;
  border-radius: 17rpx;
  box-shadow: 1rpx 1rpx 1rpx 4rpx #F5F5F5;
}
.C {
  background-color: blue;
  float: left;
  width: 350rpx;
  height: 170rpx;
  margin-top: 190rpx;
  margin-left: -350rpx;
  border-radius: 17rpx;
  box-shadow: 1rpx 1rpx 1rpx 4rpx #F5F5F5;
}

Real machine debugging

When we have finished developing a part, we need to debug the real machine to ensure that our code can run normally and effectively. At the same time, when we debug the real machine, we will also find some problems that cannot be displayed in the simulator.

Operation process: We used to click the real machine debugging button in the function bar of the WeChat developer tool to enter the debugging option. There are two ways here, one is WeChat scan code, and the other is automatic real machine debugging. The premise of these two methods is based on the same account logged in to WeChat on our mobile phone as the account logged in with our development tool.

After the operation is completed, you can see our applet on the mobile phone, and the computer will also display the running status of our applet.

5. Release of Mini Programs

After we have written the applet, the current applet can only be used on our own mobile phones by debugging or previewing it on the real machine. If we want others to see and use the applet, we need to publish it.

Publishing process:
First, click Upload in the upper right corner of the WeChat developer tool to upload the applet code to the WeChat public platform. After filling in the relevant information, click Upload. If the amount of code that shows that the applet exists in the package is too large, you can perform the sub-package operation , and then upload it after sub-package.

After the upload is complete, we need to log in to the WeChat public platform, and then find “Settings” in the left navigation bar and click to enter, and complete the relevant information of the Mini Program in the basic settings.

Then find “version management” in the left navigation bar and click to enter, you can see your own version in the development version, and click “submit for review” on the right.

When submitting the review, we will be asked to fill in the relevant information, which can be filled according to the requirements. You can choose whether the review is expedited or not according to your own needs (I have published several times and chose not to be expedited, but the review is over soon).

After the review is over, there will be relevant news on WeChat. If there are problems, we can submit them for review again after solving them. If there is no problem, we can enter the WeChat public platform again to publish our applet.

Summarize

The above is all I have shared, please point out if there are any shortcomings. I hope everyone can master the development of WeChat Mini Programs as soon as possible. In addition, after we learn the development of WeChat mini-programs, you can also learn some frameworks for mini-program development, such as uni-app and so on. To improve the efficiency of our development of small programs. come on!

Leave a Comment

Your email address will not be published. Required fields are marked *