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

woaiwodejia333 · · 716 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。
【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截图20231212151026.png](http://static.itsharecircle.com/231212/f428eee0c691839ea39c9cf37cd8a4c2.png)
716 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传