小程序与现代化移动Web体验的完美结合

r囧r小猫 2024-04-25 20:11 5阅读 0赞

![ab558ff3f5e347b4afb5748d1c26391a.gif][]

**🎬 江城开朗的豌豆**：[个人主页][Link 1]

**🔥 个人专栏** :[《 VUE 》][VUE] [《 javaScript 》][javaScript]

📝 **个人网站** :[《 江城开朗的豌豆🫛 》][Link 2]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

⭐ 专栏简介

📘 文章引言

一、是什么

二、背景

三、优缺点

⭐ 写在最后

--------------------

### ⭐ 专栏简介 ###

> 欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者，我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新，为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念，并提供实际案例和练习，让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具，我们都将为你提供丰富的内容和实用技巧，帮助你更好地理解并运用前端开发中的各种技术。
> 
> ![d3d827793cb7463581b9054b61d9f5e9.png][]
> 
> 同时，我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进，前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术，使你能够站在前沿，与时俱进。通过掌握最新的前端技术，你将能够在竞争激烈的Web开发领域中有更大的竞争力。

![58f57bd93ba343be90b6abee12b29308.png][]

### [📘][Link 3] 文章引言 ###

### 一、是什么 ###

2017年，微信正式推出了小程序，允许外部开发者在微信内部运行自己的代码，开展业务

截至目前，小程序已经成为国内前端的一个重要业务，跟 `Web` 和手机 `App` 有着同等的重要性

![52df74cee0e44db5b517c06510b6a346.png][]小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用

也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载

注意的是，除了微信小程序，还有百度小程序、微信小程序、支付宝小程序、抖音小程序，都是每个平台自己开发的，都是有针对性平台的应用程序

### 二、背景 ###

⼩程序并⾮凭空冒出来的⼀个概念，当微信中的 `WebView` 逐渐成为移动 `Web`的⼀个重要⼊⼝时，微信就有相关的 `JS-SDK`

`JS-SDK` 解决了移动⽹⻚能⼒不⾜的问题，通过暴露微信的接⼝使得 `Web` 开发者能够拥有更多的能⼒，然⽽在更多的能⼒之外，`JS-SDK`的模式并没有解决使⽤移动⽹⻚遇到的体验不良的问题

因此需要设计⼀个⽐较好的系统，使得所有开发者在微信中都能获得⽐较好的体验：

>  *  快速的加载
>  *  更强⼤的能⼒
>  *  原⽣的体验
>  *  易⽤且安全的微信数据开放
>  *  ⾼效和简单的开发

这些是`JS-SDK`做不到的，需要设计一个全新的小程序系统

对于小程序的开发，提供一个简单、高效的应用开发框架和丰富的组件及`API`，帮助开发者开发出具有原生体验的服务

其中相比`H5`，小程序与其的区别有如下：

>  *  运⾏环境：⼩程序基于浏览器内核重构的内置解析器
>  *  系统权限：⼩程序能获得更多的系统权限，如⽹络通信状态、数据缓存能⼒等
>  *  渲染机制：⼩程序的逻辑层和渲染层是分开的

> 小程序可以视为只能用微信打开和浏览的`H5`，小程序和网页的技术模型是一样的，用到的 `JavaScript` 语言和 `CSS` 样式也是一样的，只是网页的 `HTML` 标签被稍微修改成了 `WXML` 标签
> 
> 因此可以说，小程序页面本质上就是网页
> 
> 其中关于微信小程序的实现原理，我们在后面的文章讲到

### 三、优缺点 ###

优点：

>  *  随搜随用，用完即走：使得小程序可以代替许多APP，或是做APP的整体嫁接，或是作为阉割版功能的承载体
>  *  流量大，易接受：小程序借助自身平台更加容易引入更多的流量
>  *  安全
>  *  开发门槛低
>  *  降低兼容性限制

缺点：

>  *  用户留存：及相关数据显示，小程序的平均次日留存在13%左右，但是双周留存骤降到仅有1%
>  *  体积限制：微信小程序只有2M的大小，这样导致无法开发大型一些的小程序
>  *  受控微信：比起APP，尤其是安卓版的高自由度，小程序要面对很多来自微信的限制，从功能接口，甚至到类别内容，都要接受微信的管控

### ⭐ 写在最后 ###

> 请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
> 
> ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
> 
> ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
> 
> ✅ 对于文章中部分内容不理解
> 
> ✅ 解答我文章中一些疑问
> 
> ✅ 认为某些交互,功能需要优化,发现BUG
> 
> ✅ 想要添加新功能,对于整体的设计,外观有更好的建议
> 
> 最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

![b061e7afd3a14e3c993d485acf3320f0.png][]

[ab558ff3f5e347b4afb5748d1c26391a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/4b3dd52c33884d6681c34c5ab09afb6c.gif
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[Link 2]: https://tinyurl.com/yangtaoWeb
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/f89891458fef4c829494ecb015c776d7.gif
[d3d827793cb7463581b9054b61d9f5e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/e069664efba4468aa3ae1aedb1ff33c0.png
[58f57bd93ba343be90b6abee12b29308.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/c4d7fcb90b674449832ab912ac7cf55f.png
[Link 3]: https://blog.csdn.net/qq_48652579/article/details/133752898?spm=1001.2014.3001.5501#%E5%BC%95%E8%A8%80
[52df74cee0e44db5b517c06510b6a346.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/8f3da63bba4d469faf59b6882d671442.png
[b061e7afd3a14e3c993d485acf3320f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/9c22c2fbeacd4d0584d4e37a5d75dac3.png