当前位置:网站首页>Wechat applet 01
Wechat applet 01
2022-07-07 15:14:00 【Mu Quanyu [dark cat]】
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 ?
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 )- 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 .
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
- Sign up for wechat applet
Official website of wechat applet
- install IDE development tool
Extraction code :8zbl
Flex Layout The way Understanding
Flex Layout learningMobile 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
- 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 .
边栏推荐
- CTFshow,信息搜集:web6
- 【兰州大学】考研初试复试资料分享
- CTFshow,信息搜集:web5
- 居然从408改考自命题!211华北电力大学(北京)
- 众昂矿业:萤石继续引领新能源市场增长
- Ctfshow, information collection: web4
- 8大模块、40个思维模型,打破思维桎梏,满足你工作不同阶段、场景的思维需求,赶紧收藏慢慢学
- CTFshow,信息搜集:web4
- Why do we use UTF-8 encoding?
- With 8 modules and 40 thinking models, you can break the shackles of thinking and meet the thinking needs of different stages and scenes of your work. Collect it quickly and learn it slowly
猜你喜欢
Guangzhou Development Zone enables geographical indication products to help rural revitalization
CTFshow,信息搜集:web13
How bad can a programmer be? Nima, they are all talents
CTFshow,信息搜集:web8
JSON解析实例(Qt含源码)
CTFshow,信息搜集:web1
IDA pro逆向工具寻找socket server的IP和port
[today in history] July 7: release of C; Chrome OS came out; "Legend of swordsman" issued
Qu'est - ce qu'une violation de données
Niuke real problem programming - day14
随机推荐
数学建模——什么是数学建模
Unity之ASE实现全屏风沙效果
[Yugong series] go teaching course 005 variables in July 2022
Ctfshow, information collection: Web3
CTFshow,信息搜集:web7
Niuke real problem programming - day15
Ctfshow, information collection: web6
用于增强压缩视频质量的可变形卷积密集网络
Read PG in data warehouse in one article_ stat
Cocoscreator resource encryption and decryption
简述keepalived工作原理
Pat grade a 1103 integer factorizatio
2022年5月互联网医疗领域月度观察
What is the process of ⼀ objects from loading into JVM to being cleared by GC?
What are the safest securities trading apps
CTFshow,信息搜集:web13
PG基础篇--逻辑结构管理(锁机制--表锁)
缓冲区溢出保护
Ctfshow, information collection: web14
【OBS】RTMPSockBuf_ Fill, remote host closed connection.