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

taro.png
↑開局一張圖,故事全靠編↑

從一個需求說起

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

環境準備

工慾善其事必先利其器。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的文件夾,就算暫時成功的了。
clipboard.png

安裝依賴

cd taroConvert
npm i

對於大多數前端項目來說,現階段不可避免的問題是可能一個不算複雜的項目會依賴上百個npm包,也正是因爲這些包,大大解放了生產力,一定程度上提高了開發效率。當然,如同硬幣有兩面,伴隨着便捷高效的同時也帶來了一定的安全風險。可能大廠都是自己造輪子吧!
clipboard.png

打包成支付寶小程序

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,繼續忽略。

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章