uniapp开发实战项目（真实环境支付、登录、购物车、nodejs搭建后台、封装、搜索、发送验证码、ios、安卓、小程序、）
【完结】uniapp开发实战项目（真实环境支付、登录、购物车、nodejs搭建后台、封装、搜索、发送验证码、ios、安卓、小程序、）
P1 01课程介绍
P2 02 开发环境搭建
P3 03【mac操作系统】真机调试
P4 04【mac操作系统】微信小程序调试
P5 05【windows操作系统】连接安卓手机
P6 06【windows操作系统】连接ios手机
P7 07【windows操作系统】微信小程序调试
P8 08 项目开发前分析
P9 09【首页】模块分析
P10 10【搜索】模块划分
P11 11【商品详情和购物车】模块划分
P12 12 其他页面分析
P13 13 目录结构
P14 14【重要】开发前闲聊和赠送其他课程
P15 15 创建项目和引入文件
@import 'common/uni.css';/相当reset.css//
P16 16【底部】导航开发
P17 17【首页】顶部开发
"titleNView": {//不支持wx
"text": "\ue69d" iconfont.ttf unicode编码 前三个去掉
小程序不支持 需要navigationStyle 自定义
P18 18【首页】swiper部分
swiper的坑
1、组件名称swiper.vue 或者 Swiper.vue，在传递数据的时候有可能图片就不见了。
2、改变图片的大小咱们要用rpx的单位。
3、本身swiper是有150px的默认高度，app中需要改变默认高度需要加入：
P19 19【首页】推荐部分开发
P20 20【首页】文字封装开发
页面小写 组件一般都大写
P21 21【首页】商品列表和单个商品组件封装
....不代码
P22 22【首页】运动户外头部开发
P23 23【首页】热销爆品开发修改商品值
P24 24【首页】推荐店铺模块开发和滑块处理
P25 25【首页】隐藏滚动条和底部
"app-plus": {
"scrollIndicator": "none",
pages.json设置 滚动条消失
uniapp官网搜索问题
::-webkit-scrollbar{
display:none;
width:0 !important;
height:0 !important;
-webkit-apearance:none;
background:transparent;
}
ios7有问题 ios11没事
P26 26【首页】顶栏滑块功能开发
body滑动用swiper 事件和current组合
P27 27【首页】顶栏滑块跟随
scroll-into-view scroll-view
P28 28【首页】改变内容块高度
uniapp官网
api-界面--节点信息 获取dom标签信息 获取高度
let view=uni.createSelectorQuery().select('.home-data'); class
view.boundingClientRect(data=>{
console.log(data.height)
}).exec();
计算可视区有bug android行 ios不准
套一个父div view
onReady里面弄
P29 29 搭建nodejs后端环境
npm install express-generator -g
进入项目 express --view=ejs server
P30 30 请求接口渲染首页数据
template 合并一块
上面 uniapp问题
P31 31修正可视区域高度问题
官网 api-设备-系统信息
uni.getSystemInfo() windowHeight可视区
uni.upx2px(80)
刘海屏 状态栏那些 android/IOS
uni.getSystemInfoSync() 状态栏高度statusBarHeight
P32 32滑动不同板块展示不同数据
P33 33修正重复请求数据
P34 34 上拉加载更多数据
P35 35 request封装
P36 36 进入搜索页面
Nav button onNavigationBarButtonTap
pages.json-app-plug-titleView-searhinput
P37 37搜索页面内容布局
P38 38 进入搜索結果页
P39 39搜索结果页布局和封装
P40 40 搜索結果页排序功能
P41 41 搜索关键词判断和隐藏键盘
P42 42搜索词记录
P43 43 清除搜索记录
@tap
P44 44 搜索词传值
ask.dcloud.net.cn/article/35374
P45 45 搭建数据库表和数据结构
aolai表
P46 46 请求搜索接口显示不同搜索结果
P47 47 完成商品排序功能
P48 48【商品分类】顶栏完成
P49 49 构建商品分类页数据
P50 50商品分类内容布局
P51 51获取高度和点击添加样式
P52 52商品分类对应数据渲染
P53 53【商品详情页】滚动透明渐变导航栏
pages.json
app-plus titleNview type:transparent
P54 54【商品详情页】内容块布局
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 商品详情对应数据
express 接口跨域
P60 60 商品分享功能
P61 61【购物车】自定义导航栏
uni-nav-bar
P62 62【购物车】内容块布局
P63 63 使用Vuex管理状态
P64 64购物车无商品默认样式
P65 65 全选和全不选功能
P66 66 单选功能
P67 67 合计和结算数量
P68 68 编辑和完成的数量功能
P69 69 商品删除功能
P70 70 加入购物车
P71 71【我的】页面布局
P72 72 地址管理页面布局
P73 73 收货地址三级联动
mpvue-picker uniapp插件
mpvue-citypicker
P74 74 新增收货地址
P75 75 修改地址
P76 76 默认地址选择
P77 77【我的订单】顶部选项卡
P78 78 订单有数据样式布局
P79 79 订单无数据样式布局
P80 80 构建订单数据
--
P81 81 确认订单布局
P82 82 显示默认地址
P83 83 修改收货默认地址
页面传值
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设计登录注册接口文档和sql语句
P92 92 登录前端和后端功能
P93 93 存储用户信息
P94 94 用户信息持久化存储
P95 95 退出登录
P96 96 自定义tabbar
P97 97 tabbar事件拦截判断是否登录
P98 98 手机号注册后端与前端
P99 99【发送验证码】接入短信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获取当前用户购物车数据的前端和后端
P111 111修改当前用户购物车商品数量前端和后端
P112 112 加入购物车
P113 113 用户确认订单页面
P114 114 确定订单的默认地址
P115 115删除购物车数据库数据
P116 116 确认订单页面问题修正
加分组单选择
P117 117【理论】订单到支付
购物车页面点击【结算】
发送请求：
传递商品数据，
前端就拿到了订单号进行存储
并且跳转到确认订单页面
后端：
生成一个订单，并且返回给前端一个订单号
确认订单页面 点击【提交订单】
前端：
判断是否选择了收货地址
发送请求：
把订单号传递给后端
后端：
把订单的状态从1，改成2
并且把下单的商品在购物车页的数据清空
支付==》接口sdk
P118 118 生成订单
P119 119 提交订单
P120 120 对接沙箱
支付宝沙箱对接流程
P121 122 支付金额和名称
P122 123 真实环境支付
一 前端发数据 后端sdk处理
二 uni.requestPayment(OBJECT)
P123 124项目怎么写简历中？面试中如何介绍?
uni-app 项目（百年奥莱）
项目描述
1.登录：手机短信登录、token、用户信息存储和判断。
2.搜索：对于商品（综合、价格、销量）排序和搜索，做持久化搜索处理。
3.购买流程：购物车增删改查，订单管理，支付（微信和支付宝），判断支付成功或失败。
4.我的：用户个人中心，地址管理，订单管理等并且做导航守卫拦截。
5.商品详情：展示商品详情、分享该商品到朋友圈、微信等。
6.项目模块优化和封装。
7.项目打包：安卓 apk 包、ios 的 ipa 包、微信小程序平台上架。
Vue 后台管理系统
项目描述
1.实现用户登录登出功能，设置路由导航守卫；
2.对主页进行整体布局，渲染左侧菜单列表，实现登出功能；
3.完成用户管理模块中，实现角色分配，用户信息的展活、添加、修改、删除、账号启用和注销等功能：
4.完成权限管理模块，实现为角色分配权限功能；
5.完成数据统计模块，使用Echars图表工具制作数据图：
6.完成项目打包优化工作。
茶七网（Vue商城项目）项目描述
1.购物整个路程（购物车、选择地址、订单、支付）；
2.Vuex：购物车管理、订单管理、用户管理、地址管理；
3.路由：拦截是否登录；
4.axios二次封装：加入token 和 token过期验证；
5.根据后端给的接口数据完成页面数据的渲染和不同展示view的判断
6.实现了商品的分享功能、短信验证码注册、登录、找回密码等。
浙公网安备 33010602011771号