Day222. Getting Started with WeChat Mini Program-WeChat Mini Program

WeChat Mini Program

Chapter 1 What is a Mini Program?

1. One of the top ten hot words on Baidu Encyclopedia of 2017

2. WeChat Mini Program, abbreviated as Mini Program, English name Mini Program, is an application that can be used without downloading and installing
   . The size of the program is particularly
   small, the download speed is very fast, and the user does not feel the downloading process)

3. When the mini program was first released, the compressed package size should not be larger than 1M, otherwise it would not pass. It was
   improved in April 2017 , from the original 1M to 2M;

4. At 0:00 on January 9, 2017, the first batch of much-anticipated WeChat mini programs were officially launched in a low-key manner.

Chapter 2 What Can Mini Programs Do?

1. Complementary with App, provide functions of the same app type, which is more convenient and concise to use than app
2. Download by scanning or searching on WeChat
3. Users do not use frequently, but they have to use functional software. At present, it seems that small programs are the first choice
4. Connect online and offline
5. Low development threshold and low cost

Chapter 3 Mini Program Development Information

3.1 Related information

1. Official website: https://mp.weixin.qq.com/
2. WeChat development tools

Obtained from the IDE folder of the development tools
3) Download address
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315

3.2 Register Mini Program Account

1. Have an account

2. No account

Chapter 4 Developing a Mini Program to Reserve Knowledge

4.1 Introduction to Flex layout

4.1.1 What is flex layout?

1. Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility for box models.

2. Any container can be designated as a Flex layout.

3. display: ‘flex’

4.1.2 flex properties

1) flex-direction:

row (default value): The main axis is in the horizontal direction, and the starting point is at the left end.

row-reverse: The main axis is in the horizontal direction, and the starting point is at the right end.

column: The main axis is in the vertical direction, and the starting point is at the upper edge.

column-reverse: The main axis is in the vertical direction, and the starting point is at the bottom edge.

4.1.3 Learning address:

http://www.runoob.com/w3cnote/flex-grammar.html

4.2 Mobile related knowledge

4.2.1 Physical pixels

1. Screen resolution
2. The smallest unit that the device can control the display, physical pixels can be regarded as corresponding pixels

4.2.2 Device independent pixel & css pixel

Device-independent pixels (also called density-independent pixels) can be considered as a point in the computer coordinate system. This point represents

Table a virtual pixel that can be used and controlled by the program (for example: CSS pixel, just CSS pixel in android machine

It's not called "CSS pixel" but "device independent pixel"), and then converted into physical pixels by the relevant system.

4.2.3 dpr 比 & DPI & PPI

1. dpr: device pixel ratio, physical pixel/device independent pixel = dpr, generally based on Iphon6 dpr dpr = 2

The real physical pixel using iphone6 ​​is 2*independent pixel

2. PPI: Number of pixels on a one-inch display

3. DPI: The earliest it refers to the number of ink dots printed by the printer per unit area, the more ink dots, the clearer

---

4.3 Mobile terminal adaptation scheme

4.3.1 Viewport adaptation

1. Why do viewport adaptation
2. a) When mobile phone manufacturers produce mobile phones, the default page width of most mobile phones is 980px
3. b) The actual viewport width of the mobile phone must be less than 980px, such as: 375px for iphone6
4. c) Development requirements: 980 pages need to be completely displayed on the phone screen without scroll bars
5. achieve:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

width: visual control

device-width: layout control

initial-scale: zoom ratio column

上面的代码：将视觉视控=布局视控，并且缩放比为1

Visual control: see the size of the phone screen window

Layout control: for web pages

Perfect visual control: visual visual control = layout visual control

---

4.3.2 rem adaptation

一套设计方案，在各种设备屏幕上等比例，通用

rem=root erm, According to the node size

1. Why do rem adapting
   a) too many models, different models of screen sizes like
   b) requirements: a design draft of the same content presented on the effect of different models, depending on the screen size is not
   the same changes, page The content in has also changed accordingly
2. achieve:

function remRefresh () {
    
     
    //获取屏幕的宽度
    let clientWidth = = document.documentElement.clientWidth; ;
    // 将屏幕等分10 份
    let rem = = clientWidth / 10; 
    //等分10份后，对应根节点对应的大小，也就是rem的值
    document.documentElement.style.fontSize = = rem + 'px'; 
    document.body.style.fontSize = '12px'; 
}
//pageshow页面显示事件
window.addEventListener( ('pageshow', () => {
    
     {
    
    
    remRefresh ()
})
// 函数防抖
let timeoutId; ;
window.addEventListener ('resize', () => {
    
    
    timeoutId && clearTimeout(timeoutId);
    timeoutId = setTimeout (() =>{
    
    
        remRefresh ()
    }, 300) 
})

---

3. Third-party library implements
   lib-flexible + px2rem-loader

Chapter 5 Features of Mini Programs

5.1 Overview of Mini Program Features

1. No DOM
2. Component development: a collection of codes with specific functional effects
3. Small size, the size of a single compressed package cannot be greater than 2M, otherwise it cannot be online
4. The four important files of the applet
   a) *.js
   b) *.wxml —> view structure----> html
   c) *.wxss —> view style----> css
   d) *. json- ---> view data-----> json file
5. Small program adaptation scheme: rpx (responsive pixel responsive pixel unit)
   a) Small program adaptation unit: rpx
   b) 任何屏幕The width is specified as 750rpx
   c) The small program will automatically calculate the size of the rpx value according to the width of the screen
   d) For Iphone6: 1rpx = 1 physical pixel = 0.5px

---

5.2 Mini Program Configuration

5.2.1 Global configuration: app.json

一些jsAPI方法

1. Role: Used to set options for the entire application

2. link:

   a) https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

3. Picture:

5.2.2 Page configuration: page name.json

1. Role: Used to configure the specified page
2. Link:
   a) https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
3. Note: The priority of page configuration is higher than global configuration
4. Picture:

5.2.3 sitemap configuration: sitemap.json

1. Role: Used to crawl the page by WeChat search
2. Link:
   a) https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
3. Picture:

5.3 Mini Program Framework Interface

5.3.1 App

1. Execute App() in global app.js
2. 生成当前应用的实例对象
3. getApp()Get global application instance

5.3.2 Page

4. Execute Page() in page.js
5. Generate an instance of the current page
6. Get page instance through getCurrentPages

---