《從零到一：全面解析小程序開發(fā)實(shí)戰(zhàn)指南》

《從零到一：全面解析小程序開發(fā)實(shí)戰(zhàn)指南》小程序頁(yè)面設(shè)計(jì)制作全解析：從0到1的實(shí)戰(zhàn)指南#商城小程序#小程序商城#購(gòu)物小程序那今天的話主要是給大家分享一下我自己的小程序開發(fā)的方法，我個(gè)人認(rèn)為比較輕松也比較方便的方法。對(duì)開發(fā)小程序需要哪些基本的技能？那我個(gè)人的建議是啊，就是先學(xué)會(huì)前端三件套，HTML，CSS，js會(huì)開發(fā)網(wǎng)頁(yè)之后再去開發(fā)小程序，可能會(huì)簡(jiǎn)單很多，如果學(xué)會(huì)Vue或者react開發(fā)框架，再去開發(fā)小程序，效率肯定是會(huì)比原生開發(fā)更高的。所以我個(gè)人更推薦的是就是走前端這個(gè)方向的同學(xué)，就是先把will或react學(xué)完，先會(huì)用框架開發(fā)網(wǎng)頁(yè)，再去開發(fā)小程序，那你的這個(gè)學(xué)習(xí)的曲線會(huì)更平緩，那會(huì)更容易入門一些，因?yàn)樾〕绦蛩囊?guī)則確實(shí)是會(huì)比網(wǎng)頁(yè)開發(fā)要更多的啊。那我們一般比較主流的開發(fā)方式是有兩種，一種是原生，那原生開發(fā)就是完全用某個(gè)平臺(tái)小程序的開發(fā)語(yǔ)法，比如說(shuō)微信的話，它就是什么WXM，但是對(duì)于我們大多數(shù)開發(fā)者，尤其是個(gè)人開發(fā)者來(lái)說(shuō)，那這種方式它的這個(gè)開發(fā)效率就是不高的，所以不是很推薦大家用這種方式，那我們現(xiàn)在更多的是用這個(gè)小程序開發(fā)框架去開發(fā)，那比如說(shuō)大家熟知的一些跨端開發(fā)框架，那什么叫跨端開發(fā)呢？就是說(shuō)我們寫一套代碼，然后交給框架幫我們自動(dòng)編譯出，在各個(gè)平臺(tái)上都能很絲滑、很正常運(yùn)行的小程序，或者說(shuō)其他的這種應(yīng)用的形態(tài)。那比如說(shuō)APP，那比如說(shuō)H5、網(wǎng)頁(yè)等等，就是我不用針對(duì)不同的平臺(tái)，每個(gè)平臺(tái)我都要單獨(dú)寫一個(gè)新的項(xiàng)目，跨端開發(fā)它的一個(gè)優(yōu)點(diǎn)是方便，但是缺點(diǎn)是什么？比如說(shuō)你為了性能想要去自己定制開發(fā)，或者要定制某些人家框架沒(méi)有提供的功能，那這種情況下就麻煩一些了。我們開發(fā)小程序又分為前端還有后端，那剛剛講的這些什么跨端開發(fā)原生語(yǔ)法，它更多的是在前端這個(gè)方向上，小程序的后端開發(fā)跟其他的網(wǎng)頁(yè)端項(xiàng)目、客戶端項(xiàng)目的后端開發(fā)都是類似的，所以說(shuō)這里不打算過(guò)多的介紹，比如你用Java寫，用go語(yǔ)言，那都是一模一樣的啊。只不過(guò)可能小程序登錄，你需要去單獨(dú)開發(fā)一下小程序平臺(tái)提供的第三方接口，那這個(gè)可能需要額外的學(xué)習(xí)，那當(dāng)然了，這個(gè)微信官方，或者說(shuō)一些小程序平臺(tái)官方，它為了讓你更快的開發(fā)這個(gè)小程序，可能提供了一些額外的方式。那比如說(shuō)微信云開發(fā)，它就會(huì)幫你提供一套數(shù)據(jù)庫(kù)文件存儲(chǔ)、數(shù)據(jù)分析等等等等的環(huán)境。那這個(gè)云開發(fā)它能夠幫助就是前端開發(fā)非常熟悉，但是后端不怎么了解的同學(xué)快速地把這個(gè)后端給搭起來(lái)，更新的開發(fā)方式就是叫低代碼開發(fā)。那你可以用這種拖拉拽的方式，那比如說(shuō)騰訊云提供了微搭，那這個(gè)是入門成本最低的，但是它的定制化的成本就反而變高了。你如果啥都不會(huì)，又想快速用小程序，那就買，那就只能買了。大家覺(jué)得小程序這個(gè)應(yīng)用形態(tài)它有什么優(yōu)點(diǎn)呢？基于微信的生態(tài)，它是易于傳播和分享的。第二個(gè)就是它不用讓用戶下載APP，對(duì)吧？打開快速，這兩個(gè)是我們做小程序可能最看重的一個(gè)點(diǎn)啊。那這里就說(shuō)一下，我們公司自己也在做產(chǎn)品，那我們的代碼小抄制的工具，它就是支持用小程序來(lái)快速分享的。我舉個(gè)例子，這里分享我們就有微信小程序分享，大家手機(jī)掃碼立刻就能夠打開這個(gè)小程序去使用。在我們開始正式寫代碼之前，我們要先了解小程序的開發(fā)流程，那如果我們要開發(fā)微信小程序，就要學(xué)會(huì)閱讀官方的文檔，官方文檔里面它有那個(gè)詳細(xì)的指引，比如說(shuō)你要先了解小程序的開發(fā)規(guī)則，對(duì)吧？要去安裝開發(fā)工具，那怎么去運(yùn)行？怎么去編譯瀏覽？大家感興趣可以自己閱讀一下，點(diǎn)擊這里安裝開發(fā)者工具，點(diǎn)擊進(jìn)入下載頁(yè)面，選擇對(duì)應(yīng)的操作系統(tǒng)版本，等待下載就好了。這個(gè)小程序開發(fā)界面分為三大部分，準(zhǔn)確的說(shuō)分為四大部分，第一大部分是一大堆的設(shè)置，然后第二大部分就是我們用來(lái)調(diào)試用的界面。第三部分就是這個(gè)編輯器，你可以在小程序里直接寫代碼。那第四個(gè)就是調(diào)試工具，就是一個(gè)網(wǎng)頁(yè)項(xiàng)目的調(diào)試工具，可以看到網(wǎng)絡(luò)請(qǐng)求，看到網(wǎng)頁(yè)源碼，看到控制臺(tái)信息。就小程序的開發(fā)體驗(yàn)和網(wǎng)頁(yè)開發(fā)基本是一致的，都具有在線熱中心調(diào)試、版本兼容、打包上線等等的功能。小程序開發(fā)的痛點(diǎn)就是一些權(quán)限或者功能需必須要企業(yè)號(hào)，但是它并不影響你學(xué)習(xí)。今天主要是以前端為主，給大家分享怎么用Taro快速搭建小程序開發(fā)項(xiàng)目的模板。那Taro這是一個(gè)非常主流的小程序跨端開發(fā)框架，我們用什么框架開發(fā)？首先就是去網(wǎng)上搜教程，但是如果你比較有經(jīng)驗(yàn)的話就不用搜教程了，直接去上手看它的官方文檔，這個(gè)效率是更高的，點(diǎn)擊快速開始就能看到它官方教你怎么樣去把這個(gè)項(xiàng)目初始化好，你看Taro，它能夠直接寫一套代碼轉(zhuǎn)換到任意的平臺(tái)，這就是為什么推薦用它嘛？那我們?cè)偻潞?，它支持reactwill等等等等的框架。那如果你學(xué)過(guò)這些前端框架，你要去使用Taro開發(fā)小程序就非常非常的方便。我們注意3的文檔啊。首先這個(gè)Taro項(xiàng)目它基于NODE，所以我們的系統(tǒng)里一定要有NODE的環(huán)境。首先我們要用NPM這樣一個(gè)軟件包管理器來(lái)安裝一個(gè)這個(gè)Taro的項(xiàng)目創(chuàng)建工具，我們按Windows鍵加打開這個(gè)終端，然后粘貼這行命令執(zhí)行，稍等它安裝吧。誒，安裝完成，我們按照官方文檔的操作執(zhí)行titleinit，隨便起一個(gè)項(xiàng)目名稱，但是一定要是英文的好初始化項(xiàng)目介紹隨便寫吧。選擇框架react是否要用TS？要用是否要用CSS易處理器？那什么是CSS易處理器呢？就是說(shuō)能夠幫你提供一些原生CSS之外的更高級(jí)的語(yǔ)法，提高你寫CSS的效率，然后選擇編譯工具，選最新的就好了，選擇包管理，這里為了照顧入門的同學(xué)，選擇NPM。然后再往下我們這里選擇模板源，就選國(guó)內(nèi)的比較快的，這個(gè)為我們提供了很多的模板，比如說(shuō)默認(rèn)模板，這個(gè)Redux狀態(tài)管理模板使用某種組件庫(kù)的模板，使用hooks的模板，那如果你使用微信云開發(fā)作為后端的話，選擇這個(gè)模板我還是給大家演示比較通用的，我們就用這個(gè)基于TaroUI的模板，它會(huì)自動(dòng)幫助我們整合一個(gè)組件庫(kù)來(lái)選擇它。雖然說(shuō)什么安裝依賴失敗了，但是大家不要怕它幫我們安裝依賴失敗了，那我們就自己安裝不就好了？打開自己的開發(fā)工具，我們打開myAPP，我們剛剛創(chuàng)建出來(lái)的項(xiàng)目，這里我們首先要安裝依賴，我們進(jìn)入到終端，輸入人PMinstall就能安裝依賴了。安裝完依賴之后，我們要先驗(yàn)證一下通過(guò)Taro腳手架創(chuàng)建出來(lái)的這個(gè)項(xiàng)目代碼能不能跑。我們進(jìn)入package點(diǎn)json這種文件，找到這樣兩行命令，第一個(gè)命令是buildVapp，它的作用就是你在發(fā)布小程序的時(shí)候它能幫你打包，但如果你現(xiàn)在是本地開發(fā)階段，對(duì)吧？你可能要不斷地改代碼，不斷地去調(diào)試，那我推薦大家用第二個(gè)命令叫DEvAPP，那這里有一個(gè)watch監(jiān)聽(tīng)的參數(shù)，它的作用就是你這邊改完代碼，然后在小程序開發(fā)工具里就能看到最新的效果了。那我們現(xiàn)在呢？因?yàn)閷儆谝粋€(gè)開發(fā)階段，對(duì)不對(duì)？那我們就運(yùn)行這個(gè)低危vAPP的命令來(lái)運(yùn)行。我們可以看到項(xiàng)目正常運(yùn)行，就打開微信開發(fā)者工具，首先以游客模式登錄，先最快地驗(yàn)證一下我們的項(xiàng)目能否正常運(yùn)行，點(diǎn)擊添加這里，我們就打開我們剛剛生成的這個(gè)項(xiàng)目的目錄根目錄，當(dāng)然如果我們要正式去搞一個(gè)上線的小程序，你首先要在微信公眾平臺(tái)去注冊(cè)小程序賬號(hào)，然后根據(jù)平臺(tái)給你分配的這個(gè)APPID把它填寫進(jìn)來(lái)。然后你才能夠去啟用像云開發(fā)這種功能，然后也才能夠正式地發(fā)布上線，然后確定項(xiàng)目已經(jīng)運(yùn)行起來(lái)了，這說(shuō)明胎肉腳手架為我們創(chuàng)建的項(xiàng)目是沒(méi)有問(wèn)題的。那接下來(lái)我們要做的就是試著去改一改代碼，大家看TaroUI就是這樣的一個(gè)組件庫(kù)，是一個(gè)啥東西？想要去給界面添加一些好看的元素，你不需要自己去寫每一行代碼，你可以直接去用別人給你開發(fā)好的這種組件，你可能用這樣一行代碼就能夠開發(fā)出這樣一個(gè)很美觀的樣式。推薦選擇一個(gè)和Taro官方框架兼容的組件庫(kù)，要不然可能會(huì)出現(xiàn)跨端之后樣式丟失的問(wèn)題。那比如說(shuō)TaroUI，那還有這個(gè)就是叫notUI，TaroUI是官方自家做的，所以是最推薦的，兼容性最好。怎么使用組件庫(kù)呢？其實(shí)非常簡(jiǎn)單，其實(shí)如果說(shuō)你不用TaroUI模板的話，你是需要自己去整合的，但是現(xiàn)在我們用了現(xiàn)成的模板，別人幫你整合好了，我們直接根據(jù)自己的需要去使用組件。那舉個(gè)例子，我們就加一個(gè)按鈕，那就先在文檔里面搜按controlf，對(duì)吧？搜按鈕搜到了，那我們點(diǎn)擊這個(gè)按鈕，然后再去看這個(gè)文檔，看一下右邊它有一個(gè)演示，對(duì)不對(duì)？我們從中找到自己最想要的按鈕的樣式，比如說(shuō)這個(gè)主操作按鈕，那我們就找就是和右邊的樣式最匹配的這段代碼，比如說(shuō)這個(gè)接下來(lái)就開始修改代碼，首先這個(gè)src就是我們主要編寫的代碼。這里有一個(gè)叫APP點(diǎn)configt，點(diǎn)TS里就每當(dāng)我們要?jiǎng)?chuàng)建一個(gè)新的頁(yè)面，都要在配置式里去添加一個(gè)新的頁(yè)面的路由這個(gè)Taro框架，它會(huì)根據(jù)你的這個(gè)頁(yè)面的路由就想象成我們的網(wǎng)址，然后去找到配置色目錄下對(duì)應(yīng)的這個(gè)文件，比如說(shuō)配置是index，index，它會(huì)去找配置indexindex，找到這里文件，再去加載到對(duì)應(yīng)的頁(yè)面，我們新增一個(gè)頁(yè)面，我們就叫Pages，叫坤坤index，我們回到小程序，發(fā)現(xiàn)他報(bào)錯(cuò)了。大家遇到報(bào)錯(cuò)一定不要慌，一定要完整閱讀這個(gè)報(bào)錯(cuò)信息。他說(shuō)了我找不到這個(gè)頁(yè)面對(duì)應(yīng)的文件，對(duì)不對(duì)？那這里我們就創(chuàng)建一個(gè)文件，我們復(fù)制這里應(yīng)代詞目錄創(chuàng)建，我們把名稱改成坤坤，就和這個(gè)我們寫的頁(yè)面地址完全一致，來(lái)，我們可以通過(guò)調(diào)整這個(gè)地址的位置來(lái)決定進(jìn)入小程序時(shí)首先打開哪個(gè)頁(yè)面，那比如說(shuō)我把這個(gè)坤index放最前面，誒，大家看是不是加載出來(lái)了？我們進(jìn)入到這個(gè)index點(diǎn)TSX，這是react的語(yǔ)法啊。然后我們進(jìn)入這個(gè)頁(yè)面，我們粘貼張張復(fù)制的組件代碼，這里我們把按鈕文案改成叫基建按鈕，我沒(méi)有點(diǎn)什么重新編譯重啟之類的，對(duì)不對(duì)？你會(huì)發(fā)現(xiàn)這按鈕是不是加上去了？那這個(gè)就是說(shuō)明我們引用的組件庫(kù)也生效了，那大家之后如果要開發(fā)頁(yè)面，就按照我剛剛給大家分享的這個(gè)流程。那最后如果我們的小程序已經(jīng)開發(fā)好了，我們要怎么做呢？這里首先我們要對(duì)它進(jìn)行一個(gè)打包，進(jìn)入這個(gè)patch質(zhì)檢Jason里，剛剛我們執(zhí)行的是開發(fā)調(diào)試命令，現(xiàn)在我們要執(zhí)行這個(gè)build命令，構(gòu)建完成之后我們就會(huì)發(fā)現(xiàn)目錄下多了一個(gè)dist，這個(gè)dist目錄就是我們最終要發(fā)布到微信小程序平臺(tái)的代碼，進(jìn)入到我們的微信小程序開發(fā)工具，在右上角有一個(gè)詳情，這邊有一個(gè)叫修改APPID，好，然后我們點(diǎn)上傳，每次發(fā)版都要有一個(gè)版本號(hào)的，比如0.0.1，然后給一個(gè)備注，然后點(diǎn)上傳好了代碼就會(huì)上傳上去了。上傳成功之后，你就可以登錄微信的小程序平臺(tái)去設(shè)置發(fā)布版本，然后正式上線等等等等。大家如果遇到報(bào)錯(cuò)，可以多去微信開發(fā)者社區(qū)交流，那這是開發(fā)微信小程序的一個(gè)基本流程了。其實(shí)大家可能在開發(fā)過(guò)程中還會(huì)遇到很多的問(wèn)題，那我這里就給大家拋磚引了玉，比如說(shuō)我們前端可能是不是還要向后端發(fā)送請(qǐng)求？那大家以前是怎么去寫這個(gè)發(fā)請(qǐng)求的代碼的？是不是要引入一個(gè)請(qǐng)求庫(kù)？比如說(shuō)extras？但是微信小程序開發(fā)它和瀏覽器開發(fā)不太一樣，它是不支持使用extras的，那這種情況下我們要怎么辦？TIER官方也提供了這個(gè)請(qǐng)求的工具，可以多去讀一讀這個(gè)TIER官方文檔，你需要什么就找什么。我舉個(gè)例子，是不是要發(fā)請(qǐng)求，對(duì)吧？搜一下請(qǐng)求就能找到Taro是怎么發(fā)網(wǎng)絡(luò)請(qǐng)求的？比如執(zhí)行這個(gè)Taro點(diǎn)request，但是我為什么我就不用這個(gè)Tarorequest？其實(shí)我之前也給大家分享過(guò)一個(gè)庫(kù)，你能夠根據(jù)后端文檔快速生成前端的請(qǐng)求代碼，我們傳統(tǒng)的開發(fā)方式是每一個(gè)請(qǐng)求寫一個(gè)發(fā)送請(qǐng)求的代碼，那這種開發(fā)方式效率太低了。對(duì)，正，推薦大家用這種更高效的開發(fā)方式，就是根據(jù)后端接口文檔自動(dòng)生成請(qǐng)求，這里有一個(gè)生成請(qǐng)求的庫(kù)推薦給大家，叫5米jsopenAPI，這個(gè)庫(kù)非常簡(jiǎn)單，你只需要首先安裝它，然后我們?cè)陧?xiàng)目征目錄下新建這樣一個(gè)配置文件，你只要運(yùn)行這樣一行命令，就能根據(jù)你后端的此外者接口文檔幫你生成前端的請(qǐng)求代碼，但是它生成的請(qǐng)求代碼是類似extras的語(yǔ)法想要讓它生成的請(qǐng)求代碼也能在Taro項(xiàng)目中正常運(yùn)行，那你就可以用這個(gè)適配器庫(kù)。那這里就是給大家拋磚引玉，可能還會(huì)遇到一些其他的問(wèn)題，比如我們網(wǎng)頁(yè)開發(fā)是不是需要存儲(chǔ)用戶的登錄信息？那同樣的小程序也有一個(gè)存儲(chǔ)用戶信息的方式，那比如說(shuō)存儲(chǔ)用戶登錄信息全局狀態(tài)管理。那這些需求如果你之前沒(méi)做過(guò)，你又想學(xué)怎么辦呢？有經(jīng)驗(yàn)的程序員都會(huì)這么干，就去搜一下官方文檔，打開Taro的官方文檔，直接搜一下存儲(chǔ)，這里有很多什么數(shù)據(jù)的緩存，對(duì)吧？點(diǎn)進(jìn)來(lái)Taro，點(diǎn)setstorage，人家就告訴你了，你怎么去使用Taro來(lái)存儲(chǔ)前端的數(shù)據(jù)？那比如說(shuō)我們小程序開發(fā)是不是涉及到一個(gè)經(jīng)典的需求叫頁(yè)面跳轉(zhuǎn)？比如說(shuō)我們搜跳轉(zhuǎn)，誒，這里有一個(gè)路由功能跳轉(zhuǎn)，你會(huì)發(fā)現(xiàn)其實(shí)就一行代碼，我們就從這個(gè)坤坤頁(yè)面跳到主頁(yè)，好吧？來(lái)，我們找到這個(gè)坤坤頁(yè)面的代碼，這里我們給這個(gè)按鈕添加一個(gè)點(diǎn)擊事件onclick，這里是需要一點(diǎn)前端支持的，我們把剛剛粘的跳轉(zhuǎn)代碼粘過(guò)來(lái)，按Alt加回車，引入Taro這個(gè)框架，我們?cè)俑囊幌乱D(zhuǎn)到