前言
概览
下面是关于笔者我小程序八股文笔记，终于也来博客做同步的更新啦。下面给个图来概览一下吧。
这里是具体的目录情况，但在我的博客share中，我并不会完全按照下面篇章来。
那么在这里的第一篇章，笔者我主要想介绍两个部分的内容：一个是小程序的基础/背景，另外一个是小程序与其他平台的区别。
一、 微信小程序基础/背景
这一部分主要介绍小程序的基本架构，优缺点，开发的流程等。
小程序的理解
- 从开发的角度来看，小程序是一种开发能力，可以看成一种基于HTML、CSS 和 JavaScript 的移动应用程序，提供了大量的内置组件和API，具有开发成本低，开发效率高的优点。同时，开发人员可以将小程序集成到微信或其他社交媒体平台上，以提供快速访问和获取所需信息和服务的功能。
- 对于使用者来说，小程序是一种轻量级的应用程序，无需下载安装，通常可以在微信或其他社交媒体平台上创建和发布，可以提供快速、便捷、高效的服务或体验。
- 微信小程序的理解：微信小程序是一种轻量级应用程序，用户可以直接在微信内使用，无需下载或安装。
微信小程序的优点及缺点
- 优势：无需下载安装，随搜随用，用完即走，入口众多，使用便捷快速，服务请求快，流量大，也容易被接受，开发成本低，降低兼容性限制，可靠安全，具有良好的用户体验。
- 劣势： 开发及发布的限制多（体积限制，资源限制），样式单一，依托微信或其他平台，推广面相对较窄，用户留存率相对较低。
💡 体积限制的个人感受：在打包小程序上面时，发现图标资源体积占用高，无法上传（微信小程序只有2M的大小，这样导致无法开发大型一些的小程序），所以后面一些大的图像资源使用的时网络资源请求的形式。
-
详情
-
优势：无需下载安装，随搜随用，用完即走，入口众多，使用便捷快速，服务请求快，流量大，也容易被接受，开发成本低，降低兼容性限制，可靠安全，具有良好的用户体验。- 无需下载，通过搜索和扫一扫就可以打开。
- 良好的用户体验：打开速度快。
- 开发成本要比App要低。
- 安卓上可以添加到桌面，与原生App差不多。
- 为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的。
-
劣势：开发及发布的限制多（体积限制，资源限制），样式单一，依托微信或其他平台，推广面相对较窄，用户留存率相对较低。- 限制较多。页面大小不能超过2M。不能打开超过5个层级的页面。
- 样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。
- 推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。
- 依托于微信，无法开发后台管理功能。
-
简述一下微信小程序的相关文件类型
简单来说就是标记语言wxml，样式语言wxss，逻辑代码语言js，配置语言json.
全局主题文件：
-
app.js 可以在里边监听生命周期函数、声明全局变量
小程序逻辑文件，主要用来注册小程序全局实例，编译时会和其他页面的逻辑文件打包成一个JavaScript文件，项目中不可缺少。
-
app.json 小程序的全局配置（页面路径、网络超时时间、底部tabBar 、导航背景颜色等）
程序公共设置文件，配置小程序全局设置，项目中不可缺少。
-
app.wxss
小程序主样式表文件，类似于HTML的css文件，主样式表文件中设置的样式，在其他页面文件中同样有效，该文件不是必需的。
页面文件：
-
WXML：是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
页面的结构文件，用来设计页面的布局、数据绑定等，相当于HTML页面中扩展名为html文件，其在页面中不可缺少。
-
WXSS：是一套样式语言，用于描述WXML组件样式。
页面样式表文件，用来定义页面中用到的各类样式表。若.wxml文件内联样式及app.wxss文件内的样式表定义同本页面的样式表定义相同时，内联样式优先于.wxss文件样式，.wxss文件样式优先于app.wxss文件样式，该文件不是必需的。
-
js：处理逻辑，网络请求。
页面逻辑文件，在该文件中编写javascript代码以控制页面逻辑，其在页面中不可缺少。
-
json 配置当前页面标题和引入组件等
页面配置文件，其在页面中不可缺少。
简述一下小程序的开发流程？
- 注册微信小程序账号
- 获取微信小程序的 AppID
- 下载微信小程序开发者工具
- 创建demo项目
- 去微信公众平台配置域名
- 手机预览
- 代码上传
- 提交审核
- 小程序发布
简述一下微信小程序的框架？
微信小程序使用的是WXML+WXSS+JS来进行应用程序的搭建，本质上是一个单页应用，所有的页面渲染和事件处理都在一个页面内进行，但可以通过微信客户端调用原生的各种接口。与网站不同，小程序是一个双线程框架，也就是说渲染线程和 JS 线程是互相别独立的。与采用Vue开发的网站相似，小程序也是基于数据驱动的框架，也就是说UI和数据是分离的。
二、微信小程序与其他的区别，联系
这一部分主要介绍小程序的以及它与网站，uniapp等其他前端的区别与联系
微信小程序中的js和浏览器中的js以及node中的js的区别
直观的说小程序中没有DOM和BOM对象，也无法对npm包进行管理
浏览器中JS
- ES
- DOM
- BOM
Node中的JS
- ES
- NPM
- Native
小程序中的JS
- ES
- 小程序框架
- 小程序API
NPM： 是包管理系统、NPM是目前最大的开原库生态系统，通过各种NPM扩展包快速的实践一些功能。
Native： 就是原生的模块，通过这个模块来使用JavaScript语言本身不具有的一些能力（native方法简单的讲，即Java调用非Java代码的接口）。
请谈谈wxml与标准的html的异同？
- 相同：都是用来描述页面的结构；都由标签、属性等构成；
- 不同：
- 标签名字不一样，且小程序标签更少，单一标签更多
- 多了一些wx:if 这样的属性以及 {{ }}这样的表达式
- WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览；
- 组件封装不同， WXML对组件进行了重新封装
- 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象
请谈谈WXSS和CSS的异同？
WXSS和CSS类似，不过在CSS的基础上做了一些补充和修改。
-
在WXSS中，引入了rpx尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。
在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。
在iphone6手机下，屏幕宽度是375px，所以1rpx=0.5px。
wxss尺寸单位rpx的引入，来提升不同屏幕的适配体验，750rpx = 375px；单位 1rpx(Rpx) = （屏幕宽度/750）px -
提供了全局的样式和局部样式，仅支持部分css选择器
项目根目录中的 app.wxss 会作用于所有小程序页面
局部页面的 .wxss 样式仅对当前页面生效- wxss仅支持部分css选择器:
- .class和#id
- element
- 并集选择器 后代选择器
- ::after ::before等伪类选择器
- wxss仅支持部分css选择器:
-
外联样式导入不同，wxss 使用@import标识符来导入外联样式。
没有 Body；样式可直接使用import导入 -
wxss的图片引入需使用外链地址
微信小程序与H5的区别？
其中相比H5，小程序与其的区别有如下：
- 运⾏环境：⼩程序基于浏览器内核重构的内置解析器
- 系统权限：⼩程序能获得更多的系统权限，如⽹络通信状态、数据缓存能⼒等
- 渲染机制：⼩程序的逻辑层和渲染层是分开的
小程序可以视为只能用微信打开和浏览的H5，小程序和网页的技术模型是一样的，用到的 JavaScript 语言和 CSS 样式也是一样的，只是网页的 HTML 标签被稍微修改成了 WXML 标签
-
运行环境的不同
传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。 -
开发成本的不同
只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG -
渲染方式与 H5 不同
小程序一般是通过 Native 原生渲染的，但是小程序同时也支持 web 渲染，如果使用 web 渲染的方式，我们需要初始化一个WebView 组件，然后在 WebView 中加载 H5 页面；所以当我们开发一个小程序时，通常会使用 hybrid 的方式，即会根据具体情况选择部分功能用小程序原生的代码来开发，部分功能通过 WebView 加载 H5 页面来实现。Native 与 Web 渲染混合使用，以实现项目的最优解；这里值得注意的是，小程序下，native 方式通常情况下性能要优于 web 方式。 -
小程序特有的双线程设计
H5 下我们所有资源通常都会打到一个 bundle.js 文件里（不考虑分包加载），而小程序编译后的结果会有两个bundle，index.js封装的是小程序项目的 view 层，以及 index.worker.js 封装的是项目的业务逻辑，在运行时，会有两条线程来分别处理这两个bundle，一个是主渲染线程，它负责加载并渲染 index.js 里的内容，另外一个是 Service Worker线 程，它负责执行 index.worker.js 里封装的业务逻辑，这里面会有很多对底层api调用。
微信小程序与Vue区别
- 生命周期不一样，微信小程序生命周期比较简单
- 数据绑定也不同，微信小程序数据绑定需要使用{{}}，vue 直接:就可以 显示与隐藏元素，vue中，使用 v-if和 v-show
- 控制元素的显示和隐藏，小程序中，使用wx-if和hidden 控制元素的显示和隐藏
- 事件处理不同，小程序中，全用 bindtap(bind+event)，或者 catchtap(catch+event)绑定事件,vue：使用v-on:event 绑定事件，或者使用@event绑定事件
- 数据双向绑定也不也不一样在 vue中,只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变，这是 vue非常 nice 的一点。微信小程序必须获取到表单元素，改变的值，然后再把值赋给一个 data中声明的变量。
- 父传子的不同点是：微信小程序在子组件中接受父组件传 用 propertites 进行接收，而不是 props
- 子传父的不同点是：微信小程序在子组件中使用 triggerEvent 抛出自定义事件名，而不是 this.$emit()
- 在微信小程序中，
slot是作为组件属性传递给父组件的，父组件可以通过访问slot属性来获取子组件中的填充内容。而在 Vue 中，slot则是作为一个自定义属性存在于组件中，可以通过访问该属性来获取子组件中的填充内容。 - 小程序直接
this.data属性是不可以同步到视图的，必须调用this.setData
小程序的父子传参和vue中的有什么区别
- 父传子的不同点是：微信小程序在子组件中接受父组件传 用 propertites 进行接收，而不是 props
- 子传父的不同点是：微信小程序在子组件中使用 triggerEvent 抛出自定义事件名，而不是 this.$emit()
- 在微信小程序中，
slot是作为组件属性传递给父组件的，父组件可以通过访问slot属性来获取子组件中的填充内容。而在 Vue 中，slot则是作为一个自定义属性存在于组件中，可以通过访问该属性来获取子组件中的填充内容。
小程序的双向绑定和 vue 哪里不一样
小程序直接 this.data属性是不可以同步到视图的，必须调用this.setData
请谈谈原生开发小程序，wepy，mpvue的对比？
个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。 而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。 而如果如果团队前端强大，自己做一套框架也没问题。
小程序与原生App哪个好
各有各自的优点，都又有缺点
小程序的优点：
- 基于微信平台开发，享受微信自带的流量，这个优点最大
- 无需安装，只要打开微信就能用，不占手机内存，体验好
- 开发周期段，一般最多一个月就可以上线完成
- 开发所需的资金少，所需资金是开发原生APP的一半不到
- 小程序名称是唯一的，在微信的搜索里权重很高
- 容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本没有大问题
- 基本不需要考虑兼容性问题，只要微信可以正常运行的机器，就可以运行小程序
- 发布，审核高效，基本上午发布审核，下午就审核通过，升级简单，支持灰度发布
- 开发文档完善，社区活跃
- 支持插件式开发，一些基本功能可以开发成插件，供多个小程序使用
小程序的缺点：
- 局限性很强（比如页面大小不能超过1M，不能打开超过5个层级的页面，样式单一，小程序的部分组件已经是成型的了，样式不能修改，比如幻灯片，导航）只能依赖于微信依托与微信，无法开发后台管理功能
- 不利于推广，推广面窄，不能分享朋友圈，只能分享给朋友，附近小程序推广，其中附加小程序也收到微信限制
- 后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦
- 前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致
- js引用只能使用绝对路径，不能操作DOM
原生App优点：
- 原生的相应速度快
- 对于有无网络操作时，譬如离线操作基本选用原生开发
- 需要调用系统硬件的功能（摄像头，拨号，短信蓝牙…）
- 在无网络或者弱网情况下体验好
原生App缺点：
- 开发周期长，开发成本高，需要下载
微信小程序与公众号，微信之间的关系与区别
小程序和微信公众号都是微信生态系统内的重要组成部分，具有各自的优势和劣势。
微信小程序是一种应用程序，类似于普通的手机应用，可以在微信中直接运行，而不需要安装到手机系统中。而微信公众号则是一种公众号服务平台，类似于官方网站，需要通过微信搜索或扫码关注后才能使用。其实，从更加现实的角度简单来说，公众号是引流平台，小程序是成交平台。
下篇笔记链接
【小程序八股文】系列之篇章二 | 小程序的核心机制
下篇笔记链接：【待更新】
下篇笔记内容：【待更新】
原创笔记，未经同意请勿转载文章来源：https://www.toymoban.com/news/detail-792140.html
码字不易文章来源地址https://www.toymoban.com/news/detail-792140.html
到了这里，关于【小程序八股文】系列之篇章一 | 小程序基础及与其他产品区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![java八股文面试[java基础]—— 重载 和 重写](https://imgs.yssmx.com/Uploads/2024/02/653992-1.png)
