中興AX5400Pro+上手體驗：再升級 雙2.5G網口+USB 3.0這次全都有
2021年11月的時候，中興先后發布了兩款路由器產品，中興AX5400和中興AX5400 Pro，從產品命名上就不難看出這是隸屬于同一系列的，但在外觀設計上這兩款產品可以說是完全沒一點關系
在如今不斷增長的小程序市場中，小程序的數量迅速增多。這是因為小程序具有諸多優勢，例如輕量化、便捷性和良好的用戶體驗，吸引了越來越多的開發者和企業加入這一領域。隨著小程序的普及，各個行業都紛紛推出自己的小程序，以滿足用戶的多樣化需求。
然而，正是因為小程序市場的多樣性和快速發展，每個小程序客戶端的 Api 差異也變得十分顯著。不同的小程序平臺為了滿足自身的特殊需求和功能定位，往往會對 Api 進行定制和調整。這導致了各個小程序客戶端之間的 Api 存在差異，不同平臺的開發者需要針對不同的 Api 進行開發和適配。
對于開發者來說，針對不同平臺重新開發一套小程序應用將變成一場無盡的噩夢。開發者需要熟悉并掌握每個客戶端的api差異，編寫大量重復的代碼，并進行平臺特定的調試和適配工作。這不僅增加了開發的工作量和時間成本，還容易導致錯誤和兼容性問題。
在這樣的背景下，Taro 的出現為開發者提供了一種解決方案。它通過提供一套統一的開發框架和組件，使開發者能夠編寫一套代碼，同時在多個小程序平臺上運行。Taro 的編譯工具能夠將開發者的代碼轉換為不同平臺所需的代碼，從而實現跨平臺的開發和適配，減輕了開發者的負擔，提高了開發效率。
Taro是一套遵循 React 語法規范的多端統一開發框架（ps：Vue 語法也支持）。主要用于構建跨平臺的小程序、H5和移動應用。市面上還存在其他的多端框架，包括但不限于：
在上述的這些中，只有uni-app是支持小程序場景的，它占據了多端框架的半壁江山。
概括來講，Taro的主要特點和優勢，參照官方說法：“使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、App 端等）運行的代碼。”
這里需要解釋一下“編譯時配置”機制。官方說的“一次編譯”，并不是真的打一個 dist 包，能跑遍所有的平臺。
而是根據你想要運行的平臺，用對應的指令，打出適合該平臺運行的包。
舉個例子：
微信小程序 編譯命令 yarn build:weapp百度小程序 編譯命令 yarn build:swan支付寶小程序 編譯命令 yarn build:alipayH5 編譯命令 yarn build:h5RN 編譯命令 yarn build:rn --platform ios……所以我們需要真正關心的，其實是針對目標的平臺，Taro 都做了哪些事。下面以微信小程序為例子：
Taro 框架內置了對應的編譯器和構建工具，在 @tarojs/plugin-platform-weapp 微信小程序平臺插件中。在此注冊微信小程序平臺的配置項。
//taro-weapp/src/index.ts//在此注冊微信小程序平臺ctx.registerPlatform({ name: 'weapp', useConfigName: 'mini', async fn ({ config }) { const program = new Weapp(ctx, config, options || {}) await program.start() }})預先定義一個名為微信小程序的 Template 模版類，該類繼承自 UnRecursiveTemplate。其主要功能是處理 Taro 框架中的模板相關操作，并根據特定需求進行定制。
//taro-weapp/src/template.tsexport class Template extends UnRecursiveTemplate { ... //構建wxs模板 buildXsTemplate () { return '<wxs module="xs" src="./utils.wxs" />' } //創建小程序組件 createMiniComponents (components): any { const result = super.createMiniComponents(components) // PageMeta & NavigationBar this.transferComponents['page-meta'] = result['page-meta'] this.transferComponents['navigation-bar'] = result['navigation-bar'] delete result['page-meta'] delete result['navigation-bar'] return result } //替換屬性名稱 replacePropName (name: string, value: string, componentName: string, componentAlias) { ... } //構建wxs模板中與焦點相關的方法，根據插件選項判斷是否啟用鍵盤附件功能，并返回相應的字符串 buildXSTepFocus (nn: string) { ... } //修改模板結果的方法，根據節點名稱和插件選項對模板進行修改。 modifyTemplateResult = (res: string, nodeName: string, _, children) => { ... } //構建頁面模板的方法，根據基礎路徑和頁面配置生成頁面模板字符串。 buildPageTemplate = (baseTempPath: string, page) => { ... }}Taro 的編譯工具，根據所選擇的平臺，轉換成對應平臺所需的代碼。使用 ctx.applyPlugins ，去調用相應平臺的插件處理函數，其中 platform 參數指定對應的平臺:
//taro-cli/src/build.ts...await ctx.applyPlugins(hooks.ON_BUILD_START)await ctx.applyPlugins({ name: platform, opts: { config: { ...config, isWatch, mode: isProduction ? 'production' : 'development', blended, isBuildNativeComp, newBlended, async modifyWebpackChain (chain, webpack, data) { await ctx.applyPlugins({ name: hooks.MODIFY_WEBPACK_CHAIN, initialVal: chain, opts: { chain, webpack, data } }) },...除此之外呢，代碼轉換過程，還涉及：
在編譯過程中，Taro 還會執行：
不通平臺的api或多或少，總有一些差異。Taro如何實現api的適配和差異化處呢？
Taro 通過適配層和條件編譯等機制實現 api 的適配和差異化處理。
它提供了一套統一的 api 接口，開發者可以在代碼中使用這些 api，而 Taro 在編譯過程中會將這些 api 轉換為適用于各個平臺的具體實現。
以getLocation 為例。
如果我們要使用定位功能，在 Taro 中只需要在項目中使用 Taro 提供的 api getLocation :
Taro.getLocation().then(res => { console.log(res.latitude, res.longitude);});在編譯過程中，Taro 會根據目標平臺的差異，將這段代碼轉換為適用于不同平臺的具體實現。
對于微信小程序來說，轉換為微信小程序的 wx.getLocation，同時保留原始的參數和回調函數：
wx.getLocation().then(res => { console.log(res.latitude, res.longitude);});而對于支付寶小程序而言，Taro 則會將其轉換為支付寶小程序的 my.getLocation，同樣保留原始的參數和回調函數：
my.getLocation().then(res => { console.log(res.latitude, res.longitude);});如此，Taro 在編譯過程中根據目標平臺的差異，將統一的 api 轉換為各個平臺所支持的具體 api。在這段代碼中，processApis 函數接收一個 api 集合作為參數，并對其中的每個api進行處理：
//shared/native-apis.tsfunction processApis (taro, global, config: IProcessApisIOptions = {}) { ... apis.forEach(key => { if (_needPromiseApis.has(key)) { const originKey = key taro[originKey] = (options: Record<string, any> | string = {}, ...args) => { let key = originKey // 第一個參數 options 為字符串，單獨處理 if (typeof options === 'string') { ... } // 改變 key 或 option 字段，如需要把支付寶標準的字段對齊微信標準的字段 if (config.transformMeta) { ... } ... // 為頁面跳轉相關的 api 設置一個隨機數作為路由參數。為了給 runtime 區分頁面。 setUniqueKeyToRoute(key, options) // Promise 化：將原本的異步回調形式轉換為返回Promise對象的形式，使api的調用更加方便且符合現代JavaScript的異步處理方式。 const p: any = new Promise((resolve, reject) => { obj.success = res => { config.modifyAsyncResult?.(key, res) options.success?.(res) if (key === 'connectSocket') { resolve( Promise.resolve().then(() => task ? Object.assign(task, res) : res) ) } else { resolve(res) } } obj.fail = res => { options.fail?.(res) reject(res) } obj.complete = res => { options.complete?.(res) } if (args.length) { task = global[key](obj, ...args) } else { task = global[key](obj) } }) // 給 promise 對象掛載屬性 if (['uploadFile', 'downloadFile'].includes(key)) { ... } return p } } else { ... } }) ...}ps：雖然 Taro 提供了一套統一的 api 接口，但某些平臺可能不支持特定的功能或特性。可能需要使用條件編譯來調用平臺特定的 api，以處理特定平臺的差異。
當我們使用 Taro 去編寫多端項目，需要使用 Taro 提供的 View 等Taro組件。
因為，這些Taro組件，在不同平臺上會被轉換為相應的原生組件或元素。
舉個例子，下面的代碼中，我們使用Taro提供的Image,View,Text組件創建視圖：
import Taro from '@tarojs/taro';import { View, Text, Image } from '@tarojs/components';function MyComponent() { return ( <View> <Text>Hello</Text> <Image src="path/to/image.png" /> </View> );}在編譯生成過程中，Taro 會根據目標平臺的差異將組件轉換為適用于各個平臺的具體組件。比如View 組件會被轉換為微信小程序的 view 組件。對H5來說，View 組件會被轉換為 <div> 元素。
在微信小程序中：
<view> <text>Hello</text> <image src="path/to/image.png"></image></view>在 H5 中：
<div> <span>Hello</span> <img src="path/to/image.png" /></div>這樣，我們可以使用相同的代碼編寫視圖，也就是官方說的只要寫一套代碼的意思。
通過抽象層、平臺適配、跨平臺編譯等處理，Taro其實已經為多端組件庫的實現鋪平了道路。如果你要做一個 Taro-UI 那樣適應自己的多端組件庫。直接使用Taro提供的基礎組件去搭建復雜組件即可。
如果你說，你以前做過一個微信小程序，現在老板要你平行移植到支付寶等小程序中。來不及重構代碼的話，反向轉換也許能救一救急。反向轉換，故名思義就是將小程序轉換為Taro項目。
相關的代碼在 @tarojs/cli-convertor 包中，核心邏輯在 parseAst 中，生成 AST 樹，遍歷處理對應的內容：
//taro-cli-convertor/src/index.tsparseAst ({ ast, sourceFilePath, outputFilePath, importStylePath, depComponents, imports = [] }: IParseAstOptions): { ast: t.File scriptFiles: Set<string> } { ... // 轉換后js頁面的所有自定義標簽 const scriptComponents: string[] = [] ... traverse(ast, { Program: { enter (astPath) { astPath.traverse({ //對類的遍歷和判斷 ClassDeclaration (astPath){...}, //表達式 ClassExpression (astPath) {...}, //導出 ExportDefaultDeclaration (astPath) {...}, //導入 ImportDeclaration (astPath) {...}, //調用 CallExpression (astPath) {...}, //檢查節點的 object 屬性是否為標識符 wx，如果是，則將 object 修改為標識符 Taro，并設置一個標志變量 needInsertImportTaro 為 true。這段代碼可能是將 wx 替換為 Taro，以實現對 Taro 框架的兼容性處理。 MemberExpression (astPath) {...}, //檢查節點的 property 屬性是否為標識符 dataset，如果是，則將 object 修改為一個 getTarget 函數的調用表達式，傳遞了兩個參數 object 和標識符 Taro。它還創建了一個導入語句，將 getTarget 函數引入，并將其賦值給一個對象模式。這段代碼可能是對可選鏈式調用中的 dataset 屬性進行處理，引入了 getTarget 函數來實現相應的轉換。 OptionalMemberExpression (astPath) {...}, // 獲取js界面所有用到的自定義標簽，不重復 JSXElement (astPath) {...}, // 處理this.data.xx = XXX 的情況，因為此表達式在taro暫不支持, 轉為setData // 將this.data.xx=XX 替換為 setData() AssignmentExpression (astPath) {...} }) }, exit (astPath) {...} }, }) ... return { ast, scriptFiles, } }ps：盡管官方提供了反向轉換這一種工具，但是目前還是有局限性的。并不是所有的小程序都支持反向轉換，目前只有微信小程序。且并不是所有的原生 api 都可以被轉換，需要注意。希望后續該功能能夠繼續擴大，完善。
為什么需要 Prerender?官方給出了解釋：
Taro Next 在一個頁面加載時需要經歷以下步驟：
框架（React/Nerv/Vue）把頁面渲染到虛擬 DOM 中
Taro 運行時把頁面的虛擬 DOM 序列化為可渲染數據，并使用 setData() 驅動頁面渲染
小程序本身渲染序列化數據和原生小程序或編譯型小程序框架相比，步驟 1 和 步驟 2 是多余的。如果頁面的業務邏輯代碼沒有性能問題的話，大多數性能瓶頸出在步驟 2 的 setData() 上：由于初始化渲染是頁面的整棵虛擬 DOM 樹，數據量比較大，因此 setData() 需要傳遞一個比較大的數據，導致初始化頁面時會一段白屏的時間。這樣的情況通常發生在頁面初始化渲染的 wxml 節點數比較大或用戶機器性能較低時發生。
Taro 預渲染的工作原理是，在構建階段使用服務器端渲染（SSR）的技術，將頁面組件渲染成靜態 HTML 文件，并將其保存在靜態文件目錄中。然后，當客戶端請求該頁面時，直接返回預渲染的靜態 HTML，而不是動態生成頁面。
通過在構建階段將頁面渲染為靜態 HTML 文件，以提升首次加載速度、改善用戶體驗和優化搜索引擎的索引。
使用方式：
//config/index.js 或 /config/dev.js 或 /config/prod.jsconst config = { ... mini: { prerender: { match: 'pages/shop/**', // 所有以 `pages/shop/` 開頭的頁面都參與 prerender include: ['pages/any/way/index'], // `pages/any/way/index` 也會參與 prerender exclude: ['pages/shop/index/index'] // `pages/shop/index/index` 不用參與 prerender } }};module.exports = config更多使用詳見官網文檔。
經過上面粗淺的分析，我們可以初步了解 Taro 的整套運作機制。以下是對其運作機制的總結：
https://taro-docs.jd.com/docs/
本文鏈接：http://www.www897cc.com/showinfo-26-44390-0.html探索Taro：跨平臺開發的實踐與原理
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號