-
>
全國計算機等級考試最新真考題庫模擬考場及詳解·二級MSOffice高級應用
-
>
決戰(zhàn)行測5000題(言語理解與表達)
-
>
軟件性能測試.分析與調優(yōu)實踐之路
-
>
第一行代碼Android
-
>
JAVA持續(xù)交付
-
>
EXCEL最強教科書(完全版)(全彩印刷)
-
>
深度學習
Taro多端開發(fā)權威指南 小程序、H5與App高效開發(fā)實戰(zhàn) 版權信息
- ISBN:9787121409066
- 條形碼:9787121409066 ; 978-7-121-40906-6
- 裝幀:一般膠版紙
- 冊數:暫無
- 重量:暫無
- 所屬分類:>>
Taro多端開發(fā)權威指南 小程序、H5與App高效開發(fā)實戰(zhàn) 本書特色
適讀人群 :從事前端開發(fā),期望通過Taro解決多端小程序、H5和App開發(fā)問題的開發(fā)者★ Taro多端開發(fā)市面首著 ★ 深入學習使用Taro,玩轉跨端跨框架開發(fā) ★ 支持使用 React/Vue/Nerv等框架 ★ 一處代碼,多處運行 ★ 快速開發(fā)微信/京東/百度/支付*/字節(jié)跳動/ QQ小程序/H5/React Native等應用 ★ 從基礎到實戰(zhàn),全方位講解Taro知識點與多端開發(fā)思路
Taro多端開發(fā)權威指南 小程序、H5與App高效開發(fā)實戰(zhàn) 內容簡介
本書詳細介紹了使用Taro進行多端開發(fā)所需要掌握的知識點。本書由淺入深,介紹了ES6常用語法、Taro基本用法、數據交互、Hooks解耦狀態(tài)與視圖、多端開發(fā)、TaroUI使用、插件的使用、性能優(yōu)化與Taro原理剖析,很后以一個項目串聯知識點,帶讀者一窺從項目搭建,到需求評審與開發(fā),再到性能優(yōu)化,很終部署上線的整個流程,直至完成一個完整的Taro多端開發(fā)項目。
本書示例豐富、注重實戰(zhàn),適用于從零開始學習Taro開發(fā)的初學者、希望更全面深入理解Taro的開發(fā)者。同時由于Taro與React語法相近,因此本書介紹的很多開發(fā)思想和實踐經驗同樣適用于React開發(fā)者。
Taro多端開發(fā)權威指南 小程序、H5與App高效開發(fā)實戰(zhàn) 目錄
第1章 初識Taro 1
1.1 Taro介紹 2
1.1.1 簡介 2
1.1.2 特性 2
1.1.3 Taro UI 4
1.1.4 其他 5
1.2 ES 6常用語法簡介 5
1.2.1 變量定義新方式——let、const 5
1.2.2 告別字符串拼接——模板字符串 7
1.2.3 優(yōu)雅獲取數組或對象中的值——解構賦值 8
1.2.4 二次元函數——箭頭函數 9
1.2.5 異步處理——Promise 9
1.2.6 面向對象編程——class 11
1.2.7 模塊化——import、export 12
1.3 開發(fā)環(huán)境及工具介紹 12
1.3.1 安裝Taro腳手架工具 12
1.3.2 初始化項目 13
1.3.3 運行項目 13
1.3.4 打包項目 15
1.3.5 Taro腳手架命令 15
1.4 規(guī)范約定 18
1.4.1 項目組織 18
1.4.2 JavaScript / TypeScript書寫規(guī)范 19
1.4.3 組件及JSX書寫規(guī)范 20
1.5 本章小結 21
第2章 Taro基礎 22
2.1 JSX 23
2.1.1 JSX簡介 23
2.1.2 JSX語法 23
2.2 組件化 25
2.2.1 初識組件 26
2.2.2 組件定義 27
2.2.3 props 29
2.2.4 state 30
2.2.5 樣式 31
2.3 組件生命周期 33
2.3.1 組件掛載 34
2.3.2 組件更新 34
2.3.3 組件卸載 35
2.4 事件處理 36
2.5 路由功能 40
2.6 實戰(zhàn)案例:受控與非受控Input組件 42
2.7 本章小結 44
第3章 Taro進階 45
3.1 組件設計 46
3.2 組件通信 47
3.2.1 父子組件通信 47
3.2.2 兄弟組件通信 49
3.2.3 更復雜的組件通信 49
3.3 服務端通信 52
3.3.1 Taro.request 52
3.3.2 請求終止 54
3.3.3 請求攔截器 55
3.4 使用Ref 56
3.5 本章小結 59
第4章 集中狀態(tài)管理 60
4.1 Redux 61
4.1.1 Redux 設計理念 61
4.1.2 在Taro中使用Redux 63
4.1.3 Redux 案例 65
4.2 MobX 69
4.2.1 MobX 設計理念 69
4.2.2 在Taro中使用MobX 69
4.3 本章小結 73
第5章 Hooks 74
5.1 Hooks 簡介 75
5.1.1 class組件的不足 75
5.1.2 Hooks概覽 76
5.1.3 Hooks規(guī)則 80
5.2 Hooks基礎 80
5.2.1 useState 81
5.2.2 useEffect 81
5.2.3 useReducer 83
5.2.4 useCallback 85
5.2.5 useMemo 86
5.2.6 useRef 87
5.2.7 useContext 88
5.2.8 其他Hooks 88
5.3 自定義Hooks 91
5.4 本章小結 94
第6章 多端開發(fā) 95
6.1 編譯配置與約定 96
6.1.1 編譯配置 96
6.1.2 設計稿與尺寸單位約定 98
6.2 多端開發(fā)方案 100
6.2.1 內置環(huán)境變量 100
6.2.2 統一接口的多端文件 101
6.2.3 指定解析 node_modules 包中的多端文件 103
6.3 多端同步調試與打包 104
6.4 本章小結 105
第7章 Taro UI 106
7.1 安裝及使用 107
7.1.1 快速上手 107
7.1.2 自定義主題 108
7.2 組件介紹 110
7.3 本章小結 111
第8章 插件機制 112
8.1 插件機制簡介 113
8.2 插件使用 115
8.3 自定義插件 117
8.3.1 插件結構 117
8.3.2 插件使用場景 117
8.3.3 插件環(huán)境變量 120
8.3.4 插件方法 122
8.4 本章小結 127
第9章 性能優(yōu)化與原理剖析 128
9.1 性能優(yōu)化 129
9.1.1 Prerender 129
9.1.2 虛擬列表 133
9.1.3 組件更新條件 134
9.2 Taro框架原理 135
9.2.1 Taro框架結構分析 136
9.2.2 Taro編譯原理 138
9.2.3 Taro運行時 144
9.3 Taro 3.x原理概述 146
9.4 本章小結 155
第10章 多端開發(fā)環(huán)境搭建 156
10.1 微信小程序開發(fā)環(huán)境搭建 157
10.2 支付寶小程序開發(fā)環(huán)境搭建 158
10.3 React Native開發(fā)環(huán)境搭建 160
10.3.1 在macOS系統下搭建iOS開發(fā)環(huán)境 160
10.3.2 在macOS系統下搭建Android開發(fā)環(huán)境 160
10.3.3 在Windows系統下搭建Android開發(fā)環(huán)境 162
10.3.4 使用Taro開發(fā) iOS應用 162
10.3.5 使用Taro開發(fā)Android應用 164
10.4 本章小結 166
第11章 閑置換App開發(fā)實踐 167
11.1 項目介紹 168
11.1.1 項目背景 168
11.1.2 項目需求 168
11.1.3 項目核心功能設計 169
11.1.4 項目架構設計 171
11.1.5 項目接口mock 172
11.2 基礎功能開發(fā) 172
11.2.1 通用請求庫封裝 172
11.2.2 引入dva 174
11.2.3 定義請求服務 177
11.2.4 為H5配置請求代理 179
11.3 自定義導航器 182
11.3.1 需求分析 182
11.3.2 微信小程序端開發(fā) 184
11.3.3 H5端開發(fā) 188
11.3.4 React Native端開發(fā) 190
11.4 首頁開發(fā) 194
11.4.1 搜索組件 194
11.4.2 瀑布流圖片組件 198
11.4.3 輪播圖組件 203
11.4.4 數據聯調 205
11.5 消息頁開發(fā) 216
11.5.1 定義底部導航 216
11.5.2 消息列表頁開發(fā) 219
11.5.3 聊天頁面開發(fā) 221
11.6 商品詳情頁開發(fā) 239
11.7 項目優(yōu)化與發(fā)布 259
11.7.1 項目優(yōu)化 259
11.7.2 項目打包發(fā)布 271
11.8 本章小結 280
第12章 擁抱Taro 3 281
12.1 Taro 演進歷程 282
12.1.1 Taro 1.x 282
12.1.2 Taro 2.x 282
12.1.3 Taro 3.x 284
12.2 使用Taro 3 285
12.2.1 React模板 285
12.2.2 Vue模板 288
12.3 本章小結 290
Taro多端開發(fā)權威指南 小程序、H5與App高效開發(fā)實戰(zhàn) 節(jié)選
3.2 組件通信 上一節(jié)我們了解了組件的設計思想,組件在被設計出來以后不是孤立的,也需要“交往”。例如下面的組件結構: MyContent與MySide的關系被稱為父子組件關系,MySide與MyList的關系被稱為兄弟組件關系。有時可能在MySide中的操作需要通知MyList,或者MySide中的操作需要通知MyContent,這一需求背后正是父子組件或兄弟組件之間的通信。 3.2.1 父子組件通信 一般而言,父子組件之間的通信通過事件完成,即在父組件定義事件處理函數,將這個函數作為props 傳遞給子組件,就能實現指定子組件的操作通知到父組件。示例如下: class Demo extends Taro.Component { handleChange(res) { console.log(res) } render() { return ( ) }} 上例說明了子組件操作觸發(fā)父組件的邏輯處理。那么父組件的操作觸發(fā)子組件的更新呢?便是通過props了,父組件數據更新后,通過props告知子組件,示例如下: class Demo extends Taro.Component { state = { count: 0 } render() { return ( ) }} 這種方式其實是將MySide中的count 狀態(tài)抽離出來存放到父組件,使得父組件或者父組件內的其他組件更改這個值變得容易。如果父組件希望觸發(fā)子組件內的操作,則可以結合引用Ref獲取子組件實例,然后通過引用使用子組件中的值或方法,具體使用方法我們將在3.4節(jié)介紹。 3.2.2 兄弟組件通信 兄弟組件狀態(tài)同步只能通過父組件實現,即將兄弟組件需要共用的狀態(tài)提取到父組件中,進而在兄弟組件上使用自定義事件的方式監(jiān)聽組件內部的操作。如果值發(fā)生更改,則需要通知其兄弟組件,代碼實現示例如下: class Demo extends Taro.Component { state = { count: 0 } handleChange = (res) => { this.setState({count: this.state.count + 1}) } render() { const {count} = this.state return ( ) }} 回想一下,在討論組件設計需要遵循的原則時,我們說組件的邊界要清晰,但是我們現在發(fā)現上例中MySide組件和MyList組件共同依賴了count 這一狀態(tài)。這時我們需要思索,這個問題出現的原因是什么,是組件設計粒度不合理?還是組件之間確實需要共用這個狀態(tài)?如果是前者,則需要重新考慮一下組件的設計;如果是后者,則可以用本例所示的解決方案去解決這一問題。 3.2.3 更復雜的組件通信 大多數情況下,以上列舉的兩種方案可以很好地解決組件之間的狀態(tài)同步問題?赏有更復雜的場景、更復雜的狀態(tài)同步問題亟待解決。例如,更深層級的狀態(tài)傳遞與通信,且該狀態(tài)只被*內層組件消費,以及狀態(tài)合并問題等。這里我們來看深層狀態(tài)傳遞問題。首先我們可以想到通過props逐層傳遞,例如: class One extends Taro.Component { render() { const {count} = this.props return{count} }}class Two extends Taro.Component { render() { const {count} = this.props return ( Two ) }}class Three extends Taro.Component { render() { return }} Two組件很顯然只是中介,count屬性傳遞給了它卻沒有被使用,只是透傳給了One組件。是否可以不經過這樣層層傳遞,而直接由Three組件創(chuàng)建狀態(tài),One組件使用這個狀態(tài)呢?這就需要使用Taro提供的context實現。代碼示例如下: const CountContext = Taro.createContext()class One extends Taro.Component { render() { return ( {count =>{count}} ) }}class Two extends Taro.Component { render() { const {count} = this.props return ( Two ) }}class Three extends Taro.Component { render() { return ( ) }} 這樣一來,count這一狀態(tài)就只是Three組件創(chuàng)造與更新、One組件消費了。這樣props 更簡捷,沒有造成污染。 如果以上方案還是無法解決應用中的狀態(tài)管理問題,就可能需要使用全局狀態(tài)管理了,關于復雜組件的狀態(tài)管理我們將在下一章詳細探討。
Taro多端開發(fā)權威指南 小程序、H5與App高效開發(fā)實戰(zhàn) 作者簡介
李佩忠,資深前端工程師,專注于大前端技術,熱衷開源,運營公眾號“JavaScript全!,擁有豐富的 Web 前端開發(fā)、數據可視化與移動端開發(fā)經驗,對 Taro 多端開發(fā)、移動端開發(fā)及 React 技術棧有深入的理解和實踐經驗。
- >
伯納黛特,你要去哪(2021新版)
- >
小考拉的故事-套裝共3冊
- >
羅曼·羅蘭讀書隨筆-精裝
- >
有舍有得是人生
- >
二體千字文
- >
莉莉和章魚
- >
名家?guī)阕x魯迅:朝花夕拾
- >
煙與鏡