【Copy攻城獅日志】借助Taro暴改Nideshop實(shí)現(xiàn)電商支付寶小程序雛形

gnehc 發(fā)布于2019-08-23 14:54 / 2863人閱讀

摘要：接下來，在支付寶小程序開發(fā)者工具中打，不出意外能跑起來一個(gè)電商支付寶小程序雛形。地址以上是我這個(gè)攻城獅對(duì)使用轉(zhuǎn)換原生微信小程序?yàn)橹Ц秾毿〕绦虻囊淮挝⒉蛔愕赖膶?shí)踐。

↑開局一張圖，故事全靠編↑

從一個(gè)需求說起

作為底層的程序猿，哦不，我連猿都算不上，混的好的叫碼神，混得一般的叫碼農(nóng)，混得有點(diǎn)差的叫碼畜，混得極差的，就像我這樣的，叫碼渣。去年，2018年年底，12月份，運(yùn)營的大佬提出了想做電商類支付寶小程序的想法，需求很簡單：做一個(gè)自己的商城，上架到支付寶小程序應(yīng)用市場(chǎng)。一句話，簡單明了，需求很明確啊，可這句話對(duì)我來說，要實(shí)現(xiàn)的難度，比起李白上蜀道還難，比難于上青天還難。細(xì)細(xì)一想，做商城，得有后臺(tái)管理系統(tǒng)吧？得有支付系統(tǒng)吧？得有訂單管理等一系列業(yè)務(wù)支撐的后臺(tái)吧？我一小小的前端，本身業(yè)務(wù)基礎(chǔ)又差，每天上班8小時(shí)劃水10小時(shí)，竟然讓我獨(dú)自完成一個(gè)電商支付寶小程序，哈哈哈哈哈。不過，本來沒做實(shí)質(zhì)性項(xiàng)目的我，怎么會(huì)畏懼，怎么能退縮，生死看淡，不服就干！誰給我的自信？開源社區(qū)啊！作為“資深”的Copy碼渣，接到任務(wù)我就在github開始尋符合需求的demo，皇天不負(fù)有心人，我把github翻了個(gè)遍，收獲寥寥無幾，各位大佬有啥支付寶小程序開源的項(xiàng)目請(qǐng)一定推薦給我，Copy選不中對(duì)象，就無法愉快地進(jìn)行Paste。為了快速交付，經(jīng)過對(duì)比選用@tumobi大佬的Nideshop“全家桶”，于是就有了這次借助Taro的taro convert轉(zhuǎn)化微信小程序?yàn)橹Ц秾毿〕绦虻慕?jīng)歷。在我看來，我寫不出如此出色的開源項(xiàng)目，倘若我能借助這些項(xiàng)目快速完成自己的工作，享受開源帶來的樂趣，對(duì)于現(xiàn)階段的我而言，足矣！(絕逼不敢相信，從業(yè)多年的程序員依舊是這么low！)

（圖片來源于網(wǎng)絡(luò)）

環(huán)境準(zhǔn)備

工欲善其事必先利其器。9102年了，還有誰在用notepad寫代碼？當(dāng)然，對(duì)于我們前端而言，誰的電腦沒裝個(gè)nodegitvscode之類的軟體？如果您還沒裝的話，趕緊裝吧，裝完您就會(huì)嘿嘿嘿，對(duì)于我而言沒有ndoe我無法工作，沒有前端開發(fā)環(huán)境，我就不快樂。

(圖片來源于網(wǎng)絡(luò))

在您的平臺(tái)上下載 Node.js 源碼或預(yù)編譯安裝包，然后即可馬上進(jìn)行開發(fā)。去下載

git--distributed-is-the-new-centralized。去下載

小程序開發(fā)者工具定位于「一站式小程序研發(fā)工具」，專門為小程序開發(fā)打造，提供了項(xiàng)目管理、編碼、調(diào)試、真機(jī)測(cè)試等功能。去下載

其他的好像也沒啥了，當(dāng)年好像我的還裝了Python|jJava|Android等環(huán)境，那是2016年的事了追憶,現(xiàn)在看來很傻很天真，其實(shí)沒必要。

Copy進(jìn)行時(shí)

Taro 可以將你的原生微信小程序應(yīng)用轉(zhuǎn)換為 Taro 代碼，進(jìn)而你可以通過 taro build 的命令將 Taro 代碼轉(zhuǎn)換為對(duì)應(yīng)平臺(tái)的代碼，或者對(duì)轉(zhuǎn)換后的 Taro 代碼進(jìn)行用 React 的方式進(jìn)行二次開發(fā)。之前一直在期待taro的這個(gè)功能，雖然不會(huì)React，也要嘗試一下，也希望通過這些實(shí)踐更加了解React并好好學(xué)習(xí)，從我接觸的內(nèi)容來說，React是前端開發(fā)必備的技術(shù)棧。

Taro安裝

    /** Quick Start With NPM Or Yarn **/
        $ npm install -g @tarojs/cli
        $ yarn global add @tarojs/cli

nideshop-mini-program下載

    git clone https://github.com/tumobi/nideshop-mini-program.git
    cd nideshop-mini-program

轉(zhuǎn)化為taro

taro convert

通過以上步驟可以得到一個(gè)taroConvert的文件夾，就算暫時(shí)成功的了。

安裝依賴

cd taroConvert
npm i

對(duì)于大多數(shù)前端項(xiàng)目來說，現(xiàn)階段不可避免的問題是可能一個(gè)不算復(fù)雜的項(xiàng)目會(huì)依賴上百個(gè)npm包，也正是因?yàn)檫@些包，大大解放了生產(chǎn)力，一定程度上提高了開發(fā)效率。當(dāng)然，如同硬幣有兩面，伴隨著便捷高效的同時(shí)也帶來了一定的安全風(fēng)險(xiǎn)。可能大廠都是自己造輪子吧！

打包成支付寶小程序

npm run build:alipay

理想狀態(tài)是可直接打包成dist的，but……
接下來就捋一捋存在的問題，為什么要手動(dòng)修改一些問題？

為什么要暴力修改

首先回到taro的官方文檔看下 taro convet會(huì)遇到哪些坑

在小程序 IDE 顯示 _createData 錯(cuò)誤?了解
這里我們好像暫時(shí)沒遇到這個(gè)問題，也不知道是哪個(gè)小程序IDE會(huì)有如此問題，先忽略了。

轉(zhuǎn)換 wxParse 報(bào)錯(cuò)不存在文件?了解
這個(gè)問題我們要及時(shí)改正，在執(zhí)行taro conver前先把wxParse.wxml中46行到128行的wxParse1修改為wxParse0

不支持 relations 和 Behavior了解
這個(gè)問題我們代碼里好像沒有這些組件，暫時(shí)忽略

轉(zhuǎn)換 wepy 文件不成功了解
這個(gè)問題我們肯定不存在，因?yàn)檫@個(gè)項(xiàng)目沒有使用wepy,繼續(xù)忽略。

現(xiàn)在看來，以上問題貌似都不存在，那么我們先回到這個(gè)報(bào)錯(cuò)

憑我多年的copy經(jīng)驗(yàn)，一定是文件不存在或者文件引用路徑有問題。不慌，對(duì)比了原文件taro convert之后的taroConvert目錄里邊的wxParse,的確發(fā)現(xiàn)了小問題：wxParse目錄下的文件缺失,除了wxParse.js過來了，其他的都沒有被轉(zhuǎn)換。那就暴力一回，使出我的Copy大法，手動(dòng)轉(zhuǎn)換過去，并修改幾處引用的相對(duì)路徑，繼續(xù)build。
接下來，在支付寶小程序開發(fā)者工具中打，不出意外能跑起來一個(gè)電商支付寶小程序雛形。
github地址??nideshop-alipay by taro convert

以上是我這個(gè)Copy攻城獅對(duì)使用taro convert轉(zhuǎn)換原生微信小程序?yàn)橹Ц秾毿〕绦虻囊淮挝⒉蛔愕赖膶?shí)踐。