【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语法来实现小程序应用。![QQ截图20231212150347.png](https://static.golangjob.cn/231212/1869f47bf07d869c8632333b040b5f8e.png)
有疑问加站长微信联系(非本文作者)
![](https://static.golangjob.cn/static/img/footer.png?imageView2/2/w/280)