当前位置:网站首页>微信小程序 01
微信小程序 01
2022-07-07 13:03:00 【牟泉禹[Dark Cat]】
1.1 什么是小程序?
小程序 是目前 最火热的 手机应用。而这个 所谓的 小程序,泛指的 是 微信小程序。
- 什么意思呢?
就是 附加在 微信 这个 APP 上面的 程序!(张小龙 对其的定义是:无需安装,用完即走。其实实现这个无需安装的原理在于 小程序本身的体积太小,现在的网速又这么快,所以用户根本体验不到下载和安装的过程!)
小程序 在最开始 被研发出来后,要求 项目程序的 压缩包 体积不能大于 1MB,否则无法审核通过!而在 2017 年 4月份做了更改,由原来的 1MB 提升到了 2MB。
也因为 这样,所以 我们 与 后端服务器 进行联合的时候,采用的是接口的方式。也就是说 我们要让 后端 暴露一些接口,让我们可以通过 联网访问的方式 去 进行数据的交互!这样我们占用的 体积大小就会 少很多很多。
1.2 小程序可以干什么?
可以 与 传统的 APP 进行互补,可以实现 大多数 APP 都能实现的功能。然而 它却 比 APP 方便简洁,体积极小!
(比如买票的小程序、健康码的小程序 等等)- 小程序 解决了 当下 APP 市场很大的一个问题!
就是 该 APP 用户使用的频率不是很高,但还 不得不去使用,那么 小程序 就绝对是 首选了。
开发门槛低,成本低。发布 线上线下极其简单。
开发后 可能 就能 让大家 都去使用了。不需要 联系什么 某些手机的商城应用,然后 要求上架 等等这些子事。
1.3.1 开发环境部署
- 注册微信小程序
- 安装 IDE 开发工具
提取码:8zbl
Flex 布局 方式 的了解
Flex 布局的学习移动端相关的知识
- 物理像素
答:屏幕的分辨率、设备能控制显示的最小单元,可以把物理像素看成是对应的像素点。
- 设备独立像素 和 css 像素 (这两个 是 虚拟的像素)
答:设备独立像素(也叫密度无关像素),可以认为是 计算机坐标 系统 中 的一个点,这个点代表了一个 可以由程序使用并控制的虚拟像素(比如:CSS 像素,当然 在 android 机 中 它也被 叫做 “设备独立像素”),然后 由 相关系统 转换为 物理像素,进而 实现 操控。
- DPR、DPI、PPI
- 移动端适配方案
- viewport 适配
为什么 做 viewport 适配
答:手机厂商在生产收集的时候 大部分手机默认 页面 宽度 为 980 px,但 手机 实际的 视口 宽度 都要小于 980 px,比如 iphone6 的 是 375 px。特别是 我们 在开发的时候,有一个基本需求是必须要做到的,那就是 将 980 的页面 完全显示到 手机屏幕上 且 没有滚动条。
实现
<meta name = "viewport" content="width=device-width,initial-scale=1.0">
意思是 将视觉视口的宽度 赋值给 页面宽度,然后 按照 1:1 比例 缩放。
- rem 适配
为什么 做 rem 适配
答: 机型太多呀,不同手机的机型 屏幕大小都不一样。而且 在开发APP 或者小程序的时候,有一个基本需求,那就是 你的一套设计稿的内同 必须 能在 不同的机型上 呈现的效果 大差不差呀。那 肯定 就要 根据 屏幕大小 来 进行 不同的 变化了,内容 也要 相应进行变化。
实现
function remRefresh(){
let clientWidth = document.documentElement.clientWidth;
// 将屏幕 等分 10 份
let rem = clientWidth / 10;
document.documentElement.style.fontSize - rem + 'px';
document.body.style.fontSize = '12px';
}
window.addEventListener('pageshow',() => {
remRefresh();
})
// 函数防抖
let timeoutId;
window.addEventListener('resize',() => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
remRefresh();
},300)
})
lib-flexible
px2rem-loader
上述两个 第三方的 库,也是可以 实现的。
边栏推荐
- A laravel background management expansion package you can't miss - Voyager
- Ctfshow, information collection: web1
- Introduction and use of Kitti dataset
- 6. Electron borderless window and transparent window lock mode setting window icon
- WebRTC 音频抗弱网技术(上)
- Shengteng experience officer Episode 5 notes I
- Xiaomi's path of chip self-development
- What is data leakage
- Ffmpeg --- image processing
- JSON parsing instance (QT including source code)
猜你喜欢
CTFshow,信息搜集:web4
Niuke real problem programming - Day17
Ctfshow, information collection: web5
Ctfshow, information collection: web10
Ctfshow, information collection: web4
Niuke real problem programming - Day9
CTFshow,信息搜集:web8
【OBS】RTMPSockBuf_ Fill, remote host closed connection.
【跟着江科大学Stm32】STM32F103C8T6_PWM控制直流电机_代码
Webrtc audio anti weak network technology (Part 1)
随机推荐
Ctfshow, information collection: web5
Emqx 5.0 release: open source Internet of things message server with single cluster supporting 100million mqtt connections
Ctfshow, information collection: web7
时空可变形卷积用于压缩视频质量增强(STDF)
【服务器数据恢复】某品牌StorageWorks服务器raid数据恢复案例
What is data leakage
[today in history] July 7: release of C; Chrome OS came out; "Legend of swordsman" issued
Es log error appreciation -- allow delete
MySQL installation configuration 2021 in Windows Environment
【深度学习】语义分割实验:Unet网络/MSRC2数据集
激光雷达lidar知识点滴
Integer learning
用于增强压缩视频质量的可变形卷积密集网络
Pat grade a 1103 integer factorizatio
asp.netNBA信息管理系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目详细设计
Cocoscreator operates spine for animation fusion
Electronic remote error
Ctfshow, information collection: Web3
Promoted to P8 successfully in the first half of the year, and bought a villa!
缓冲区溢出保护