【小程序八股文】系列之篇章一 | 小程序基础及与其他产品区别

前言

概览

下面是关于笔者我小程序八股文笔记，终于也来博客做同步的更新啦。下面给个图来概览一下吧。

这里是具体的目录情况，但在我的博客share中，我并不会完全按照下面篇章来。

那么在这里的第一篇章，笔者我主要想介绍两个部分的内容：一个是小程序的基础/背景，另外一个是小程序与其他平台的区别。

一、 微信小程序基础/背景

这一部分主要介绍小程序的基本架构，优缺点，开发的流程等。

小程序的理解

• 从开发的角度来看，小程序是一种开发能力，可以看成一种基于HTML、CSS 和 JavaScript 的移动应用程序，提供了大量的内置组件和API，具有开发成本低，开发效率高的优点。同时，开发人员可以将小程序集成到微信或其他社交媒体平台上，以提供快速访问和获取所需信息和服务的功能。
• 对于使用者来说，小程序是一种轻量级的应用程序，无需下载安装，通常可以在微信或其他社交媒体平台上创建和发布，可以提供快速、便捷、高效的服务或体验。
• 微信小程序的理解：微信小程序是一种轻量级应用程序，用户可以直接在微信内使用，无需下载或安装。

微信小程序的优点及缺点

• 优势：无需下载安装，随搜随用，用完即走，入口众多，使用便捷快速，服务请求快，流量大，也容易被接受，开发成本低，降低兼容性限制，可靠安全，具有良好的用户体验。
• 劣势： 开发及发布的限制多（体积限制，资源限制），样式单一，依托微信或其他平台，推广面相对较窄，用户留存率相对较低。

💡 体积限制的个人感受：在打包小程序上面时，发现图标资源体积占用高，无法上传（微信小程序只有2M的大小，这样导致无法开发大型一些的小程序），所以后面一些大的图像资源使用的时网络资源请求的形式。

• 详情

  • 优势：无需下载安装，随搜随用，用完即走，入口众多，使用便捷快速，服务请求快，流量大，也容易被接受，开发成本低，降低兼容性限制，可靠安全，具有良好的用户体验。

    1. 无需下载，通过搜索和扫一扫就可以打开。
    2. 良好的用户体验：打开速度快。
    3. 开发成本要比App要低。
    4. 安卓上可以添加到桌面，与原生App差不多。
    5. 为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的。

  • 劣势： 开发及发布的限制多（体积限制，资源限制），样式单一，依托微信或其他平台，推广面相对较窄，用户留存率相对较低。

    1. 限制较多。页面大小不能超过2M。不能打开超过5个层级的页面。
    2. 样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。
    3. 推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。
    4. 依托于微信，无法开发后台管理功能。

简述一下微信小程序的相关文件类型

简单来说就是标记语言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 使用@import标识符来导入外联样式。没有 Body；样式可直接使用 import 导入

• wxss的图片引入需使用外链地址

微信小程序与H5的区别？

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

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

小程序可以视为只能用微信打开和浏览的H5，小程序和网页的技术模型是一样的，用到的 JavaScript 语言和 CSS 样式也是一样的，只是网页的 HTML 标签被稍微修改成了 WXML 标签

1. 运行环境的不同
   传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

2. 开发成本的不同
   只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG

3. 渲染方式与 H5 不同
   小程序一般是通过 Native 原生渲染的，但是小程序同时也支持 web 渲染，如果使用 web 渲染的方式，我们需要初始化一个WebView 组件，然后在 WebView 中加载 H5 页面；所以当我们开发一个小程序时，通常会使用 hybrid 的方式，即会根据具体情况选择部分功能用小程序原生的代码来开发，部分功能通过 WebView 加载 H5 页面来实现。Native 与 Web 渲染混合使用，以实现项目的最优解；这里值得注意的是，小程序下，native 方式通常情况下性能要优于 web 方式。

4. 小程序特有的双线程设计
   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缺点：

• 开发周期长，开发成本高，需要下载

微信小程序与公众号，微信之间的关系与区别

小程序和微信公众号都是微信生态系统内的重要组成部分，具有各自的优势和劣势。

微信小程序是一种应用程序，类似于普通的手机应用，可以在微信中直接运行，而不需要安装到手机系统中。而微信公众号则是一种公众号服务平台，类似于官方网站，需要通过微信搜索或扫码关注后才能使用。其实，从更加现实的角度简单来说，公众号是引流平台，小程序是成交平台。

下篇笔记链接

【小程序八股文】系列之篇章二 | 小程序的核心机制
下篇笔记链接：【待更新】
下篇笔记内容：【待更新】

原创笔记，未经同意请勿转载

码字不易