【Copy攻城獅日誌】藉助Taro暴改Nideshop實現電商支付寶小程序雛形

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

從一個需求提及

做爲底層的程序猿，哦不，我連猿都算不上，混的好的叫碼神，混得通常的叫碼農，混得有點差的叫碼畜，混得極差的，就像我這樣的，叫碼渣。去年，2018年年末，12月份，運營的大佬提出了想作電商類支付寶小程序的想法，需求很簡單：作一個本身的商城，上架到支付寶小程序應用市場。一句話，簡單明瞭，需求很明確啊，可這句話對我來講，要實現的難度，比起李白上蜀道還難，比難於上青天還難。細細一想，作商城，得有後臺管理系統吧？得有支付系統吧？得有訂單管理等一系列業務支撐的後臺吧？我一小小的前端，自己業務基礎又差，天天上班8小時划水10小時，居然讓我獨自完成一個電商支付寶小程序，哈哈哈哈哈。不過，原本沒作實質性項目的我，怎麼會畏懼，怎麼能退縮，生死看淡，不服就幹！誰給個人自信？開源社區啊！做爲「資深」的Copy碼渣，接到任務我就在github開始尋符合需求的demo，皇天不負有心人，我把github翻了個遍，收穫寥寥無幾，各位大佬有啥支付寶小程序開源的項目請必定推薦給我，Copy選不中對象，就沒法愉快地進行Paste。爲了快速交付，通過對比選用@tumobi大佬的Nideshop「全家桶」，因而就有了此次藉助Taro的taro convert轉化微信小程序爲支付寶小程序的經歷。在我看來，我寫不出如此出色的開源項目，假若我能借助這些項目快速完成本身的工做，享受開源帶來的樂趣，對於現階段的我而言，足矣！(絕逼不敢相信，從業多年的程序員依舊是這麼low！)

（圖片來源於網絡）

環境準備

工欲善其事必先利其器。9102年了，還有誰在用notepad寫代碼？固然，對於咱們前端而言，誰的電腦沒裝個nodegitvscode之類的軟體？若是您還沒裝的話，趕忙裝吧，裝完您就會嘿嘿嘿，對於我而言沒有ndoe我沒法工做，沒有前端開發環境，我就不快樂。

(圖片來源於網絡)

• 在您的平臺上下載 Node.js 源碼或預編譯安裝包，而後便可立刻進行開發。去下載
• git--distributed-is-the-new-centralized。去下載
• 小程序開發者工具定位於「一站式小程序研發工具」，專門爲小程序開發打造，提供了項目管理、編碼、調試、真機測試等功能。去下載
• 其餘的好像也沒啥了，當年好像個人還裝了Python|jJava|Android等環境，那是2016年的事了追憶,如今看來很傻很天真，其實不必。

Copy進行時

Taro 能夠將你的原生微信小程序應用轉換爲 Taro 代碼，進而你能夠經過 taro build 的命令將 Taro 代碼轉換爲對應平臺的代碼，或者對轉換後的 Taro 代碼進行用 React 的方式進行二次開發。以前一直在期待taro的這個功能，雖然不會React，也要嘗試一下，也但願經過這些實踐更加了解React並好好學習，從我接觸的內容來講，React是前端開發必備的技術棧。

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

轉化爲taro

taro convert

經過以上步驟能夠獲得一個taroConvert的文件夾，就算暫時成功的了。

安裝依賴

cd taroConvert
npm i

對於大多數前端項目來講，現階段不可避免的問題是可能一個不算複雜的項目會依賴上百個npm包，也正是由於這些包，大大解放了生產力，必定程度上提升了開發效率。固然，如同硬幣有兩面，伴隨着便捷高效的同時也帶來了必定的安全風險。可能大廠都是本身造輪子吧！

打包成支付寶小程序

npm run build:alipay

理想狀態是可直接打包成dist的，but……
接下來就捋一捋存在的問題，爲何要手動修改一些問題？

爲何要暴力修改

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

• 在小程序 IDE 顯示 _createData 錯誤☞瞭解
  這裏咱們好像暫時沒遇到這個問題，也不知道是哪一個小程序IDE會有如此問題，先忽略了。
• 轉換 wxParse 報錯不存在文件☞瞭解
  這個問題咱們要及時改正，在執行taro conver前先把wxParse.wxml中46行到128行的wxParse1修改成wxParse0
• 不支持 relations 和 Behavior瞭解
  這個問題咱們代碼裏好像沒有這些組件，暫時忽略
• 轉換 wepy 文件不成功瞭解
  這個問題咱們確定不存在，由於這個項目沒有使用wepy,繼續忽略。

如今看來，以上問題貌似都不存在，那麼咱們先回到這個報錯

憑我多年的copy經驗，必定是文件不存在或者文件引用路徑有問題。不慌，對比了原文件taro convert以後的taroConvert目錄裏邊的wxParse,的確發現了小問題：wxParse目錄下的文件缺失,除了wxParse.js過來了，其餘的都沒有被轉換。那就暴力一回，使出個人Copy大法，手動轉換過去，並修改幾處引用的相對路徑，繼續build。
接下來，在支付寶小程序開發者工具中打，不出意外能跑起來一個電商支付寶小程序雛形。
github地址☞☞nideshop-alipay by taro convert

以上是我這個Copy攻城獅對使用taro convert轉換原生微信小程序爲支付寶小程序的一次微不足道的實踐。