uni-app入门及练手项目
1多端的介绍
- pc：web,桌面应用
- 移动端：移动端–web app（android,ios） — 小程序（微信小程序，百度小程序，支付宝小程序，头条小程序，qq小程序，360小程序，华为小程序）
1.1原生app
- 使用原生的技术开发的手机端app Android系统（java android） ios–app(object-C)，京东，腾讯视屏，支付宝
- 优点：
- 功能比h5较多，
- 运行速度快，
- 用户体验好
- 缺点:
- 需要下载，占存储容量
- 开发成本比较高。
1.2混合app
- 使用原生的app技术和H5技术进行一定比例混合开发的app,混合比例不限，
- 优点:
- 功能比较多，速度比原生app运行速度慢，用户体验比较好。开发成本不高
- 缺点：
- 需要下载，占存储容量
- 混合技术不是特别成熟,
- react-native，filler
1.3多端
- pc：web,桌面应用
- 移动端：移动端–web app（android,ios） — 小程序（微信小程序，百度小程序，支付宝小程序，头条小程序，qq小程序，360小程序，华为小程序）
2dcloud的公司的介绍
https://www.dcloud.io/
2.1uni-app
概念
uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有600万开发者用户，几十万应用案例、12亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
选择原因
功能框架
3uni-app的由来
https://uniapp.dcloud.io/history
4快速上手
4.1使用hbuilderX可视化工具创建
https://www.dcloud.io/hbuilderx.html
1 下载hbuilderX
2 解压
- 将解压后的目录复制粘贴(不要是C盘，不要是中文目录)
3 新建项目
4 开发项目
5 调试运行项目
运行在h5端
行在微信小程序端
- 第一次告诉hbuilderX微信开发者工具安装到哪里去了
- 报错
- 原因：微信开发者工具没有ba端口打开
- 解决：打开微信开发者工具----设置—安全设置—打开端口
- 如果不能自动打开微信开发者工具，只能手动导入项目
运行在百度小程序端
运行在支付宝小程序端
运行在app上的表现
- 1 真机调试
- 2安装一个模拟器（雷电模拟器）
- 将真机或者模拟器调成开发者模式—设置—关于手机----版本号—连续点击5次|3次
6 上线项目
4.2使用命令行创建一个uni-app项目(了解)
1 创建项目
vue create -p dcloudio/uni-preset-vue my-project
2 编写代码
3调试代码
- npm run dev:平台
4 发布代码
- npm run build:平台
4.3命令行创建vs图形化的创建方式
- 图形创建的项目没有编译环境，使用的都是hbuilerX的编译环境
5框架简介
uni-app使用vue的语法+小程序的标签和API
开发规范
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范，详见uni-app 组件规范
- 接口能力（JS API）靠近微信小程序规范，但需将前缀
wx替换为uni，详见uni-app接口规范 - 数据绑定及事件处理同
Vue.js规范，同时补充了App及页面的生命周期 - 为兼容多端运行，建议使用flex布局进行开发
目录结构
- 文件:
- app.vue：对标app.js+app.wxss
- main.js ：入口文件
- mainfest.json：项目配置文件
- pages.json:对标app.json和页面.json一个结合
- uni.scss:全局的scss,css样式的值
- 目录
- pages：uni-app的页面，一个页面是一个目录，目录下是个单文件**.vue
- static:放置的是静态资源,图片，视屏，音频
- common:放置公共的css文件
- utils:放置公共的js文件
- components：放置公共的组件的
- platforms:个平台专用的页面
- h5
- mp-weixin
tips:
- 编译到任意平台时，
static目录下的文件均会被打包进去，非static目录下的文件（vue、js、css 等）被引用到才会被包含进去。 static目录下的js文件不会被编译，如果里面有es6的代码，不经过转换直接运行，在手机设备上会报错。css、less/scss等资源同样不要放在static目录下，建议这些公用的资源放在common目录下。
资源路径的说明
引入静态资源(图片视屏)
<image class="logo" src="/static/logo.png">image>
<image class="logo" src="@/static/logo.png">image>
<image class="logo" src="../../static/logo.png">image>
tips
- 支付宝小程序组件内 image 标签不可使用相对路径
引入js文件
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
tips
- js文件不支持使用
/开头的方式引入
引入css文件
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
总结:
- 以后关于路径的引入我们都使用@绝对路径
uni-app的配置
- uni-app配置文件只有一个，是pages.json，在这里可以配置全局配置，也可以配置页面的
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor":"#2C405A",
"mp-weixin":{
"navigationBarBackgroundColor":"#565788"
}
}
}
,{
"path" : "pages/cart/cart",
"style" : {
"navigationBarTitleText": "购物车"
}
}
,{
"path" : "pages/my/my",
"style" : {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小u商城",
"navigationBarBackgroundColor": "#ff0000",
"backgroundColor": "#F8F8F8",
"h5":{
"navigationBarBackgroundColor": "#00ff00"
},
"mp-weixin":{
"navigationBarBackgroundColor": "#0000ff"
}
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#ff0000",
"borderStyle": "black",
"backgroundColor": "#fffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/tabs/index.png",
"selectedIconPath": "static/tabs/indexFull.png",
"text": "首页"
}, {
"pagePath": "pages/cart/cart",
"iconPath": "static/tabs/cart.png",
"selectedIconPath": "static/tabs/cartFull.png",
"text": "购物车"
},{
"pagePath": "pages/my/my",
"iconPath": "static/tabs/my.png",
"selectedIconPath": "static/tabs/myFull.png",
"text": "我的"
}]
}
}
生命周期
- 支持的是小程序风格的生命周期，也支持vue的生命周期，推荐使用使用小程序风格的
应用的生命周期
- 值在app.vue文件里面写
页面的生命周期
路由
- 支持小程序风格的路由，也支持vue里vue-router，推荐使用小程序风格的
跳转
uni-app有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。
页面栈
运行环境的判断
开发环境和生产环境的判断
uni-app可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。- 在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境
if(process.env.NODE_ENV === 'development'){
console.log('开发环境')
}else{
console.log('生产环境')
}
- 应用场景:使用在线上域名和开发域名的切换中使用
let baseUrl=null
if(process.env.NODE_ENV === 'development'){
baseUrl="http://localhost:3000"
}else{
baseUrl="http://api.zhaowei.shop"
}
判断平台
编译期判断
- 条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
- 判断结构
<!-- #ifdef H5 -->
<view class="info">你好欢迎使用H5页面</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="info">你好欢迎使用微信小程序</view>
<!-- #endif -->
- 判断样式
/* #ifdef H5 */
.info{
width: 400rpx;
height:400rpx;
background-color: #007AFF;
}
/* #endif */
/* #ifndef H5 */
.info{
width: 750rpx;
height:750rpx;
background-color: #ff0000;
}
/* #endif */
- 判断逻辑
// #ifdef H5
uni.navigateTo({
url:"../login/login"
})
// #endif
// #ifdef MP-WEIXIN
uni.navigateTo({
url:'../getUserInfo/getUserInfo'
})
// #endif
运行时的判断
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
default:
console.log('运行在开发者工具上')
break;
}
样式和结构
结构
- uni-app结构不能写H5标签，要写uni-app给的组件，uni-app组件和微信小程序的组件基本一样。要注意平台的差异性，uni-ui
样式
尺寸单位
- 和小程序的一样
样式导入
- 和小程序的一样
内联样式
- 和vue内联样式一样
支持选择器
- 和小程序一样
全局样式和局部样式
- 和小程序的一样
6使用vue的注意事项
https://uniapp.dcloud.io/use
生命周期
uni-app完整支持Vue实例的生命周期，同时还新增 应用生命周期 及 页面生命周期。
模板语法
uni-app完整支持Vue模板语法。
data属性
data必须声明为返回一个初始数据对象的函数，- 由于小程序端不支持更新属性值为 undefined，框架内部将替换 undefined 为 null，此时可能出现预期之外的情况（相关反馈），需要自行判断一下。
全局变量
- uni-app全局变量
- 模块化
- 挂在vue的原型上
- 在app.vue中定义globalData属性，使用getApp()
- vuex
其他设置
- Vue 组件编译到小程序平台的时候会编译为对应平台的组件，部分小程序平台支持 options 选项（具体选项参考对应小程序平台文档的自定义组件部分），一般情况默认即可，如有特殊需求可在 Vue 组件中增加 options 属性。
class和style绑定
- 使用的vue的语法格式
- 非H5端不支持 Vue官方文档：Class 与 Style 绑定 中的
classObject和styleObject语法。
计算属性
- 完整支持计算属性
条件渲染
- 完整支持条件渲染
列表渲染
- 完整的支持列表渲染
vhtml指令
- App端（vue页面V3编译模式）和H5端支持v-html，其他端不支持v-html。
- 使用rich-text解决平台差异
组件
- 和vue组件的用法一样。
uni-app跨端开发的事项
https://uniapp.dcloud.io/matteru
- 总结:目录结构类似小程序，页面代码结构写法靠近于vue，布局+样式—小程序，视图层的渲染—vue。
小u商城的简介
- 小u商城是一个B2C的商城，实现用户购物一整套的流程，功能有首页，分类列表，商品列表页，商品详情页，用户可以登录–加入购物车–结算—下订单—支付。
- 接口部分:技术栈：node+express+mysql
- 商城的管理后台:vue全家桶+element-ui
- 商城的前台：uni-app实现商城C端—H5—app–微信小程序----支付宝小程序—百度小程序
- B2C:小米商城，华为商城
- B2B：1688
- B2B2C:京东，天猫
- C2C:淘宝
- P2P:互联网金融
- O2O：
- F2C
运行项目
搭建开发环境
先部署数据库
- 安装mysql—启动mysql—找客户端操作(navicate)
- 建一个库shop，将项目的表结构导入到shop库中。
部署接口
- 先安装node环境
- 修改接口的配置文件（数据库的配置）
- 安装依赖包
- 运行接口
- 测试接口（postman）
部署商城的后台
- 1解决跨域问题
- 2安装依赖包
- 3启动
- 4测试
- 账号:admin
- 密码：123123
首页
分类 （无限极分类—递归函数）
cate_id cate_name cate_pid
1 家电 0
2 电视 1
3 冰箱 1
4 手机|数码 0
5 手机配件 4
6 手机 4
7 超薄电视 2
8 曲面电视 2
9 华为手机 6
10 小米手机 6
11 荣耀手机 9
- 小u商城只分类2级，所有业务没那么复杂，处理时比较简单
id name pid
1 中国 0
2 广东 1
3 广西 1
4 广州市 2
5 佛山市 2
6 白云区 4
7 天河区 4
接口的跨域怎么解决
1 前端解决
- jsonp 数据格式
- 一般实现可以使用jquery中有个$.jsonp()
- 代理
2后台 (推荐)
- 修改http协议的请求头
app.all('*', function(req, res, next) {
//设为指定的域
res.header('Access-Control-Allow-Origin', "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header('Access-Control-Allow-Credentials', true);
res.header("X-Powered-By", ' 3.2.1');
next();
});
- cors模块
- npm install cors
var cors=require('cors')
app.use(cors())
user_id name
1 zhangsan
2 lisi
- address
id 国家 省 市 区 详细地址 收获人名字 收获人的联系方式 备注 default uid
1 dsfsdfsafdsadfsadfsaaaaaaaaaa zhangsan 1 1
2 fasdsadfsadfsffffffffffffffffffff zhangsan 0 1
3 sadkfjaskdfjsakdfjsakjfdksajfdk lisi 0 2
4 sadkfjaskdfjsakdfjsakjfdksajfdk lisi 1 2
4 sadkfjaskdfjsakdfjsakjfdksajfdk lisi 0 2
- 活动表
id 名称 开始时间 结束时间 优惠券个数 领走多少 money
1 双11大促销 2021-11-10 2021-11-15 10000 2 3
id 用户id 活动id 领取的时间 money status 使用的时间
1 1 1 2021-11-11 3 1
2 2 1 2021-11-12 3 0
- order
order_id 订单号 订单金额 address_id order_status 订单时间 pay_status 支付方式 pay_money uid 是否使用优惠券 quan_id
1 2021010... 59688 1 1 11:37 1 支付宝 59680 1 send_id send
- order_goods
id order_id goods_id num price total
1 1 1 3 3999
2 1 2 9 5299
- -1：申请退款
- 0:刚下订单，还没有确认
- 1：管理员确认订单了
- 2：配货中。
- 3: 发货中
- 4：已收货
order_status pay_status （0未支付，1支付） send_id send_no
3 1 2 23456789234567
- 点击提交订单
- 1 检查每一个商品的库存。
- 2 往订单表中插入一条数据
- 3 往订单商品表插入多条数据
- 4 减对应商品的库存
- 5 修改优惠券的状态（据情况而定）
- 6 减掉用户的积分（据情况而定）
- 7 删除对应购物车的数据