Preface ：
This article introduces the applet , And the technology stack that needs to be used to make small programs , There is also a small case , Interested friends can try to do it .
If there is anything that needs to be improved, please don't hesitate to give me advice
Thank you all for your support

Introduction to applet

Applets are a new open capability , Developers can quickly develop a small program . Small programs can be easily obtained and spread in wechat , At the same time, it has an excellent use experience .
The main advantage

1. Users can easily access services , No need to install or download to use
2. It has richer functions and excellent use experience
3. Ability to encapsulate a range of interfaces , Help with rapid development and iteration
4. It doesn't take up memory , No need to download
5. Less advertising , It is conducive to a good user experience

Common technology stacks for developing small programs

JavaScript: JavaScript（ abbreviation “JS”） It is a kind of lightweight with function priority , Interpreted or just in time compiled programming languages . Although it was developed as Web It's famous for its scripting language , But it's also used in many non browser environments ,JavaScript Based on prototype programming 、 Multi paradigm dynamic scripting language , And support object-oriented 、 imperative 、 declarative 、 Functional programming paradigm .
Wechat applet JavaScript The operating environment is not Browser Neither Node.js. It runs on wechat App In the context of , Can't operate Browser context Under the DOM, It can't pass Node.js Related interfaces access the operating system API. therefore , Strictly speaking , Wechat applets are not Html5, Although the development process and the technology stack used Html5 It is interlinked. .

WXML: The full name is WeiXin Markup Language, yes ⼩ Program framework design ⼀ Set of tags ⾔, combination ⼩ The basic components of the program 、 The event system , You can build pages ⾯ Structure .
As the display layer of wechat applet , It's not using Html, It was invented on the basis of XML The description of grammar .

WXSS: The style used to decorate the presentation layer .WXSS(WeiXin Style Sheets) yes MINA The design of the ⼀ Pattern language ⾔,⽤ In describing WXML Component style .
WXSS⽤ To decide WXML How to display the components of ⽰. In order to adapt ⼴⼤ Front end developers , our WXSS have CSS⼤ Some characteristics . At the same time, in order to be more suitable for the development of wechat ⼩ Program , We are right. CSS Into the ⾏ Expanded and modified . And css phase ⽐ Our extended features are ： ruler ⼨ Guide to units and styles ⼊.

Modules commonly used by applets

1. WXML. Wechat signs ⾔,⽤ Yu Zhan ⽰UI Templates , similar HTML,⽂ The suffix of the piece is “.wxml”.

2. WXSS. full name WeiXin Style Sheets,⽤ It is stipulated that UI style , have CSS ⼤ Some characteristics . stay CSS The ruler is extended on the basis of ⼨ Unit and style guide ⼊.⽂ The suffix of the piece is “.wxss”

3. WXS. full name WeiXin Script. After the encapsulation JS,⼀ Generally embedded in WXML page ⾯, very ⽅ Build the page ⾯, The label is ”《wxs》 《/wxs》".

4. JS. ordinary JavaScript, often ⽤ To control the entire page ⾯ The logic of . Suffix named “.js”

5. JSON.⽤ Yu Xiang ⽬ Global configuration or single page ⾯ To configure , Suffix named “.json”.

Applet case （ Part of the code ）

Effect demonstration ：

If you need all the code, you can talk to the blogger privately
Part of the code ：

JS:

import request from "../../lib/request";
const app = getApp();
import serviceData from '../../data/config';

Page({
    
    data : {
    
        products:[],
        currentPage:1,
        perPage : 5
    },
    onLoad(option){
    
        var categoryId = option.id;
        var pageData = new Object();
        pageData.page = this.data.currentPage;
        pageData.per_page = this.data.perPage;
        //request({path:'/categories/' + categoryId + '/products', data: pageData})
        //.then(({data:products}) => this.setData({products}));
        this.setData({
    products: serviceData.categoryData});
        /*wx.setNavigationBarTitle({ title: option.title, success: function(res) { // success } })*/
    },
    navigateToProduct(event) {
    
        var productId = event.currentTarget.dataset.goodsId;
        wx.navigateTo({
    
        url: '../products/products?id=' + productId
        });
    },
    lower : function(option){
    
        var categoryId = option.id;
        console.log('lower more products data');
        wx.showNavigationBarLoading();
        var that = this;
        setTimeout(()=>{
    
            wx.hideNavigationBarLoading();
            var nextPageData = new Object();
            nextPageData.per_page = this.data.perPage;
            nextPageData.page = this.data.currentPage +1;
            var products = serviceData.categoryData;
            this.setData({
    currentPage:++this.data.currentPage});
            this.setData({
    products:this.data.products.concat(products)});//concat  Splice together 

      }, 1000);
  },
});
JSON

{
    

    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": " Fresh fruit ",
    "navigationBarTextStyle":"white"
    
}

WXML

<scroll-view class="product-list" bindscrolltolower="lower" scroll-y="true" style="height:100%" scroll-into-view="{
     {toView}}" upper-threshold="10">
<view class="product-group">
    <view class="product" wx:for="{
     {products}}" wx:for-item="product" data-goods-id="{
     {product.id}}" bindtap="navigateToProduct">  
      <view><image mode="scaleToFill" src="{
     {product.covers_image}}"></image></view>
      <view class="product-content product-name"><text>{
   {product.goods_name}}</text></view>
      <view class="product-content product-price"><text>¥ {
   {product.goods_price}}</text>
      <text class="product-market">¥ {
   {product.market_price}}</text>
      </view>
    </view>
  </view>
</scroll-view>

WXSS

.product-list{
    background-color: white;
    box-sizing: border-box;
    padding: 2rpx;
}
.product-group{
    margin: 5rpx;
    padding:2rpx;
    display: block;
    overflow: hidden;
}
.product{
    width:350rpx;
    border: 1px solid #e2e2e2;
    float: left;
    margin: 6rpx;
}
.product image {
    height: 300rpx;
    width: 100%;
}
.product-name {
    height: 60rpx;
    padding-bottom: 5rpx;
    border-bottom: 1px solid #efefef;
    font-size: 25rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.product-content  {
    margin: 15rpx;
    overflow: hidden;
}
.product-price {
    margin-top: 15rpx;
    color: red;
    margin-bottom: 15rpx;
    font-size: 28rpx;
    font-weight: 1rpx;
}
.product-market {
    margin:10rpx;
    color: darkgray;
    font-size: 24rpx;
    font-weight: 1rpx;
    text-decoration:line-through;
}

​

This is the end of the article , You can try it if you like , If there is anything inappropriate or needs to be improved Welcome to communicate with us
Finally, I wish you all a happy June day, ha ha ha

Xiao Wei once again thanks all his friends for their support