APP · LikeMall多商戶商城系統v2.x開發文檔

## 簡介這是一個使用React Native開發，支持Android和iOS雙平臺的app，使用ts的語法，嚴格的類型檢查和完整的提示使開發更快更便捷。集成微信sdk，方便調用微信登錄，支付及分享，使用codepush進行熱更新，只要是js代碼及靜態文件（圖片）的更新都無需下載新版本即可更新。 ## 安裝運行(運行前請確保安裝了相關環境: https://reactnative.cn/docs/getting-started) 在根目錄下運行 npm install 或者 yarn 安裝依賴運行前請刪除node_modules/react-native-scrollable-tab-view/node_modules 不然會導致鏈接js服務器失敗 ## ios運行在根目錄下運行npx pod-install 或cd ios => pod install 安裝iOS依賴打開ios目錄下.xcworkspace文件在Xcode中選擇模擬器并運行命令行運行: 根目錄下運行yarn ios ## 安卓運行使用Android Studio打開android目錄打開后會自動同步安卓依賴，同步完依賴后選擇模擬器并運行安卓運行前要執行yarn start 打開js服務器命令行運行: 根目錄下運行 yarn android ## 安卓打包apk cd android ./gradlew assembleRelease 詳細教程請前往 (https://reactnative.cn/docs/signed-apk-android) ## RN打包，上傳codepush更新 codepush接入流程: https://www.jianshu.com/p/6a5e00d22723 如果項目根目錄沒有 bundle/ios, bundle/android 請先創建 ## Android 打包靜態文件命令 yarn bundle-android 上傳codepush更新命令生產環境 code-push release-react likemall_android android --t 1.0.0 --dev false --d Production --des "細節優化" --m true (強制更新) 開發環境 code-push release-react likemall_android android --t 1.0.0 --dev false --d Staging --des "細節優化" --m true (強制更新) ## iOS 打包靜態文件命令 yarn bundle-ios 上傳codepush更新命令生產環境 code-push release-react likemall_ios ios --t 1.0.1 --dev false --d Production --des "修復bug" --m true (強制更新) 開發環境 code-push release-react likemall_ios ios --t 1.0.0 --dev false --d Staging --des "修復bug" --m true (強制更新) ##添加圖片 1.編輯好圖片丟到resources里面 2.到項目根目錄下，運行./build_image.sh ## 目錄結構初始的目錄結構如下： ├─likemall 根目錄 │ ├─android Android項目目錄, 包含了使用AndroidStudio開發項目的環境配置文件 │ ├─ios iOS項目目錄，包含了XCode的環境 │ ├─resource 圖片資源目錄 │ ├─src 開發目錄 │ │ ├─api 接口文件目錄 │ │ ├─components 組件目錄 │ │ │ ├─bussiness 業務邏輯組件目錄 │ │ │ │ ├─ActiveArea.tsx 首頁活動區域組件 │ │ │ │ ├─AddressItem.tsx 地址區域組件 │ │ │ │ ├─AdSwiper.tsx 廣告位組件 │ │ │ │ ├─CheckBox.tsx 復選框組件 │ │ │ │ ├─CouponItem.tsx 優惠券列表項組件 │ │ │ │ ├─CouponPopItem.tsx 下單選擇優惠券列表項組件 │ │ │ │ ├─EmptyView.tsx 空頁面組件 │ │ │ │ ├─GoodsItem.tsx 商品列表項組件 │ │ │ │ ├─GoodsSpec.tsx 商品規格彈窗組件 │ │ │ │ ├─HomeCoupon.tsx 首頁優惠券組件 │ │ │ │ ├─OrderGoods.tsx 訂單商品列表組件 │ │ │ │ ├─PriceFormate.tsx 價格分割組件 │ │ │ │ ├─Progress.tsx 滾動條組件 │ │ │ │ ├─Recommend.tsx 推薦商品組件 │ │ │ │ └─UploadProfile.tsx 圖片上傳組件 │ │ │ │ │ │ │ ├─main 通用型組件目錄 │ │ │ │ ├─AddressPicker.tsx 地址選擇器組件 │ │ │ │ ├─CheckUpDate.tsx 熱更新檢查組件 │ │ │ │ ├─CountDown.tsx 倒計時組件 │ │ │ │ ├─CustomImage.tsx 圖片加載，圖片自適應寬/高組件 │ │ │ │ ├─CustomTabBar.tsx 自定義TabBar，與react-native-scrollable-tab-view搭配使用 │ │ │ │ ├─Dialog.tsx 對話框組件 │ │ │ │ ├─ImagePreview.tsx 圖片預覽組件 │ │ │ │ ├─LFlatList.tsx 列表組件 │ │ │ │ ├─LoadingView.tsx loading組件 │ │ │ │ ├─Popup.tsx 彈窗組件 │ │ │ │ ├─PressButton..tsx 按鈕組件 │ │ │ │ ├─Search.tsx 搜索框組件 │ │ │ │ ├─Steppertsx 步進器組件 │ │ │ │ ├─StickyHeader.tsx 懸浮組件 │ │ │ │ ├─TabBarItem.tsx 主頁面底部4個tab項組件 │ │ │ │ └─Triangle.tsx 小三角組件 │ │ │ │ │ │ │ ├─routers 路由組件目錄 │ │ │ └─... │ │ │ │ │ ├─constraint 常量目錄 │ │ │ ├─Image.ts 圖片常量文件 │ │ │ ├─Style.ts 樣式常量文件 │ │ │ ├─Theme.ts 主題常量文件 │ │ │ └─... │ │ │ │ │ ├─pages 頁面文件目錄 │ │ ├─store redux集成目錄 │ │ ├─typing ts類型聲明目錄 │ │ │ ├─coustom.d.ts 自定義聲明文件，主要用于聲明js依賴模塊 │ │ │ ├─index.ts navigation聲明文件 │ │ │ └─routeConfig.ts 路由配置文件 │ │ │ │ │ ├─utils 工具類目錄 │ │ │ ├─app.ts 設備信息相關文件 │ │ │ ├─area.ts 地址json文件 │ │ │ ├─auth.ts token相關文件 │ │ │ ├─cameraRoll.ts 相冊調用文件 │ │ │ ├─imageUpload.ts 圖片上傳 │ │ │ ├─navigation.ts 路由跳轉 │ │ │ ├─parseTime.ts 時間格式化 │ │ │ ├─request.ts 接口請求攔截 │ │ │ ├─type.ts 枚舉類型 │ │ │ ├─request.ts 接口請求攔截 │ │ │ ├─util.ts 常用工具方法 │ │ │ └─wechat.ts 微信sdk相關 │ │ │ │ │ └─App.tsx 項目入口文件 │ │ │ ├─.buckconfig Buck的配置文件，buck是Facebook開源的高效構建系統 │ ├─.eslintrc.js Eslint配置文件 │ ├─.gitattributes git配置文件，指定非文本文件的對比合并方式 │ ├─.gitignore git配置文件，用于忽略你不想提交到Git上的文件 │ ├─.watchmanconfig watchman的配置文件，watchman用于監控文件變化，輔助實現工程修改信息 │ ├─app.json app的json文件 │ ├─babel.config.js Babel配置文件，在.babelrc配置文件中，主要是對預設（presets）和插件（plugins）進行配置，因此不同的轉譯器作用不同的配置項 │ ├─build_image.sh 生成Image.ts的腳本文件，在根目錄下運行./build_image.sh(mac)或build_image.sh(window)即可生成Image.ts │ ├─index.js ios或android的入口文件 │ ├─metro.config.js metro配置文件 │ ├─package.json 項目基本信息以及依賴信息 │ ├─README.md README 文件 │ └─tsconfig.json ts配置文件 ## 頁面說明 | 頁面|名稱|路徑|帶路徑例子|參數解釋| | --- | --- | --- | --- | --- | | 首頁 | Home | Home | | | |分類 | Classify | Classify | | | |購物車| ShopCart |ShopCart| | | |個人中心| Mine | Mine | | | | app啟動廣告頁 |AdPages|AdPages| | | | 收貨地址 |UserAddress| UserAddress |{type:?1}|從下單頁進入地址頁需要傳參| |地址編輯/添加|AddressEdit|AddressEdit|{type:?0,?id:?1}|type為0則為編輯地址，type為1則為添加地址，type為1時id不傳| |登錄|Login|Login| | | |注冊賬號|RegAccount|RegAccount| | | |忘記密碼|ForgetPwd|ForgetPwd| | | |我的收藏|UserCollection|UserCollection| | | |幫助中心/商城咨詢|NewsList|NewsList|{type:?0}|type為0則為幫助中心，type為1則為商城資訊| |用戶評價列表|UserEvaluation|UserEvaluation|{active:?1}|可傳也可不傳，0為選中第一個tab，1為選中第二個tab| |商品評價|GoodsReview|GoodsReview|{id:?3}|對應的訂單商品id| |店鋪主頁|StoreDetail|StoreDetail|{id:?1}|店鋪id| |店鋪信息|StoreInfo|StoreInfo|{id:?1}|店鋪id| |全部評價|GoodsAllEvaluation|GoodsAllEvaluation|{id:?9}|商品id| |退款/售后|PostSale|PostSale| | | |店鋪街|ShopStreet|ShopStreet| | | |限時秒殺|SeckillActivity|SeckillActivity| | | |領券中心|CouponCenter|CouponCenter| | | |店鋪排行|ShopRank|ShopRank| | | |熱銷榜單|HotList|HotList| | | |商品搜索|GoodsSearch|GoodsSearch|{id:?6,?name:?‘華為手機’}|當點擊分類進入商品搜索時，需要傳分類id和分類名字| |商品詳情|GoodsDetail|GoodsDetail|{id:?8}|商品id| |我的訂單|UserOrder|UserOrder|{type:?0}|訂單類型，可傳可不傳| |訂單詳情|OrderDetails|OrderDetails|{id:?1}|訂單id| |簽到|UserSign|UserSign| | | |我的優惠券|UserCoupon|UserCoupon| | | |售后申請|ApplyRefund|ApplyRefund|{orderId:22,itemId:33,afterSalesId:?22}|訂單id，商品規格id，售后id| |售后詳情|AfterSalesDetail|AfterSalesDetail|{orderId:22,temId:33,afterSalesId:?22}|訂單id，商品規格id，售后id| |提交快遞單號|AfterSalesDetailForm|AfterSalesDetailForm|{id:22}|售后id| |文章詳情|NewsDetail|NewsDetail|{id:11,?type:?0?}|文章id,?type為0則為幫助中心，type為1則為商城資訊| |物流信息|Logistics|Logistics|{id:1}|訂單id| |積分明細|SignDetail|SignDetail| | | |簽到規則|SignRule|SignRule| | | |webview|MyWebView|MyWebView|{url:https://baidu.com,?name:?‘百度’}|網頁鏈接與title，title可不傳| |支付結果|PayResult| PayResult |{id:?訂單id}| | |個人設置|UserProfile|UserProfile| | | |修改手機號|ChangePhone|ChangePhone|{mobile:‘1354536847’}|手機號| | 設置密碼| SetPassWord|SetPassWord |{mobile:‘1354536847’}|手機號 | | 服務協議|ServerExplain|ServerExplain|{type:0}| 0為服務協議，1為隱私政策，?2為售后保障| |下單 |ConfirmOrder |ConfirmOrder | {type:?‘cart’,?goods:?\[{ Item\_id:?10,?num:?1}\]| type不傳默認為立即購買，?傳’cart’為購物車購買，goods是一個包含規格id和商品數量的數組|