Applets contain an APP that describes the entire program and multiple pages that describe their own pages

The body of the applets consists of three questions that must be placed in the root directory as follows:

App.js => applet logic

App. json=> common configuration of applets

App.wxss => common style sheet for applets

A program page consists of four files of the same shape and filename, which are:

  • Js page logic
  • WXML page structure
  • Json Page Configuration
  • WXSS page style sheet

In the project, the following queries are compiled, so.js app.json.wxml.wxss cannot be accessed directly after going to bed

The app.json file under the applets root directory is used for global configuration of wechat applets, determining the path of page files, window performance, setting network timeout, and setting multiple tabs

  • {
  "pages": [
    "pages/index/index"."pages/logs/index"].// Address of the page
  "window": {
    "navigationBarTitleText": "Demo"
  },// Navigation bar text
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index"."text": "Home page"
    }, {
      "pagePath": "pages/logs/index"."text": "Log"
    }]// Navigation page
  },
  "networkTimeout": {
    "request": 10000."downloadFile": 10000
  },
  "debug": true."navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"]} For complete configuration items, see the applet Global Configuration pageCopy the code

What is the difference between WXML and HTML

  • Different HTML tag name (div, span, img, a) WXML (view, text, image, the navigator)
  • Different attribute nodes
  • Provides conditional rendering similar to template syntax data binding list rendering in Vue

What is WXSS, similar to AND different from CSS?

  • Added RPX size units to automatically convert on different screen sizes

  • The app.wxss root directory that provides both global and local styles scopes all applet pages

    • The. WXSS style for local pages only applies to the current page

    • WXSS only supports partial class selectors, ID selectors, element selectors, union selectors, descendant selectors,::after and ::before pseudo-class selectors

.js file

  • App.js is the entry point to the entire applet project, and the entire applet is invoked and started by calling app ()
  • The.js file for the Page is the entry file for the Page, which is created and run by calling the Page() function
  • Ordinary.js files are ordinary function module files that encapsulate common functions or properties for use by the page

Host Environment Depends on which programs run

Mobile phone wechat relies on Android or ios system, while wechat is the host environment of small programs. Small programs can complete many functions that ordinary web pages cannot complete with the help of the ability provided by the environment, such as wechat scan code, wechat login, and geographic positioning

The contents of the host environment

  • Communication model
  • Operation mechanism
  • component
  • API
Subject of communication

The main body of applets communication is the rendering layer and logic layer,

WXML templates and WXSS styles work at the render layer

Js scripts work at the logical layer

The communication model is divided into two parts: 1. The communication between the rendering layer and the logical layer; 2. The communication between the logical layer and the third-party server is forwarded by the wechat client

The process of starting a small program

Download the applets code package to the local, parse the app.json global configuration file to execute the app.js applets entry file, call app () to create applets instance rendering applets home page applets start

Page rendering process

  • Load the. Json configuration file for the parse page

  • WXML template and WXSS style for loading the page

  • Execute the.js file for the Page and call Page() to create the Page instance

Host Environment => Component

Components are also provided by the host environment, and developers can quickly build beautiful page structures from components. Applets are officially divided into nine broad categories of components

The view components

A view is the equivalent of an HTML DIV

Sroll-view Indicates the scrollable view area

Swiper swiper- ITen Multicast map container component and multicast map Item component

  • Indicator -dots Whether to display panel indicator points
  • Indictor-color Indicates the indicator color
  • Indictor-active-color Indicates the color of the selected indicator
  • Whether autoPlay switches automatically
  • Interval Indicates the interval for automatic switchover
  • Circular whether to adopt jointing sliding

The text and rich text

The Text component is similar to span, and the inline tag rich-text supports rendering HTML strings into WXML structures

button

More powerful type size plain more functions to look up documents

image

The mode property in the image component is used to specify the cropping and scaling modes of the image, the usual mode

  • ScaleToFill scales the image without maintaining aspect ratio, so that the image width and height are fully stretched to fill the image element

  • AspectFit zoom mode keeps the aspect ratio so that the long sides of the image are not fully displayed and will be left blank

  • AspectFill maintains aspect ratios and only ensures that the short edges of the image are fully displayed

  • WidthFix has the same width and automatically changes height

  • Height height is unchanged, width changes automatically

    Applets version

    • Development version using developer tools, you can upload the code to the development version, the development version only retains the latest uploaded code, click Submit for review, you can submit the code for review,
    • Experience version, you can select a development version as the experience version, and select a copy of the experience version
    • After the version under review, a piece of code is under review. After the review results are available, the code can be released as a guest or directly resubmitted for review and overwrite the source version
    • Online version The version of the code used by all users on the line that has been overwritten since the latest release

Based on the content

Data binding

Similar to Vue, data is defined in page data in.js, data is used in WXML,

Pay special attention to

In little programs, either the tag’s attributes or the tag’s contents are data-bound using the mustache {{meaasge}} syntax,

event

Event is the way of communication between the rendering layer and the logic layer. The user’s behavior generated in the rendering layer is fed back to the logic for business processing

When the event callback is triggered, the parameter has an event object by default

Pay special attention to

Event handlers must be level with data

I have the following properties

  • Type Event type
  • TimeStamp page Dalai lama calligraphy event elapsed milliseconds
  • Target A collection of property values for the component that triggers the event that triggers the source component of the event
  • CurrentTarget The collection of property values of the current component is the component to which the current event is bound

Applets pass parameters

You can use data-shuxing to retrieve the parameters passed in to the event.dataset

Bidirectional binding in applets

Similar to input, there are a lot of special apis in applets, similar to placeHolder style Focus type, which can pull out the built-in keyboard type provided by applets

Listen for the bindinput event and call the applet’s own this.setData({}) in the callback function.

Conditions apply colours to a drawing

wx:if=”” wx:elif wx:else

If you control the presentation of multiple components at once, you can wrap the block tag, similar to template, around a wrapped container

Wx: The difference between if and Hidden is similar to v-if and V-show. If you often need to use a component, it is best to use hidden

Wx :for is similar to VUE’s V-for

The difference between: Wx :for-index=”theIndex” wx:for-item=”theItem” and v-for=”(theItem,theIndex) in dataList”

Similarities: wx:key=”theIndex” and :key=”theIndex” Diff algorithm

WXSS template style

WXSS has most of the features of CSS. At the same time, WXSS also expanded and modified the CSS to adapt to the development of wechat small program

Focus on two more points

rpx

RPX is a small program unique to wechat, used to solve the problem of screen adaptation

The realization principle of RPX is very simple: screens of different equipment in prison have different sizes. In order to realize the automatic adaptation of screens, RPX divides the screens of all equipment into 750 equal widths, one of which represents 1rpx. Therefore: On smaller equipment, 1rPX represents a smaller width, while on larger equipment, 1rPX represents a larger width

Style import

Using the @import syntax provided by WXSS, you can import an external style sheet

Global styles and local styles

The styles defined in app.wxSS are global and apply to each page

Local styles: Styles defined in the page’s.wxSS file are local styles with values applied to the current page

Note :1 When a local style conflicts with a global style, the local style overrides the global style according to the proximity rule

2. Global styles are overwritten only when the weight of the local style is greater than or equal to the weight of the global style

Global configuration files and common configuration items

Applet directory app.json is the global configuration file of the applet

  • Pages records the current applet all pages store path in the first place, is the first page rendering
  • Window Sets the appearance of the applet window globally
  • TabBar Sets the tabBar effect at the bottom of the applet
  • Style Whether to enable a new version of the component style

window

  • Navigation bar – Top navigation area

  • Background goes – not visible by default, only displayed by pull-down

  • Page body area – The page body is used to display the layout in WXML

  • NavigationBarTitleText navigationBarTitleText content

  • NavigationBarBackgroundColor navigation bar background color

  • NavigationBarTextStyle Navigation bar title color

  • BackgroundColor the backgroundColor of the window

  • BackgroundTextStyle Dropdown loading style, which supports only dark/ Light

Special attention: potholes

  • TabBar configuration pagePath must also be configured in pages in app.json with list as array type

  • OnLoad :function(){} Unlike vue and HTML, new pages in applets cannot be run independently and must be written in the corresponding.js file.

Drop-down refresh general page configuration separately

Network data request

How to initiate a network request in applets

  • This request cannot be called ajax request, wechat official request to use yu Ning using HTTPS protocol
  • The request domain name was configured
  • Specific code
  • Network requests in applets do not have cross-domain problems

Limitations on network data requests in applets

For security reasons, applets officially place two restrictions on data interface requests

1. Only HTTPS interfaces can be requested

2. You must add the domain name of the interface to the trust list

The request domain name was configured

Demand description: assume that their micro channel small program, want to request www.escook.cn/

The configuration procedure is as follows: Log in to the mini program management background and choose Development > Development Settings > Server domain name > Modify the request domain name

The applet sends network requests much like jquery’s $.ajax

wx.request({
// The request address must start with HTTPS
// You must modify the request domain name in the developed old weapon domain name
 url:"https://escook.cn/api/get".method:"get".data: {name :"niaho ".age:22
},
  success:(res) = >{
  console.log(res)
}
})
Copy the code

The request domain name verification was skipped

If only HTTP protocol

You can temporarily enable the [Development environment does not verify legitimate domain names,web-view, TLS, HTTPS] option to skip the verification of legitimate domain names in request, which is only used during development and debugging

Ajax relies on an object called XMLHttpRequest, a small program called making a Web data request

Configuration page

Small program, each page has its own. Json file, used to the current page window appearance, page effect configuration

In applets, the window node in app.json can globally configure the window representation of each page in the applets

A page-level. Json configuration file is a good example if some applets want to have a special window representation. NavigationBarTitleText complies with the proximity principle

Three categories of apis

Wx. onWidthResize(function callback)

2. Synchronization APIS Apis that end with Sync are synchronization apis. The result of the execution can be obtained directly through the return value of the function

wx.setStorageSync(‘key’,’value’)

3. Asynchronous API is similar to jQury’s $. Ajax (options) function, which needs to receive the result of the call through success,fall,complete

Form components

Navigation components

Media components

Map Component

Canva Canvas component

Ability to open

Frictionless access

Disorderly knowledge accumulation

Url encoding and decoding

Why code?

The encodeURL() and encodeURLComponent() methods of the Global object encode urls (Uniform Resource Identifiers) In order to send to the browser, a valid URL cannot contain certain characters, such as Spaces, and these two URL encodings can encode the URL. They replace all invalid characters with a special UTF_8 encoding, so that browser 3 can structure and understand

coding

EncodeURL () is used for the entire URL, such as www.wrox.com/illegal, and encodeURLComponent() is used to encode a section of the URL The main difference is that encodeURL() doesn’t encode special characters that are part of the URL themselves, such as colons, slashes, helows, and hash points, whereas encodeURLComponent encodes any nonstandard characters it finds

decoding

The corresponding methods are decodeURL () and decodeURLComponent().

DecodeURL can only decode characters replaced by encodeURL, for example, it can replace %20 with a space, but it doesn’t do anything to %23 because %23 represents a hash point and is not replaced with encodeURL(),

The decodeURLComponent decodes codes using any special character

rpx?

RPX is the size unit of wechat applet. Generally, taking iphone6 as an example, the screen width is 375px, with a total of 750px physical pixels, so 1rpx=0.5px=1 physical pixel

Common uses of the object.keys () method

Pass in an object and return its keyvar obj=new Object()
obj={a:1.b:2}
console.lof(Object.keys(obj))  // Returns an array of the values of all the attributes in the arrayPass in the string and return the indexvar str=new String()
str="abc123"
OBject.keys(str)// Convert each character of the string to each item in the arrayPass in a constructor that returns an array or property nameCopy the code

Action list component