【完結(jié)】uniapp開發(fā)實(shí)戰(zhàn)項(xiàng)目（真實(shí)環(huán)境支付、登錄、購物車、nodejs搭建后臺(tái)、封裝、搜索、發(fā)送驗(yàn)證碼、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)】真機(jī)調(diào)試
P4 04【mac操作系統(tǒng)】微信小程序調(diào)試
P5 05【windows操作系統(tǒng)】連接安卓手機(jī)
P6 06【windows操作系統(tǒng)】連接ios手機(jī)
P7 07【windows操作系統(tǒng)】微信小程序調(diào)試
P8 08 項(xiàng)目開發(fā)前分析
P9 09【首頁】模塊分析
P10 10【搜索】模塊劃分

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

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

@import 'common/uni.css';/相當(dāng)reset.css//

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

"titleNView": {//不支持wx

"text": "ue69d" iconfont.ttf unicode編碼 前三個(gè)去掉

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

P18 18【首頁】swiper部分

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

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

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

頁面小寫 組件一般都大寫

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

....不代碼

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

P25 25【首頁】隱藏滾動(dòng)條和底部

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

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

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

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

body滑動(dòng)用swiper 事件和current組合

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

scroll-into-view scroll-view

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

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

計(jì)算可視區(qū)有bug android行 ios不準(zhǔn)

套一個(gè)父div view

onReady里面弄

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

npm install express-generator -g

進(jìn)入項(xiàng)目 express --view=ejs server

P30 30 請(qǐng)求接口渲染首頁數(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滑動(dòng)不同板塊展示不同數(shù)據(jù)
P33 33修正重復(fù)請(qǐng)求數(shù)據(jù)
P34 34 上拉加載更多數(shù)據(jù)
P35 35 request封裝

P36 36 進(jìn)入搜索頁面

Nav button onNavigationBarButtonTap

pages.json-app-plug-titleView-searhinput

P37 37搜索頁面內(nèi)容布局
P38 38 進(jìn)入搜索結(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 請(qǐng)求搜索接口顯示不同搜索結(jié)果
P47 47 完成商品排序功能
P48 48【商品分類】頂欄完成

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

P53 53【商品詳情頁】滾動(dòng)透明漸變導(dǎo)航欄

pages.json app-plus titleNview type:transparent

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

P56 56 底部滑塊動(dòng)畫效果

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

P57 57 完善底部滑塊

uni官方組件

uni-number-box

P58 58 修改返回鍵行為

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

P59 59 商品詳情對(duì)應(yīng)數(shù)據(jù)

express 接口跨域

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

uni-nav-bar

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

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

P73 73 收貨地址三級(jí)聯(lián)動(dòng)

mpvue-picker uniapp插件

mpvue-citypicker

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

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

--

P81 81 確認(rèn)訂單布局
P82 82 顯示默認(rèn)地址

P83 83 修改收貨默認(rèn)地址

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

uni.$emit uni.$on

P84 84【確認(rèn)支付】頁面布局

label標(biāo)簽 整塊 點(diǎn)擊起作用

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

swiper+scroll-view組合

P88 88 登錄表單驗(yàn)證

test()驗(yàn)證

P89 89 輸入手機(jī)號(hào)頁面
P90 90 驗(yàn)證碼倒計(jì)時(shí)

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

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

cnpm install qcloudsms_js

騰訊云短信

P100 100 注冊(cè)成功信息存儲(chǔ)

P101 101 Nodejs生成token

cnpm install jsonwebtoken

P102 102 修復(fù)一些問題
P103 103 前端token的使用
P104 104 手機(jī)號(hào)注冊(cè)后自動(dòng)登錄

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

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

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

:cnpm install jwt-decode

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

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

加分組單選擇

P117 117【理論】訂單到支付

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

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

P120 120 對(duì)接沙箱

支付寶沙箱對(duì)接流程

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

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

二 uni.requestPayment(OBJECT)

P123 124項(xiàng)目怎么寫簡(jiǎn)歷中？面試中如何介紹?

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

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

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

相關(guān)知識(shí)

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

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