Wechat applet 01

1.1 What are applets ？

---

Applet Is currently the The hottest Mobile phone application . And this So-called Applet , General yes Wechat applet .

• What does that mean ？

Namely Attached to WeChat This APP above Program ！（ Xiao-long zhang Its definition is ： No installation required , Go as soon as you use it . In fact, the principle of realizing this without installation is The size of the applet itself is too small , Now the Internet speed is so fast , Therefore, users simply cannot experience the process of downloading and installing ！）

Applet At the very beginning After being developed , requirement Project procedure Compressed package The volume cannot be greater than 1MB, Otherwise, it cannot pass the review ！ And in the 2017 year 4 The month has been changed , From the original 1MB Promoted to 2MB.

Because such , therefore We And Back end servers When making a joint , The interface mode is adopted . in other words We're going to let Back end Expose some interfaces , So we can go through Online access Go to Data interaction ！ So we occupy The size will Much less .

---

1.2 What can an applet do ？

1. Sure And Conventional APP Complement each other , Can achieve majority APP Functions that can be realized . However It does Than APP Convenient and simple , It's very small ！（ For example, the small program of buying tickets 、 Health code applet wait ）
2. Applet It's solved The present APP A big problem in the market ！ Namely The APP The frequency of users' use is not very high , But Have to use , that Applet Absolutely The first choice is .
3. Low development threshold , The cost is low . Release Online and offline are extremely simple . After the development of Probably can Let's all All used . Unwanted Contact what Shopping mall applications for some mobile phones , then Required to be put on the shelves Wait for these things .

---

1.3.1 Development environment deployment

1. Sign up for wechat applet

Official website of wechat applet

2. install IDE development tool

WeChat developer tools

Extraction code ：8zbl

3. Flex Layout The way Understanding
   
   Flex Layout learning

4. Mobile terminal related knowledge

• Physical pixel

answer ： The resolution of the screen 、 The smallest unit that the device can control the display , Physical pixels can be regarded as corresponding pixels .

• Device independent pixel and css Pixels （ these two items. yes Virtual pixels ）

answer ： Device independent pixel （ Also called density independent pixels ）, Think of it as Computer coordinates System in A point of , This point represents a Virtual pixels that can be used and controlled by programs （ such as ：CSS Pixels , Of course stay android machine in It was also be called “ Device independent pixel ”）, then from Related systems Convert to Physical pixel , , in turn, Realization Manipulation .

• DPR、DPI、PPI

5. Mobile adaptation scheme

• viewport adapter

Why? do viewport adapter

answer ： When mobile phone manufacturers produce and collect Most mobile phones default page Width by 980 px, but mobile phone Actually viewport Width Less than 980 px, such as iphone6 Of yes 375 px. especially We In development , There is a basic need that must be met , That's it take 980 The page of It is completely displayed to On the phone screen And No scroll bar .

Realization

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

intend Set the width of the visual viewport Assign a value to Page width , then according to 1:1 The proportion The zoom .

• rem adapter

Why? do rem adapter

answer ： There are too many models , Different mobile phone models The screen size is different . and Developing APP Or small programs , There is a basic need , That's it The inside of your set of design draft is the same must Can be in On different models Effects presented Big difference is not bad . that sure Will be according to The screen size Come on Conduct Different Changed , Content Also want to Change accordingly .

Realization

function remRefresh(){
    
	let clientWidth = document.documentElement.clientWidth;
	//  Put the screen   Equal division  10  Share 
	let rem = clientWidth / 10;
	document.documentElement.style.fontSize - rem + 'px';
	document.body.style.fontSize = '12px';
}

window.addEventListener('pageshow',() => {
    
	remRefresh();
})
//  Function anti shake 
let timeoutId;
window.addEventListener('resize',() => {
    
	timeoutId && clearTimeout(timeoutId);
	timeoutId = setTimeout(() => {
    
		remRefresh();
	},300)
})

lib-flexible
px2rem-loader

The two above A third party library , It can be Realized .