【15章】前端高手特训 从0到1带你手写一个微信小程序底层框架

【15章】前端高手特训 从0到1带你手写一个微信小程序底层框架 视频课程分享——前端高手特训 从0到1带你手写一个微信小程序底层框架，课程包更新，附源码。大家下载学习。 微信小程序实质上是一款基于web技术的应用程序，他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言，代码结构以及代码的运行机制是一样。但是他们也存在一些不同之处，最直观地来看，网站页面是运行在浏览器中，微信小程序是运行在微信中。此外，微信小程序能够做到与微信紧密相融，使得在一些功能上的开发更为方便。比如获取用户身份，因为微信账号实际上已经标识了用户身份，只需要调取微信的信息就能很方便地知道用户是谁。此外还有包括手机位置信息，使用手机存储等，借助微信这一平台，小程序都能达到近乎原生APP的操作体验。 假设做一个网站或者小程序是建造一间房子，那么html搭建了房子的骨架，通过html我们可以给房子设置一些墙、柱子和门窗。这些我们称之为组件，顾名思义，是房子的组成部件。那么在实际的前端中，这些柱子和门窗就是图片、链接、输入框和按钮等这些组成一个页面的基本元素，有了这些也就有了这个页面的框架。 同时，微信小程序的框架分为两层，分别是视图层和逻辑层，框架的视图层由WXML与WXSS编写，由组件来进行展示，负责小程序的外貌；逻辑层又称为AppService，由js编写，负责小程序的行为动作。因此，我们编写的代码主要是三部分：视图层、逻辑层以及他们之间的联系互动，这一联系具体就是视图层与逻辑层之间的交互。逻辑层将数据进行处理后发送给视图层，同时接收视图层的事件反馈。视图层将逻辑层的数据展示到界面，同时将视图层的事件发送给逻辑层。 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏 可以切换页面），可以通过 tabBar 配置 tab 切换时显示的对应页面 其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab 修改 app.json 配置文件，增加 tabBar 属性配置 "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath":"./images/home.png", "selectedIconPath":"./images/home_select.png" }, { "pagePath": "pages/news/news", "text": "新闻", "iconPath": "./images/news.png", "selectedIconPath": "./images/news_select.png" }] }, 配置 app.json 文件中的 tabBar 的属性 "tabBar": { "color":"#999999", "selectedColor":"#ff0000", "backgroundColor":"#fff", "borderStyle":"black", "position":"bottom", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath":"./images/home.png", "selectedIconPath":"./images/home_select.png" }, { "pagePath": "pages/news/news", "text": "新闻", "iconPath": "./images/news.png", "selectedIconPath": "./images/news_select.png" }] }, 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理 有多少个页面，此处就应该有多少个选项 数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。 在一个小程序前端代码中，也即miniprogram文件夹下，一共有四种类型的文件，分别是：.json、.wxml、.wxss、.js。 json文件主要用来配置项目或者页面的属性，称为配置文件，文件内均为json格式的对象。 Wxml文件用来描述页面的结构，称为模板文件，代码类似html语言。 Wxss文件描述页面的样式，也称为样式文件，代码类似css语言。 js文件用来描述页面的逻辑，即处理页面和用户的交互，也称为脚本逻辑文件。这四种是小程序代码中比较核心的文件类型， 除了原生开发，微信小程序还提供了一些框架来简化开发过程，包括Wepy、Mpvue和Taro等。这些框架都基于微信小程序原生开发技术，提供了更加便捷的开发方式。 1. Wepy Wepy是一种基于Vue框架的微信小程序框架，开发者可以使用Vue语法来实现页面的渲染和逻辑控制。Wepy支持自定义组件、自定义事件和数据绑定等功能，大大简化了微信小程序的开发流程。 2. Mpvue Mpvue是一种基于Vue框架的小程序开发框架，于2017年推出。该框架采用了Vue的组件化开发思想，将小程序中的页面、组件和服务等封装成Vue组件。Mpvue还提供了自定义事件、组件通讯和数据绑定等功能，可以帮助开发者更快速地创建小程序应用。 3. Taro Taro是一种跨平台的小程序开发框架，支持微信小程序、支付宝小程序、百度小程序和字节跳动小程序等多个平台。Taro采用了React的组件化开发思想，提供了类似于React的API和组件库，开发者可以使用React语法来实现小程序应用。