【完結(jié)】uniapp開發(fā)實戰(zhàn)項目（真實環(huán)境支付、登錄、購物車、nodejs搭建后臺、封裝、搜索、發(fā)送驗證碼、ios、安卓、小程序、）

https://www.bilibili.com/video/BV1ss4y1i7La/?spm_id_from=333.337.search-card.all.click&vd_source=d10c649e248b08f4441d8cd6b76f46fc

P1 01課程介紹
P2 02 開發(fā)環(huán)境搭建
P3 03【mac操作系統(tǒng)】真機調(diào)試
P4 04【mac操作系統(tǒng)】微信小程序調(diào)試
P5 05【windows操作系統(tǒng)】連接安卓手機
P6 06【windows操作系統(tǒng)】連接ios手機
P7 07【windows操作系統(tǒng)】微信小程序調(diào)試
P8 08 項目開發(fā)前分析
P9 09【首頁】模塊分析
P10 10【搜索】模塊劃分

P11 11【商品詳情和購物車】模塊劃分
P12 12 其他頁面分析
P13 13 目錄結(jié)構(gòu)
P14 14【重要】開發(fā)前閑聊和贈送其他課程

P15 15 創(chuàng)建項目和引入文件

@import 'common/uni.css';/相當reset.css//

P16 16【底部】導航開發(fā)
P17 17【首頁】頂部開發(fā)

"titleNView": {//不支持wx

"text": "ue69d" iconfont.ttf unicode編碼 前三個去掉

小程序不支持 需要navigationStyle 自定義

P18 18【首頁】swiper部分

swiper的坑
1、組件名稱swiper.vue 或者 Swiper.vue，在傳遞數(shù)據(jù)的時候有可能圖片就不見了。
2、改變圖片的大小咱們要用rpx的單位。
3、本身swiper是有150px的默認高度，app中需要改變默認高度需要加入：

P19 19【首頁】推薦部分開發(fā)

P20 20【首頁】文字封裝開發(fā)

頁面小寫 組件一般都大寫

P21 21【首頁】商品列表和單個商品組件封裝

....不代碼

P22 22【首頁】運動戶外頭部開發(fā)
P23 23【首頁】熱銷爆品開發(fā)修改商品值
P24 24【首頁】推薦店鋪模塊開發(fā)和滑塊處理

P25 25【首頁】隱藏滾動條和底部

"app-plus": { "scrollIndicator": "none", pages.json設(shè)置 滾動條消失

uniapp官網(wǎng)搜索問題

::-webkit-scrollbar{ display:none; width:0 !important; height:0 !important; -webkit-apearance:none; background:transparent; } ios7有問題 ios11沒事

P26 26【首頁】頂欄滑塊功能開發(fā)

body滑動用swiper 事件和current組合

P27 27【首頁】頂欄滑塊跟隨

scroll-into-view scroll-view

P28 28【首頁】改變內(nèi)容塊高度

uniapp官網(wǎng) api-界面--節(jié)點信息 獲取dom標簽信息 獲取高度 let view=uni.createSelectorQuery().select('.home-data'); class view.boundingClientRect(data=>{ console.log(data.height) }).exec();

計算可視區(qū)有bug android行 ios不準

套一個父div view

onReady里面弄

P29 29 搭建nodejs后端環(huán)境

npm install express-generator -g

進入項目 express --view=ejs server

P30 30 請求接口渲染首頁數(shù)據(jù)

template 合并一塊

上面 uniapp問題

P31 31修正可視區(qū)域高度問題

官網(wǎng) api-設(shè)備-系統(tǒng)信息

uni.getSystemInfo() windowHeight可視區(qū)

uni.upx2px(80)

劉海屏 狀態(tài)欄那些 android/IOS

uni.getSystemInfoSync() 狀態(tài)欄高度statusBarHeight

P32 32滑動不同板塊展示不同數(shù)據(jù)
P33 33修正重復請求數(shù)據(jù)
P34 34 上拉加載更多數(shù)據(jù)
P35 35 request封裝

P36 36 進入搜索頁面

Nav button onNavigationBarButtonTap

pages.json-app-plug-titleView-searhinput

P37 37搜索頁面內(nèi)容布局
P38 38 進入搜索結(jié)果頁

P39 39搜索結(jié)果頁布局和封裝
P40 40 搜索結(jié)果頁排序功能
P41 41 搜索關(guān)鍵詞判斷和隱藏鍵盤
P42 42搜索詞記錄
P43 43 清除搜索記錄

@tap

P44 44 搜索詞傳值

ask.dcloud.net.cn/article/35374

P45 45 搭建數(shù)據(jù)庫表和數(shù)據(jù)結(jié)構(gòu)

aolai表

P46 46 請求搜索接口顯示不同搜索結(jié)果
P47 47 完成商品排序功能
P48 48【商品分類】頂欄完成

P49 49 構(gòu)建商品分類頁數(shù)據(jù)
P50 50商品分類內(nèi)容布局
P51 51獲取高度和點擊添加樣式
P52 52商品分類對應數(shù)據(jù)渲染

P53 53【商品詳情頁】滾動透明漸變導航欄

pages.json app-plus titleNview type:transparent

P54 54【商品詳情頁】內(nèi)容塊布局
P55 55【商品詳情頁】固定底部布局

P56 56 底部滑塊動畫效果

uni.createAnimation() 點擊穿透 @touchmove.stop.prevent=""

P57 57 完善底部滑塊

uni官方組件

uni-number-box

P58 58 修改返回鍵行為

onBackPress(){ if(this.isShow){ this.hidePop() return true } }

P59 59 商品詳情對應數(shù)據(jù)

express 接口跨域

P60 60 商品分享功能
P61 61【購物車】自定義導航欄

uni-nav-bar

P62 62【購物車】內(nèi)容塊布局
P63 63 使用Vuex管理狀態(tài)
P64 64購物車無商品默認樣式
P65 65 全選和全不選功能
P66 66 單選功能
P67 67 合計和結(jié)算數(shù)量
P68 68 編輯和完成的數(shù)量功能

P69 69 商品刪除功能
P70 70 加入購物車
P71 71【我的】頁面布局
P72 72 地址管理頁面布局

P73 73 收貨地址三級聯(lián)動

mpvue-picker uniapp插件

mpvue-citypicker

P74 74 新增收貨地址
P75 75 修改地址
P76 76 默認地址選擇
P77 77【我的訂單】頂部選項卡
P78 78 訂單有數(shù)據(jù)樣式布局

P79 79 訂單無數(shù)據(jù)樣式布局
P80 80 構(gòu)建訂單數(shù)據(jù)

--

P81 81 確認訂單布局
P82 82 顯示默認地址

P83 83 修改收貨默認地址

頁面?zhèn)髦?/p>

uni.$emit uni.$on

P84 84【確認支付】頁面布局

label標簽 整塊 點擊起作用

P85 85 支付成功頁面布局
P86 86 登錄注冊頁面布局（一）
P87 87登錄注冊頁面布局（二）

swiper+scroll-view組合

P88 88 登錄表單驗證

test()驗證

P89 89 輸入手機號頁面
P90 90 驗證碼倒計時

P91 91設(shè)計登錄注冊接口文檔和sql語句
P92 92 登錄前端和后端功能
P93 93 存儲用戶信息
P94 94 用戶信息持久化存儲
P95 95 退出登錄
P96 96 自定義tabbar
P97 97 tabbar事件攔截判斷是否登錄
P98 98 手機號注冊后端與前端

P99 99【發(fā)送驗證碼】接入短信SDK

cnpm install qcloudsms_js

騰訊云短信

P100 100 注冊成功信息存儲

P101 101 Nodejs生成token

cnpm install jsonwebtoken

P102 102 修復一些問題
P103 103 前端token的使用
P104 104 手機號注冊后自動登錄

P105 105【第三方快捷方式登錄】-前端做的事

openid用戶唯一身份 uni.login=>uni.getUserInfo

P106 106【第三方快捷方式登錄】-后端做的事2
P107 107當前用戶查詢收貨地址的前端和后端3

:cnpm install jwt-decode

P108 108當前用戶新增收貨地址的前端和后端2
P109 109當前用戶修改收貨地址的前端和后端
P110 110獲取當前用戶購物車數(shù)據(jù)的前端和后端

P111 111修改當前用戶購物車商品數(shù)量前端和后端
P112 112 加入購物車
P113 113 用戶確認訂單頁面
P114 114 確定訂單的默認地址
P115 115刪除購物車數(shù)據(jù)庫數(shù)據(jù)
P116 116 確認訂單頁面問題修正

加分組單選擇

P117 117【理論】訂單到支付

購物車頁面點擊【結(jié)算】
發(fā)送請求：
傳遞商品數(shù)據(jù)，
前端就拿到了訂單號進行存儲
并且跳轉(zhuǎn)到確認訂單頁面
后端：
生成一個訂單，并且返回給前端一個訂單號
確認訂單頁面 點擊【提交訂單】
前端：
判斷是否選擇了收貨地址
發(fā)送請求：
把訂單號傳遞給后端
后端：
把訂單的狀態(tài)從1，改成2
并且把下單的商品在購物車頁的數(shù)據(jù)清空
支付==》接口sdk

P118 118 生成訂單
P119 119 提交訂單

P120 120 對接沙箱

支付寶沙箱對接流程

P121 122 支付金額和名稱
P122 123 真實環(huán)境支付

一 前端發(fā)數(shù)據(jù) 后端sdk處理

二 uni.requestPayment(OBJECT)

P123 124項目怎么寫簡歷中？面試中如何介紹?

uni-app 項目（百年奧萊）
項目描述
1.登錄：手機短信登錄、token、用戶信息存儲和判斷。
2.搜索：對于商品（綜合、價格、銷量）排序和搜索，做持久化搜索處理。
3.購買流程：購物車增刪改查，訂單管理，支付（微信和支付寶），判斷支付成功或失敗。
4.我的：用戶個人中心，地址管理，訂單管理等并且做導航守衛(wèi)攔截。
5.商品詳情：展示商品詳情、分享該商品到朋友圈、微信等。
6.項目模塊優(yōu)化和封裝。
7.項目打包：安卓 apk 包、ios 的 ipa 包、微信小程序平臺上架。

Vue 后臺管理系統(tǒng)
項目描述
1.實現(xiàn)用戶登錄登出功能，設(shè)置路由導航守衛(wèi)；
2.對主頁進行整體布局，渲染左側(cè)菜單列表，實現(xiàn)登出功能；
3.完成用戶管理模塊中，實現(xiàn)角色分配，用戶信息的展活、添加、修改、刪除、賬號啟用和注銷等功能：
4.完成權(quán)限管理模塊，實現(xiàn)為角色分配權(quán)限功能；
5.完成數(shù)據(jù)統(tǒng)計模塊，使用Echars圖表工具制作數(shù)據(jù)圖：
6.完成項目打包優(yōu)化工作。

茶七網(wǎng)（Vue商城項目）項目描述
1.購物整個路程（購物車、選擇地址、訂單、支付）；
2.Vuex：購物車管理、訂單管理、用戶管理、地址管理；
3.路由：攔截是否登錄；
4.axios二次封裝：加入token 和 token過期驗證；
5.根據(jù)后端給的接口數(shù)據(jù)完成頁面數(shù)據(jù)的渲染和不同展示view的判斷
6.實現(xiàn)了商品的分享功能、短信驗證碼注冊、登錄、找回密碼等。

相關(guān)知識

UniApp實現(xiàn)健身與運動追蹤的集成與使用方法
健身房會員卡小程序怎么做？抖音微信健身房小程序開發(fā)制作搭建需要哪些功能
應用市場HUAWEI WATCH GT 系列支持的手表應用
帝國CMS模板《減肥網(wǎng)》健康減肥網(wǎng)源碼程序 帶數(shù)據(jù)
()是在項目已經(jīng)投產(chǎn)運行一段時間后,對項目所造成的環(huán)境污染程度和人群健康損害進行定性和定量評價。
手機斗地主軟件(微信小程序怎么開掛別人不發(fā)現(xiàn)有掛嗎)
購物流程
“健康碼”能否實現(xiàn)“一碼通行”？官方回應！（附綠碼通行流程）
2024新奧歷史開獎記錄46期v2.0.9(中國網(wǎng)站)app下載安裝IOS/Android通用版/手機app
軒逸：做到健康與安全的出行，需要幾個步驟？

網(wǎng)址: uniapp開發(fā)實戰(zhàn)項目（真實環(huán)境支付、登錄、購物車、nodejs搭建后臺、封裝、搜索、發(fā)送驗證碼、ios、安卓、小程序、） http://m.u1s5d6.cn/newsview636673.html