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的由来 【uni-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 目录下。

资源路径的说明引入静态资源(图片视屏)

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" }

判断平台
编译期判断

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
判断结构

你好欢迎使用H5页面你好欢迎使用微信小程序

判断样式

/* #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_idcate_namecate_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级，所有业务没那么复杂，处理时比较简单

idnamepid 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_idname?1zhangsan2lisi

address

id国家省市区详细地址收获人名字收获人的联系方式备注defaultuid1dsfsdfsafdsadfsadfsaaaaaaaaaa zhangsan112fasdsadfsadfsffffffffffffffffffffzhangsan013sadkfjaskdfjsakdfjsakjfdksajfdklisi024sadkfjaskdfjsakdfjsakjfdksajfdklisi124sadkfjaskdfjsakdfjsakjfdksajfdklisi02