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 删除对应购物车的数据