专栏首页极乐技术社区手把手带你用 Vue 3.0 写个小程序框架

手把手带你用 Vue 3.0 写个小程序框架

由于小程序的开发起来比较原始复杂且繁琐,跟我们主流的开发方式差距很大,所以为了提高我们开发小程序的效率,市面上出现过很多的小程序的框架:mpvue,Taro,uni-app 等等,这些框架或多或少地将我们带到现代化的开发方式中来,他们可以让你使用 React 或者 Vue 来开发小程序。今天就分享一个如何利用 Vue 3.0 来构建一个小程序的框架

1

Vue3 部分新特性

Vue3 的新特性主要有 Composition APITeleportFragments<script setup /> & <style vars /> 等。

1. Composition API

Vue2.x 基于 Option API(选项 API )构建组件,一般来说组件拥有 data、methods、computed 等选项。这是一种属性相互隔离的模式,好处是各属性内容分离开,对于新手来说比较友好。

但对于大型项目来说,为了修改某个功能,可能需要在一个文件中来回翻页。Vue3 增加了 Composition API 方式(组合 API ),基于 reactivity(响应式)的思想进行组件构建,将逻辑封装到函数中,可以实现类似 React Hooks 的逻辑组合和重用。

对于大型项目,代码按照具体功能划分,而不是分散在不同的生命周期中,逻辑更加一目了然。

2. Teleport(传入)

Teleport 功能,使得我们可以将全屏的组件(例如 Toast)移到 Vue APP 节点外,而不需要在 UI 界面上修改其他组件样式,方便实现全屏蒙层、浮层弹窗等效果。

3. Fragments(碎片)

Vue2.x 版本中,<template /> 标签下不支持放置多个组件,这个限制在 Vue3 中不再存在。这点比较好理解,下述组件设计在 Vue3 中是没有问题的:

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>


4. 实验性质的语法糖<script setup>、<style vars>

a、<script setup>:用于在 SFC 中使用 Composition API 的语法糖,改善在单个文件组件中使用 Composition API 时的体验。

b、<style vars>: SFC 中状态驱动的 CSS 变量,它提供了直接的 CSS 配置和封装,支持将组件状态驱动的CSS变量注入到“单个文件组件”样式中。

2

小程序

要开发一个小程序的页面基本上我们只需要四个文件:

index.js

index.js 就是我们写代码逻辑的地方。

  • 有一个 Page 函数,里面是对象配置,类似于 Vue 的 options 配置一样,有一个 data 属性,存放着初始化的数据。
  • 如果想要修改数据改变视图,又需要像react一样,需要调用 setData 去修改视图。

index.ttml

index.ttml 是我们写视图模板的地方。

  • 类似于 vue 的 template,我们需要先定义模板才能显示视图
  • 注意: 不能直接在 index.js 里面去修改定义的模板的 DOM,只能先定义好,这是由于小程序架构双线程导致的,分为逻辑层和渲染层,我们写的 index.js 代码跑在逻辑层里面,index.ttml 跑在渲染层里面,两个线程就通过 setData 进行数据交换。
index.json

配置小程序页面和组件的地方,暂时不列出参数,但是一定要有这个文件。

index.ttss

顾名思义,就是写样式的地方,类似于 CSS。

模板

小程序为了封装的方便,可以先提前定义一个模板,然后再需要的地方引入模板即可,有点像 ejs 和 pug 的 import template 的用法

动态模板

上面说到,小程序里面不能动态的修改 DOM 节点,只能提前定义好 template,然后通过 setData 的形式去修改视图。

但是小程序又有个比较动态的特性,叫做动态选择模板

// 使用这个模板 <template is="{{type}}" data="{{item: item}}"/>

上面 is 属性的 type 就是动态的,它是个变量可以根据 type 的值来选择不同的模板,比如 type 为 view 时,就会渲染我们提前定义好的 view template。

自定义渲染层

重头戏来了,我们该如何利用 Vue 3.0 方便的自定义渲染层 结合小程序的动态选择模板的特性来去写一个小程序的框架呢?

import {
  createRenderer,
  CreateAppFunction,
} from '@vue/runtime-core';
export const { render, createApp: baseCreateApp } = createRenderer({
  patchProp, // 修改 props 的函数
  ...nodeOps, // 修改 dom 节点的函数
});

我们可以看到`createRenderer`函数需要两个参数,一个是patchProp,一个是nodeOps。

nodeOps

nodeOps 代表着修改 node 节点的一些操作,从而可以去改变视图,比如在 Vue 3.0 的浏览器环境中,是这么写的:

实际上 Vue 不管数据怎么变化,要将数据显示到视图上都是调用了 DOM 的一些 API,像上面的 doc.createElement 和 doc.createTextNode 等等。

VNode

是由于小程序的限制,我们不能直接像浏览器环境一样去修改 DOM,那我们可以先模仿浏览器的环境,创造出一个虚拟的DOM,我们叫做 VNode

可以看到我们创建的 VNode 类似于 DOM,也有一些操作 Node 节点的方法,最终生成一个 Node 树。我们就可以仿照vue 浏览器环境的 nodeOps 写法,先去修改我们的 VNode,在修改 Node 节点的同时里面我们可以去调用小程序的 setData 方法。

toJSON()

光是创造出 VNode 还不够,我们得让它渲染到小程序里面去,小程序要先渲染出数据必须是提前在 data 属性里面定义的数据,而且只能是普通的数据类型。

toJSON 方法就是可以将一个 VNode 给格式化成普通的对象,让小程序可以渲染出数据。

接口类型如下:

是不是跟 VDOM 的结构很熟悉?

path()

我们可以看到在我们定义的 VNode 里面,里面有个 path() 方法,这个方法就是获取 Node 节点在整个节点树的一个路径,然后可以利用 path 去修改某一个特定的 Node 节点。

编译层

我们写的代码肯定是Vue的代码,不是上面的模板代码,那么Vue的代码改怎么样去编译到上面的模板代码呢?

先看一下整体架构图:

Template

如果我们写的业务代码是常见的 vue 指令模板模式,那么我们可以在底层使用 @vue/compile-core 来 parse Vue 的 template,然后遍历 parse 后的 AST,收集其中用到的 tag 和 props。

JSX/TSX

如果我们写的业务代码是 JSX/TSX,那么这边可以写个收集 Tag 和 props 的 babel plugin,在 babel plugin 里面去遍历 AST,收集 Tag 和 props。

最终生成的 ttml

假如我们有一个 .vue 文件:

会生成下面的模板:

可以看到,从 $_TPL 的 root 节点出发,可以根据每个 item.type 来去选择下面生成的每个模板,每个模板里面又有循环,这样就可以结合VNode 无限的递归的渲染。

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:字节前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-12-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 手把手带你入门微信小程序新框架---Kbone

    微信小程序诞生至今,渗透到用户生活的方方面面,包括餐厅点餐,网上购物,乘车出行,挂号就医……

    极乐君
  • React 毁了 Web 开发!

    React 是一个很好的库,对于Web开发很重要,因为它引入了声明式与反应式模板,这在当时是每个人都需要的范式转变。当时(也就是6~7年前),我们面临着需要的范...

    开发者技术前线
  • 重构于 Vite:我如何做 SSG、静态资源发布以及自动化部署

    从 2021 年元旦 Vite 发布 2.0 Beta 版就一直在关注 Vite 的动态,借着春节放假有时间,而且 Vue 3.0 和 Vite 2.0 都才大...

    童欧巴
  • 小试牛刀,手把手带你实现第一个Go程序

    上篇文章,我们已经搭建了Go语言环境,可以戳这里:手把手带你进行Golang环境配置,本次我们来安排一下如何在win平台上输出都一个Go程序。

    Go进阶者
  • 那个男人 他带着Vue3来了~

    其实Vue3.0版本发布的消息,我是昨天晚上刷朋友圈看到的(已经差不多凌晨 1 点了),然后我就立刻起来,打开电脑,看了一下github,把官方发布文档过了一遍...

    前端森林
  • 未来大前端技术趋势深度解读

    自Vue.js 3.0爆出,三大主流框架,写法也是越来越相似,越来越贴近 WebComponents 标准,而周边应用层面的封装已经开始指数级增长。小程序是今年...

    Javanx
  • Hello!GitHub 好用好玩值得收藏的开源项目集合~

    GitHub地址:https://github.com/quii/learn-go-with-tests

    Kerwin
  • Hello!GitHub 好用好玩值得收藏的开源项目集合~

    GitHub地址:https://github.com/quii/learn-go-with-tests

    Kerwin
  • 适合初学者练手的vue小项目(附github源码)

    vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前...

    王小婷
  • Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战

    本篇将基于Python 3.7+Django 3.0结合Vue.js前端框架,为大家介绍如何基于这三者的技术栈来实现一个前端后离的Web开发项目。为了简化,方便...

    测试开发技术
  • [官宣] Vue 3.0 — One Piece 发布

    今天,我们自豪地宣布Vue.js 3.0 "One Piece "的正式发布。这个框架的新的主要版本提供了更好的性能、更小的捆绑包大小、更好的TypeScrip...

    前端开发博客
  • Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统

    最近在开发一个 Vue 3.0 + element-plus 练手项目,后面测试完成后,会把代码全部开源,部分页面的预览图如下:

    程序员十三
  • 主流框架人人都会,怎么做到一枝独秀?

    Vue3.0 Beta测试版已经出来大半月了,大家都有在新/小项目里试用了吗?以2.0的特点与现下对3.0测试版来说,3.0会默认进行懒观察,会更加有效,也会有...

    前端达人
  • Vue3发布半年我不学,摸鱼爽歪歪,哎~就是玩儿

    是从 Vue 2 开始学基础还是直接学 Vue 3 ?尤雨溪给出的答案是:“直接学 Vue 3 就行了,基础概念是一模一样的。”

    程序员十三
  • 手把手教你撸一个小程序带太阳码的海报分享

    我们都知道,微信小程序目前还不支持转发朋友圈,可能现在Android是支持了,iOS还不支持,但总的来说还不能支持普遍机型。这样假如我们需要推荐某个心仪的商品到...

    悟空码字
  • 程序员对于编程语言和框架焦虑感,累了,跟不上了?

    出了新的语言,新的框架,自己要跟不上了?如果你的焦虑感来自语言和框架的时候,就要看你所处的工作方向,如果是做开发,特别是前端开发,App 开发,必须跟着框架走。...

    一墨编程学习
  • Vue[0x03] - Vue基础实践

    抓重点讲吧,最开始可追溯的版本号是0.6.0这个,但是正式对外发布的版本是在2014年1月24日发布的0.8.0。后面就是两个打头的里程碑,一个是1.x.x,一...

    璀错
  • Vuejs 3.0 正式版发布!One Piece. 代号:海贼王

    Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本。

    夜尽天明
  • Vue3 究竟好在哪里?(和 React Hook 的详细对比)

    这几天 Vue 3.0 Beta 版本发布了,本以为是皆大欢喜的一件事情,但是论坛里还是看到了很多反对的声音。主流的反对论点大概有如下几点:

    ssh_晨曦时梦见兮

扫码关注云+社区

领取腾讯云代金券