uniapp是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者只需編寫一套代碼,就可發(fā)布到iOS、Android、Web(響應(yīng)式)及各種小程序、快應(yīng)用等多個平臺。
由于uniapp借助了Vue.js和小程序的設(shè)計和生態(tài),所以對于初學(xué)者而言,通過對比理解和學(xué)習(xí)將是最快的入門方式,所以本書除了介紹uniapp中常用的組件和API,還涉及HTML、CSS、Vue.js,以及小程序中的重要知識點,以此來幫助初學(xué)者快速了解uniapp技術(shù)的來龍去脈,并通過豐富的對比案例為讀者介紹uniapp的技術(shù)細(xì)節(jié)及實現(xiàn)原理,還能夠幫助初學(xué)者快速地建立uniapp的知識體系。
不僅如此,本書還以uniapp項目作為核心,以實際應(yīng)用為目標(biāo),并以在項目研發(fā)過程中遇到問題,解決問題的方式讓讀者逐步學(xué)習(xí)uniapp的相關(guān)知識點,除了技術(shù)方面,書中內(nèi)容還穿插一些筆者在實際構(gòu)建軟件及解決問題過程中的思考及感悟。本書摒棄了深奧難懂的復(fù)雜理論和拗口的術(shù)語,盡量以通俗易懂的語言讓讀者學(xué)習(xí)并掌握uniapp這門技術(shù),并在各個章節(jié)配以相關(guān)的視頻講解和代碼案例,希望每位讀者能夠隨著作者的節(jié)奏,沉浸式地踏入這趟學(xué)習(xí)之旅,力求讓初學(xué)者能通過這套課程掌握構(gòu)建uniapp項目的基本思路與方法,并通過不斷地練習(xí)與思考舉一反三,最終能夠使用uniapp構(gòu)建出屬于自己的軟件。
本書主要內(nèi)容
本書分為預(yù)熱篇、客戶端篇、服務(wù)器端篇、項目上線篇共4篇,配有大量的案例代碼及圖解說明。全書的主要內(nèi)容如下:
預(yù)熱篇(第1~3章),通過與Vue.js、小程序、HTML5等技術(shù)對比并通過HBuilder X創(chuàng)建、運行、調(diào)試第1個模板項目初步講解uniapp,感受其開發(fā)效率及跨平臺的能力。該篇能夠幫助開發(fā)者快速建立知識體系及熟悉uniapp對應(yīng)的開發(fā)工具。
客戶端篇(第4~6章),從原型設(shè)計開始,以頁面設(shè)計作為起點,介紹HTML、CSS相關(guān)的知識點及應(yīng)用,并結(jié)合uniapp相關(guān)的組件及API完成客戶端頁面的開發(fā),為開發(fā)者介紹在uniapp項目開發(fā)中所需要的基本知識點。
服務(wù)器端篇(第7~10章),通過自建服務(wù)、云服務(wù)和開放服務(wù)這3種不同的服務(wù)調(diào)用及構(gòu)建方式結(jié)合uniapp相關(guān)的組件及API完成客戶端與服務(wù)器端之間的通信及調(diào)試工作。作為服務(wù)能力的擴充,最后會簡單介紹與爬蟲相關(guān)的知識與應(yīng)用。通過本篇開發(fā)者將會掌握uniapp應(yīng)用與其他應(yīng)用間常用的通信方法。
項目上線篇(第11章和第12章),主要介紹云服務(wù)的相關(guān)概念,以及部署到云服務(wù)器的相關(guān)操作。通過本章開發(fā)者將會掌握服務(wù)器端部署的操作、Bash腳本的編寫及HTTP升級為HTTPS的操作和相關(guān)知識點。在掌握了這些知識之后相信各位讀者一定會對使用uniapp框架開發(fā)應(yīng)用軟件有更加深刻的理解。
資源下載提示
素材(源碼)等資源: 掃描目錄上方的二維碼下載。
視頻等資源: 掃描封底的文泉云盤防盜碼,再掃描書中相應(yīng)章節(jié)的二維碼,可以在線學(xué)習(xí)。
致謝
由衷地感謝清華大學(xué)出版社的編輯為本書提供的寶貴建議,并為圖書出版付出的辛勤勞動。另外還要感謝筆者的家人尤其是妻子,在得知筆者要進(jìn)行寫作之后主動承擔(dān)起了絕大部分家務(wù)并悉心照料剛出生不久的寶寶,使筆者能夠全身心地投入寫作之中。
由于筆者水平有限,而且uniapp技術(shù)發(fā)展日新月異,書中難免會有一些不完善的地方,請讀者見諒,并提出寶貴意見。
陳斯佳2024年2月
預(yù)熱篇
第1章初識uniapp(24min)
1.1互聯(lián)網(wǎng)的發(fā)展簡史
1.1.1互聯(lián)網(wǎng)的誕生
1.1.2互聯(lián)網(wǎng)發(fā)展四部曲
1.1.3狂飆下的移動互聯(lián)網(wǎng)
1.2uniapp簡介
1.2.1小程序時代
1.2.2跨平臺框架進(jìn)化史
1.2.3跨平臺框架之爭
1.3本章小結(jié)
第2章創(chuàng)建uniapp(31min)
2.1案例項目簡介
2.1.1項目功能簡介
2.1.2項目知識點簡介
2.2uniapp項目創(chuàng)建
2.2.1HBuilder X
2.2.2第1個uniapp項目
2.2.3uniapp目錄結(jié)構(gòu)及全局文件
2.3uniapp項目解讀
2.3.1運行項目
2.3.2index.vue文件解讀
2.3.3uniapp、HTML、Vue.js、小程序的區(qū)別與聯(lián)系
2.3.4Vue.js模板編譯
2.3.5vnode到真實DOM及DOMDIFF
2.4本章小結(jié)
第3章感受uniapp(18min)
3.1Web端運行調(diào)試uniapp
3.1.1uniapp在Web端調(diào)試運行
3.1.2uniapp在Web端同步斷點
3.1.3uniapp在Web端中Debug
3.2真機運行調(diào)試uniapp
3.2.1運行到Android基座
3.2.2使用Android模擬器運行調(diào)試
3.2.3使用Android手機運行調(diào)試
3.2.4uniapp在Android系統(tǒng)中Debug
3.3uniapp一鍵跨平臺發(fā)布到微信小程序
3.3.1配置AppID生成微信小程序項目
3.3.2項目導(dǎo)入并運行到微信開發(fā)者工具
3.4微信開發(fā)者工具調(diào)試
3.4.1通過HBuilder X運行到微信開發(fā)者工具
3.4.2微信開發(fā)者工具調(diào)試
3.5uniapp開發(fā)微信小程序與微信小程序原生開發(fā)對比
3.5.1功能實現(xiàn)對比
3.5.2性能體驗對比
3.5.3社區(qū)生態(tài)對比
3.5.4開發(fā)體驗對比
3.5.5擴展性對比
3.6本章小結(jié)
客 戶 端 篇
第4章從零開始(18min)
4.1繪制藍(lán)圖
4.1.1Axure RP
4.1.2首頁繪制
4.2頁面布局與樣式綁定
4.2.1CSS布局概述
4.2.2Flex布局詳解
4.2.3uniapp動態(tài)修改樣式
4.3How to be a master
4.4本章小結(jié)
第5章首頁開發(fā)(25min)
5.1使用HBuilder X繪制首頁
5.2uniapp中的數(shù)據(jù)綁定
5.2.1vbind指令
5.2.2vhtml指令
5.2.3vmodel指令
5.3在uniapp中使用函數(shù)
5.3.1函數(shù)的定義
5.3.2使用setInterval函數(shù)實現(xiàn)逐字輸出效果
5.3.3uniapp生命周期
5.4uniapp路由
5.4.1使用API進(jìn)行跳轉(zhuǎn)
5.4.2使用navigator組件進(jìn)行跳轉(zhuǎn)
5.5本章小結(jié)
第6章功能頁開發(fā)(24min)
6.1繪制功能頁面
6.2軟件復(fù)用技術(shù)
6.2.1使用函數(shù)庫
6.2.2使用繼承
6.2.3使用接口
6.2.4進(jìn)行模塊化開發(fā)
6.2.5使用開源框架
6.3uniapp中的復(fù)用技術(shù)
6.3.1easycom
6.3.2插槽
6.3.3組合式API
6.4uniapp事件
6.4.1事件監(jiān)聽及事件處理
6.4.2事件修飾符
6.4.3事件映射表
6.5uniapp交互反饋
6.6uniapp中的數(shù)據(jù)傳遞
6.7本章小結(jié)
服務(wù)器端篇
第7章服務(wù)器端建設(shè)(14min)
7.1軟件架構(gòu)演進(jìn)
7.1.1MVC架構(gòu)風(fēng)格
7.1.2Flux架構(gòu)風(fēng)格
7.1.3MVP架構(gòu)風(fēng)格
7.1.4MVVM架構(gòu)風(fēng)格
7.2服務(wù)器端環(huán)境工具準(zhǔn)備
7.2.1JDK環(huán)境配置
7.2.2IDEA
7.3創(chuàng)建Spring Boot應(yīng)用
7.3.1快速構(gòu)建應(yīng)用
7.3.2Spring Boot目錄結(jié)構(gòu)及文件解讀
7.3.3uni.request
7.3.4同源策略及解決方案
7.4本章小結(jié)
第8章使用云服務(wù)(11min)
8.1完善文本翻譯功能
8.1.1Spring Boot集成翻譯云服務(wù)
8.1.2uniapp數(shù)據(jù)緩存
8.1.3picker組件實現(xiàn)下拉列表選擇
8.2完善圖片風(fēng)格轉(zhuǎn)化功能
8.2.1Spring Boot集成圖片風(fēng)格遷移云服務(wù)
8.2.2uni.chooseFile與uni.uploadFile
8.3本章小結(jié)
第9章使用OpenAPI(12min)
9.1申請ChatGPT服務(wù)
9.2通過開源項目集成ChatGPT服務(wù)
9.2.1GitHub簡介
9.2.2在HBuilder X中使用Git
9.2.3服務(wù)器端集成ChatGPT
9.3uniapp客戶端對應(yīng)頁面完善
9.3.1uniapp依據(jù)HTTP狀態(tài)碼處理返回結(jié)果
9.3.2uniapp依據(jù)調(diào)用成功與否處理返回結(jié)果
9.3.3對應(yīng)頁面數(shù)據(jù)展示
9.4本章小結(jié)
第10章使用爬蟲(5min)
10.1認(rèn)識爬蟲
10.1.1爬蟲的種類
10.1.2爬蟲的應(yīng)用場景
10.2編寫爬蟲
10.2.1找到目標(biāo)地址分析頁面
10.2.2Spring Boot中編寫爬蟲
10.2.3爬蟲的約定協(xié)議與反爬蟲技術(shù)
10.3本章小結(jié)
項目上線篇
第11章服務(wù)器端部署(16min)
11.1申請云服務(wù)器
11.2服務(wù)器端打包部署
11.2.1通過IDEA打包
11.2.2部署到云服務(wù)器
11.2.3編寫自動化腳本
11.3本章小結(jié)
第12章項目上線(9min)
12.1從HTTP到HTTPS
12.1.1SSL/TLS
12.1.2DNS解析配置
12.2Spring Boot集成證書
12.2.1申請證書
12.2.2配置證書
12.3微信小程序發(fā)布上線
12.4本章小結(jié)