What’s the difference between applets and regular web pages

  1. The API is different

    • The API of the APP is provided by the mobile operating system

    • DOM and BOM apis cannot be invoked in small programs due to different operating environments

    • However, the API of the wechat environment can be called in the small program, for example

      • Sweep WeChat yards
      • WeChat pay
      • geolocation

  2. Different development modes

    • The APP development model calls the IOS and Android component libraries

    • Web page development mode: browser and code editor

    • Applets have their own set of standard development patterns

      • Apply for an applets development account
      • Install applets developer tools
      • Create and configure and develop sketch projects
      • Launch the code in developer tools

1. Small program registration process

Please refer to wechat public platform

  1. Click the register button

    Use a browser to open the wechat public platform website, click on the upper right corner of the “register now” to enter the small program development account registration process

  1. Select a registered account type

  1. Fill in account information

    • Email cannot be bound by personal wechat

  1. Email activation

  1. Click the link to activate your account

  1. Select the subject Type

  1. Subject registration information

  1. Registration is completed

2. Obtain the AppID

It is equivalent to the “ID card” of the small program in wechat. With AppID, the wechat client can determine the “identity” of the small program and use the advanced interface provided by wechat

  • Used to create applets

    • Call some advanced interface back end for identification (e.g., login, payment)

3. Wechat developer tools

  1. Download and install wechat Developer tools

    • It is recommended to download and install the latest stable versionStable BuildWechat developer tools
    • Wechat developer tools download address
    • Installation method: Next –> Next

  2. Why use wechat developer tools

    • Easy to create project templates
    • Convenient debugging and development
    • Facilitate the launch of later projects
  3. Scan code to log in to wechat developer tools

  4. Set the appearance and proxy

    1. Why are proxy Settings needed?

      • Some students may have installed network accelerator or wall climbing tools on their computers, resulting in network instability
      • To prevent network instability caused by accelerators, it is recommended that the proxy be set to no proxy at all

  5. Demonstrates the steps of creating a small program

    • Click the + sign to create a new project

    • Fill in project information

4. Composition of small program projects

4.1 Composition of applets directory

  1. pagesThe page where all the applets are stored
  2. utilsA module for storing utility properties (e.g., a custom module for formatting time)
  3. app.jsEntry file for applets – main.js
  4. app.jsonGlobal configuration file for the applets project
  5. app.wxssGlobal style file for the applet project
  6. project.config.jsonConfiguration file for the project
  7. sitemap.jsonIt is used to configure the applets and their pages to be allowed to be indexed by wechat – SEO – search engine optimization

4.2 Components of the applet page

  • Applet officials recommend that all applet pages be stored in the Pages directory, each in a separate folder

    Each page consists of four basic files, which are:

    Note that these four base files are only valid for the current page

    1. .jsFiles – script files for a page that hold the page’s data, event handlers, lifecycle, and so on
    2. .jsonFile – the configuration file of the current page, which configures the appearance and appearance of the page, etc
    3. .wxmlFile – a template structure file for the page
    4. .wxssFile – The stylesheet file for the current page

4.3 Understanding the four configuration files in applets

JSON is a data format that is always presented as a configuration file during actual development. Applets are no exception and can be configured at different levels through different.json configuration files. There are 4 JSON files in the applet project, respectively:

  1. The app.json configuration file in the project root directory

  2. Json configuration file in the project root directory

  3. Sitemap. json configuration file in the project root directory

  4. The.json configuration file in each page folder

This app. Json file

App. json is the global configuration of the current applet, including all the page path of the applet, the appearance of the window, the interface style, the bottom TAB, etc.

  • A global profile is one that, once configured, affects every page

  • All page paths

The following describes the functions of the four configuration items:

  1. Pages is used to record the path of all pages of the current small program

  2. Window globally defines the background and file color of all pages of the applet

  3. The style global defines the version of the style used by the applet component

    • Micro channel small program is run inside micro channel
    • The style is consistent with wechat
    • The main style of wechat will change, and small programs will also change
    • This is where the concept of style versions comes in

  4. SitemapLocation: Specifies the location of sitemap.json

    • Sitemap. json configures whether the page can be retrieved
4.3.2 project. Config. Json file

Project.config. json is the project configuration file used to record the personalization of our applets development tools, such as:

  1. settingStored in theCompile the relevant configuration
  2. projectnameIs stored inThe project name
  3. appidIs stored inThe account ID of the applet

Note that checkSiteMap is false to turn off retrieval prompts

4.3.3 sitemap. Json file

Sitemap. json is used to configure whether small program pages allow wechat search.

When developers allow wechat to search, wechat indexes the page content of the mini program in the form of crawlers. When the user’s search keyword matches the page’s index, the applet’s page may be displayed in the search results.

Note: Sitemap indexing is enabled by default. If you want to disable sitemap indexing, set checkSiteMap to false in the setting of the applet project configuration file project.config.json

4.3.4. Json configuration file on the page

Json file can be used to configure the appearance of the window of the page. The configuration items in the page will overwrite the configuration items in the window in app.json

4.4 Creating a Mini Program Page

  1. Right-click in the Pages file to create a new folder — home, right-click in the Home folder to create home — and type hoome

    • It is recommended that the folder name be the same as the page name for later maintenance
    • When you create a new page component,You do not need to enter a suffix

  2. Json –> Pages add the page storage path, small program developer tools can help us automatically create the corresponding page file

  3. To delete or add pages in the Pages directory, add or delete pages in the Pages array of the app.json file

4.5 Two Methods for Setting the Home Page

  1. Adjust theapp.json –> pagesArray of page path before and after the order, you can modify the home page of the project, the small program will row in the first page, as the project home page for rendering

  1. Configure a new entryPagePath node at pages level in app.json and pass in the path that needs to be set as the home page

    • The final applet project home page toentryPagePathThe value is subject to node Settings

4.6 What is the difference between applets and web development

4.6.1 WXML concepts and differences from HTML

  1. What is a WXML

    WXML (WeiXin Markup Language) is a set of tag languages (components) designed by the framework to build the structure of a small program page, similar to HTML in web development

  2. Differences between WXML and HTML

    • Different label names

      • HTML — Div, P, span, img
      • WXML — View, Text, Image, Navigator

  3. Different attribute nodes

    • <a href="#">
    • <navigator url="/pages/home/home"></navigator>

  4. Provides template syntax similar to Vue

    • Data binding — Interpolation
    • List rendering — wx:for — V-for
    • Conditional rendering — wx:if — V-if
4.6.2 wXSS concepts and differences with CSS

  1. What is a WXSS

    • WXSS (WeiXin Style Sheets) is a set of style languages for describingWXMLComponent style of
    • Similar to web developmentCSS

  2. Differences between WXSS and CSS

    • Added RPX adaptive sizing units

      • CSSRequires manual conversion of pixel units, for examplerem
      • WXSSNew size units are supported at the bottomrpx, the applet will automatically convert on different screen sizes

  3. Global and local styles are provided

    • In the project root directoryapp.wxssApplies to all applet pages
    • Local page.wxssStyles apply only to the current page

  4. WXSS supports only some CSS selectors

    • Focus on the class selector The.class class selector is recommended
    • .class and # id
    • element
    • Union selector and descendant selector
    • Pseudo-class selectors such as ::after and ::before
4.6.3 Three categories of JS files in small programs

It is not enough for a project only to provide a page display. In the small program, we use.js files to handle user operations, such as: responding to user clicks, obtaining user locations and so on

JS files in the small program are classified into three categories, respectively:

  1. app.js

    • isThe entry file for the entire applets project, by callingThe App () functionTo start the whole applet
    App({
  onLaunch() {
    // Display local storage capability
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
​
    / / login
    wx.login({
      success: res= > {
        // Send res.code to the backend for openId, sessionKey, unionId}})},globalData: {
    userInfo: null}})Copy the code

  2. The.js file of the page

    • isPage entry file, by callingPage () functionTo create the applet page and run it

  3. Ordinary.js files

    • isOrdinary function module files, used to encapsulateA common function or attributeFor page use

5 Host Environment

5.1 Understand the concept of host environment

Host environment refers to the dependent environment necessary for a program to run, for example:

  1. Android and IOS are two different hosting environments
  2. The Android version of wechat App does not run on IOS. So Android is the host environment for Android software, and software without the host environment is meaningless

5.2 Host environment of applets

  1. The host environment for the applets

    Wechat is the host environment of small programs, as shown in the figure:

With the help of the capabilities provided by the host environment, small programs can complete many functions that ordinary web pages cannot complete, such as: wechat scan code, wechat pay, wechat login, geographic positioning and so on

  1. What the applets host environment contains

    • Communication model
    • Operation mechanism
    • Component – “Tag”
    • API – “Methods”
5.3 Communication body of applets

The main body of communication in the applet is the rendering layer and the logic layer, where:

  1. WXMLThe template andWXSSStyles work in the render layer
  2. JSScripts work at the logical level

5.4 Communication model of applets

The communication model in the applets is divided into two parts

  1. Communication between the rendering layer and the logic layer

    • It is forwarded by the wechat client

  2. Communication between the logical layer and a third party server

    • It is forwarded by the wechat client

5.5 Operating Mechanism

  1. The process of starting a small program

    • Download the applet code package locally
    • parsingapp.jsonGlobal configuration file
    • performapp.jsApplets entry file,Call App() to create an applet instance
    • Render small program home page
    • The small program has started

  2. Page rendering process

    • Load the parsed page.jsonThe configuration file
    • Page loading.wxmlThe template and.wxssstyle
    • Execute page.jsFile,Call Page() to create a Page instance
    • Page rendered

6. Applets component

6.1 Understanding Common Components

Note: You can search the wechat open community for common problems in applets development

The documentation provides optional values when the type is a string value

The components in the small program are also provided by the host environment, developers can quickly build a beautiful page structure based on the components, the official components of the small program are divided into 9 categories, respectively:

① View container ② Basic content ③ Form component ④ Navigation component ⑤ Media component ⑥ Map component ⑦ Canvas canvas component ⑧ Development capability ⑨ barrier-free accessCopy the code

6.2 View Container Class Components (Part)

  • The view components

    • Common View area
    • Similar to HTMLdiv, is a block-level element
    • Often used to achieve a page layout effect

  • Scroll – the view components

    • Scrollable view area
    • Often used for scrolling list effects
    • addscroll-yProperty: Allows vertical scrolling
    • Refer to the documentation for other available attributes

  • Swiper and swiper-item components

    • The multicast diagram container component and the multicast diagram Item component

6.3 Basic Container Components (Part)

  • Text component

    • Text component
    • Similar to theHTMLIn thespanThe tag is an inline element

  • Rich-text Component (V-HTML)

    • Rich text component
    • To support theHTMLString rendered asWXMLstructure
    • Rich text editor that generates HTML strings and saves them to data if HTML strings need to be rendered into applets
    • The applet does not support HTML, so it uses rich-text to parse and render the HTML string
    <! Render the HTML string into the corresponding UI structure using the Nodes property of the rich-text component.
​
<rich-text nodes="
    rich-text component 
    "    >    </rich-text>  
Copy the code

6.4 Other Components (Parts)

  • button

    • Button component
    • Function thanHTMLIn thebuttonButton is rich
    • throughopen-typeAttribute can call various functions provided by wechat (customer service, forwarding, obtaining user authorization, obtaining user information, etc.)

  • The mode property of the image component

    • imageThe component’smodeProperty to specify cropping and zooming modes for an image.

  1. Common view container class components

    • The view components

      • Common View area
      • Similar to a DIV in HTML, it is a block-level element
      • Often used to achieve a page layout effect

    • Scroll – the view components

      • Scrollable view area
      • Often used for scrolling list effects

    • Swiper and swiper-item components

      • The multicast diagram container component and the multicast diagram Item component

7. Three categories of applets

The API in the small program is provided by the host environment. Through these rich wechat native API, it is convenient to adjust the capabilities provided by wechat, such as obtaining user information, local storage, payment functions, etc. Applets are officially divided into the following three categories:

  1. Event listening API

    • Features:onAt the beginning ofAPIUsed to listen for whether an event is triggered
    • Example: wx.onWindowResize(function callback)

    Wx is a top-level object for applets, just like Windows

  2. Synchronous API

    • Characteristic 1: toSyncAt the end of theAPIAre synchronizedAPI
    • Feature 2: SynchronizationAPIThe result can be obtained directly from the return value of the function, and an exception will be thrown if an error occurs
    • For example, wx.setStoragesync (‘key’, value) writes to the local storage

  3. Asynchronous API

    • Features: Similar to $. Ajax (options) function in jQuery, need to receive the call result through success, fail, complete
    • For example, wx.request() initiates a network data request and receives the data through the SUCCESS callback function
    • Most of the small programsAPIAre asynchronousAPI

An asynchronous API usually has a corresponding synchronous API

Most applets are asynchronous apis

8. To summarize

  1. What’s the difference between applets and web development?

    • The environment is not the same, web page -> browser, small program -> wechat internal
    • Different API, webpage –>DOM,BOM, small program –> host environment wechat provides components,API(method)
    • Wechat development environment no, web page –> editor, browser, small program –> account AppID, wechat developer tools, components, API development.

  2. What is an AppID and what does it do?

    • An AppID is similar to an ID card and is used to identify the uniqueness of a small program.
    • Wechat will identify small programs according to AppID, and provide high-level API to small programs after identification
    • The AppID is a required identification during the creation and release phases of a project

  3. What the app.json file does

    • The global configuration file of the project, in which things are configured to affect each page,
    • Window, Pages, style

  4. Function of the page.json file

    • If the page.json and app.json configuration fields have the same name, the page.json field will overwrite the app.json field.
    • Only the Window item can be configured

  5. Two ways to set up the home page of applets

    • First entry in the Pages array
    • entryPagePath

  6. What is the host environment for applets

    • WeChat

      • Component Api

  7. Common components

    -view ------ div-scroll -view - swiper, swiper-item -text------ span - rich-text------- Render HTML string - image ------ img Has default width and height 320, 240 - buttonCopy the code
Copy the code