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

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