欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

手把手帶你用 Vue 3.0 寫個(gè)小程序框架 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

手把手帶你用 Vue 3.0 寫個(gè)小程序框架

發(fā)表時(shí)間：2021-1-4

發(fā)布人：葵宇科技

瀏覽次數(shù)：92

由于小程序的開發(fā)起來比較原始復(fù)雜且繁瑣，跟我們主流的開發(fā)方式差距很大，所以為了提高我們開發(fā)小程序的效率，市面上出現(xiàn)過很多的小程序的框架：mpvue，Taro，uni-app 等等，這些框架或多或少地將我們帶到現(xiàn)代化的開發(fā)方式中來，他們可以讓你使用 React 或者 Vue 來開發(fā)小程序。今天就分享一個(gè)如何利用 Vue 3.0 來構(gòu)建一個(gè)小程序的框架。

1、Vue3 部分新特性

Vue3 的新特性主要有 Composition API、Teleport、Fragments 和 <script setup /> & <style vars /> 等。

1. Composition API

Vue2.x 基于 Option API（選項(xiàng) API ）構(gòu)建組件，一般來說組件擁有 data、methods、computed 等選項(xiàng)。這是一種屬性相互隔離的模式，好處是各屬性內(nèi)容分離開，對(duì)于新手來說比較友好。
但對(duì)于大型項(xiàng)目來說，為了修改某個(gè)功能，可能需要在一個(gè)文件中來回翻頁。Vue3 增加了 Composition API 方式（組合 API ），基于 reactivity（響應(yīng)式）的思想進(jìn)行組件構(gòu)建，將邏輯封裝到函數(shù)中，可以實(shí)現(xiàn)類似 React Hooks 的邏輯組合和重用。
對(duì)于大型項(xiàng)目，代碼按照具體功能劃分，而不是分散在不同的生命周期中，邏輯更加一目了然。

2. Teleport（傳入）

Teleport 功能，使得我們可以將全屏的組件（例如 Toast）移到 Vue APP 節(jié)點(diǎn)外，而不需要在 UI 界面上修改其他組件樣式，方便實(shí)現(xiàn)全屏蒙層、浮層彈窗等效果。

3. Fragments（碎片）

Vue2.x 版本中，<template /> 標(biāo)簽下不支持放置多個(gè)組件，這個(gè)限制在 Vue3 中不再存在。這點(diǎn)比較好理解，下述組件設(shè)計(jì)在 Vue3 中是沒有問題的：
<template>  
<header>...</header>  
<main v-bind="$attrs">...</main>  
<footer>...</footer>
</template>

4. 實(shí)驗(yàn)性質(zhì)的語法糖<script setup>、<style vars>
a、<script setup>:用于在 SFC 中使用 Composition API 的語法糖，改善在單個(gè)文件組件中使用 Composition API 時(shí)的體驗(yàn)。
b、<style vars>: SFC 中狀態(tài)驅(qū)動(dòng)的 CSS 變量，它提供了直接的 CSS 配置和封裝，支持將組件狀態(tài)驅(qū)動(dòng)的CSS變量注入到“單個(gè)文件組件”樣式中。
2、小程序
要開發(fā)一個(gè)小程序的頁面基本上我們只需要四個(gè)文件：

index.js

index.js 就是我們寫代碼邏輯的地方。

  • 有一個(gè) Page 函數(shù)，里面是對(duì)象配置，類似于 Vue 的 options 配置一樣，有一個(gè) data 屬性，存放著初始化的數(shù)據(jù)。

  • 如果想要修改數(shù)據(jù)改變視圖，又需要像react一樣，需要調(diào)用 setData 去修改視圖。


index.ttml

index.ttml 是我們寫視圖模板的地方。

  • 類似于 vue 的 template，我們需要先定義模板才能顯示視圖

  • 注意： 不能直接在 index.js 里面去修改定義的模板的 DOM，只能先定義好，這是由于小程序架構(gòu)雙線程導(dǎo)致的，分為邏輯層和渲染層，我們寫的 index.js 代碼跑在邏輯層里面，index.ttml 跑在渲染層里面，兩個(gè)線程就通過 setData 進(jìn)行數(shù)據(jù)交換。

index.json
配置小程序頁面和組件的地方，暫時(shí)不列出參數(shù)，但是一定要有這個(gè)文件。

index.ttss

顧名思義，就是寫樣式的地方，類似于 CSS。

模板

小程序?yàn)榱朔庋b的方便，可以先提前定義一個(gè)模板，然后再需要的地方引入模板即可，有點(diǎn)像 ejs 和 pug 的 import template 的用法

動(dòng)態(tài)模板
上面說到，小程序里面不能動(dòng)態(tài)的修改 DOM 節(jié)點(diǎn)，只能提前定義好 template，然后通過 setData 的形式去修改視圖。
但是小程序又有個(gè)比較動(dòng)態(tài)的特性，叫做動(dòng)態(tài)選擇模板。

// 使用這個(gè)模板 <template is="{{type}}" data="http://www.wxapp-union.com/{{item: item}}"/>
上面 is 屬性的 type 就是動(dòng)態(tài)的，它是個(gè)變量，可以根據(jù) type 的值來選擇不同的模板，比如 type 為 view 時(shí)，就會(huì)渲染我們提前定義好的 view template。

自定義渲染層

重頭戲來了，我們?cè)撊绾卫?Vue 3.0 方便的自定義渲染層 結(jié)合小程序的動(dòng)態(tài)選擇模板的特性來去寫一個(gè)小程序的框架呢？

我們可以看到`createRenderer`函數(shù)需要兩個(gè)參數(shù)，一個(gè)是patchProp，一個(gè)是nodeOps。

nodeOps

nodeOps 代表著修改 node 節(jié)點(diǎn)的一些操作，從而可以去改變視圖，比如在 Vue 3.0 的瀏覽器環(huán)境中，是這么寫的：

實(shí)際上 Vue 不管數(shù)據(jù)怎么變化，要將數(shù)據(jù)顯示到視圖上都是調(diào)用了 DOM 的一些 API，像上面的 doc.createElement 和 doc.createTextNode 等等。

VNode

是由于小程序的限制，我們不能直接像瀏覽器環(huán)境一樣去修改 DOM，那我們可以先模仿瀏覽器的環(huán)境，創(chuàng)造出一個(gè)虛擬的DOM，我們叫做 VNode。
可以看到我們創(chuàng)建的 VNode 類似于 DOM，也有一些操作 Node 節(jié)點(diǎn)的方法，最終生成一個(gè) Node 樹。我們就可以仿照vue 瀏覽器環(huán)境的 nodeOps 寫法，先去修改我們的 VNode，在修改 Node 節(jié)點(diǎn)的同時(shí)里面我們可以去調(diào)用小程序的 setData 方法。

toJSON()

光是創(chuàng)造出 VNode 還不夠，我們得讓它渲染到小程序里面去，小程序要先渲染出數(shù)據(jù)必須是提前在 data 屬性里面定義的數(shù)據(jù)，而且只能是普通的數(shù)據(jù)類型。

toJSON 方法就是可以將一個(gè) VNode 給格式化成普通的對(duì)象，讓小程序可以渲染出數(shù)據(jù)。
接口類型如下：

是不是跟 VDOM 的結(jié)構(gòu)很熟悉？

path()

我們可以看到在我們定義的 VNode 里面，里面有個(gè) path() 方法，這個(gè)方法就是獲取 Node 節(jié)點(diǎn)在整個(gè)節(jié)點(diǎn)樹的一個(gè)路徑，然后可以利用 path 去修改某一個(gè)特定的 Node 節(jié)點(diǎn)。

編譯層

我們寫的代碼肯定是Vue的代碼，不是上面的模板代碼，那么Vue的代碼改怎么樣去編譯到上面的模板代碼呢？
先看一下整體架構(gòu)圖：

Template

如果我們寫的業(yè)務(wù)代碼是常見的 vue 指令模板模式，那么我們可以在底層使用 @vue/compile-core 來 parse Vue 的 template，然后遍歷 parse 后的 AST，收集其中用到的 tag 和 props。

JSX/TSX

如果我們寫的業(yè)務(wù)代碼是 JSX/TSX，那么這邊可以寫個(gè)收集 Tag 和 props 的 babel plugin，在 babel plugin 里面去遍歷 AST，收集 Tag 和 props。

最終生成的 ttml

假如我們有一個(gè) .vue 文件：
會(huì)生成下面的模板：
可以看到，從 $_TPL 的 root 節(jié)點(diǎn)出發(fā)，可以根據(jù)每個(gè) item.type 來去選擇下面生成的每個(gè)模板，每個(gè)模板里面又有循環(huán)，這樣就可以結(jié)合VNode 無限的遞歸的渲染。

相關(guān)案例查看更多