从网页到微信小程序开发：一：小程序与普通网页的区别

最新推荐文章于 2024-05-05 07:23:38 发布

摸鱼小豆

最新推荐文章于 2024-05-05 07:23:38 发布

阅读量1.1k

点赞数 2

文章标签：小程序微信小程序前端

本文链接：https://blog.csdn.net/weixin_52683524/article/details/125331652

版权

提示：文章内容大部分摘抄微信官方文档，不喜勿喷，在此做个记录，同时也提出自己的思考和想法，希望看到的人也可以提出自己的看法，我会依照大家的看法不断修改文章，谢谢大家支持！

前言

相信有很多人都有过类似的经历，在学习过网页三剑客（html，css，js）后便进行微信小程序的开发，买书，在网上看视频，但当第一次进行小程序开发的时候相信大家肯定都会吐槽为啥微信小程序不能使用DOM API和BOM API，为啥不用div、span这些标签？为啥有些选择器不能够使用？
但同时也会觉得微信小程序的wx:if，wx:for,{{}}的数据绑定方式十分好用，再回去写web页面的时候又开始吐槽起web的一些不方便（当然会使用React, Vue框架的就知道微信官方那边是搬运了他们的想法，写网页的时候用上这些框架也是可以得到类似的效果的）
同时也会在初次写的时候在this.setData({ value: 1})和this.data.value = 1这个点上犯一些奇奇怪怪的错误，也有时候会疑惑，为什么使用this.setData({ value: 1})，对value进行赋值之后，后面用console.log(value);获得的value值不是自己想要的那个值。
在这篇文章中，我想就我的开发经验，和看官方文档后的一些思考同大家一起分享。

提示：以下是官方文档中的一些描述，大家可以跳转官方文档查看详细信息

一、小程序与普通网页的区别

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的，如表1-1所示。

在这里插入图片描述

网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。

二、思考分析

1.网页开发渲染线程和脚本线程是互斥的，而小程序则是分开的

首先最明显的变化，就是我们不能在小程序中使用DOM，BOM操作，同时，对于小程序而言，要动态改变渲染层的页面数据，就需要借助一些方法去改变页面的值，在微信官方的说法是这样的：

在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

那么回到刚刚的问题：

不能使用DOM、BOM操作呢是因为小程序的渲染层和逻辑层是分开的
不使用原生的标签是对标签进行的一定的封装，让其支持如“{{}}”的数据渲染等操作，同时也使用MVVM的开发模式，让渲染和逻辑分离，实现更层次化的开发，不选择支持一些选择器，也是为了开发更容易，因为页面的样式书写实际上推荐使用class，少用兄弟、后代等选择器（不容易因为一个样式修改影响一堆样式，同时对于复杂的优先级问题也不需要过多考虑）。
使用setData()方法，将数据渲染到页面，而这个过程是异步的，这个方法确实可以实现既赋值又渲染，但是由于异步，所以如果将其作为赋值作用，同时对赋值后的数据进行操作的话，就会由于因为另外一个线程还未将这个值赋值，导致值不正确的问题（此处代码示例如果有人觉得需要的话我再附加上），所以，如果只是赋值，那么this.data.value = 啥；正常赋值就可以了，如果同时这个值需要在页面改变，这时候才去调用setData()方法，因为看到很多人滥用setData()方法了，明明不需要进行页面数据的更新，依旧使用了这个去改变数据，大量的数据渲染会让页面加载速度降低，所以尽量减少不必要的页面渲染，所以需要铭记的是，setData()方法是既赋值又把数据渲染到页面，会有异步问题，如果只是赋值，this.data.value=值；直接赋值就可以了。