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

笑面虎
• 阅读 191

【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语法来实现小程序应用。

点赞
收藏
评论区
推荐文章
胡哥有话说 胡哥有话说
3年前
喜大普奔,微信终于支持外网打开小程序啦!
前言千呼万唤始出来,微信小程序终于支持以URLScheme的形式从外部唤起了。longlongago我们只能在微信内的网页中使用微信开发标签小程序跳转按钮
可莉 可莉
2年前
2021年前端还有前景吗?
或许很多刚刚入门前端的同学都会思考:2021年前端还有前景吗?随着微信小程序的普及,以及app的下载,留给网页端的空间会越来越小吗?大公司固然无所谓,可是对于小公司与其耗费精力做网页,还不如开个公众号小程序。所以学前端会有未来吗?其实前端绝不仅仅是网页开发而已。微信小程序和App,其实都离不开前端范畴。尤其是微信小程序,几乎就是前端垄断的世
Stella981 Stella981
2年前
Django+小程序技术打造微信小程序助手 免费分享
纯分享无套路,需要者直接联系我目录介绍如下:!(https://oscimg.oschina.net/oscnet/f0e67f5d1402078b7069e6b273b0e54d985.png)第1章Django2.0微信小程序高可用部署上线,带你打通全栈开发第2章小程序开发入门,
Stella981 Stella981
2年前
2021年前端还有前景吗?
或许很多刚刚入门前端的同学都会思考:2021年前端还有前景吗?随着微信小程序的普及,以及app的下载,留给网页端的空间会越来越小吗?大公司固然无所谓,可是对于小公司与其耗费精力做网页,还不如开个公众号小程序。所以学前端会有未来吗?其实前端绝不仅仅是网页开发而已。微信小程序和App,其实都离不开前端范畴。尤其是微信小程序,几乎就是前端垄断的世
笑面虎 笑面虎
4个月前
【完结12章】基于C++从0到1手写Linux高性能网络编程框架
【完结12章】基于C从0到1手写Linux高性能网络编程框架分享一套课程——基于C从0到1手写Linux高性能网络编程框架,已完结12章,附源码电子书。大家下载学习。Socket网络编程框架Socket(套接字)是一个网络编程概念,描述了一个通信
笑面虎 笑面虎
3个月前
【完结15章】深入学习小程序框架底层原理,培养双线程思维
【完结15章】深入学习小程序框架底层原理,培养双线程思维给大家分享一套课程——《深入学习小程序框架底层原理,培养双线程思维》,课程共15章,附源码下载。微信小程序在产品功能设计上给用户更多控制力。在微信小程序的设置页,为用户提供了数据权限开关,一旦用户授权
灵吉菩萨 灵吉菩萨
1个月前
开课吧-Web全栈架构师34期|完结无秘
深入Vue/React/Node/实战小程序/微信公众号开发/Reactnative/工程化/自动化测试等download:kuxueit.cn/6988/前端技术:学习HTML、CSS、JavaScript等前端基础知识,以及现代前端框架如React、V
笑面虎 笑面虎
4个月前
基于C++从0到1手写Linux高性能网络编程框架(2023新课)
基于C从0到1手写Linux高性能网络编程框架(2023新课)分享课程——基于C从0到1手写Linux高性能网络编程框架,2023年新课,附源码电子书,课程包更新。Linux在服务器领域有着强大的优势,网络编程便是其中一项重要组成部分,运用合理的
笑面虎 笑面虎
4个月前
【完结11章】技术大牛成长课,从0到1带你手写一个数据库系统
【完结11章】技术大牛成长课,从0到1带你手写一个数据库系统给大家分享一套数据库课程——技术大牛成长课,从0到1带你手写一个数据库系统,课程已完结,共11章,附源码。数据库系统是为适应数据处理的需要而发展起来的一种较为理想的数据处理系统,也是一个为实际可运
赵颜 赵颜
4个月前
[15章]深入学习小程序框架底层原理,培养双线程思维
学习地址1:https://pan.baidu.com/s/1ridzu0mrj1vrfT07fdReuw提取码:3zd2学习地址2:https://pan.baidu.com/s/1SChnJCGf03sybLfyAnkCA提取码:c862前端高手特训从