uni-app 基础知识

回顾 小程序-演示ugo

1 页面 结构 样式 我们会写

2 点击事件 绑定和修改数据 等 我们会写

3 发送请求 我们会写

4 顶部导航与底部tab栏 我们会配置

5 页面跳转 会写

我们完全可以用原生的小程序语法 来写一个完整的小程序

但是 没有那么方便 1 比如 基本都是success回调 还需要自己去封装promise 2 没有v-model等等

所以就出现了 框架 给我们封装了 写起来比较方便

几个框架的介绍

wepy 腾讯团队 组件化开发框架WePY– 只能开发微信小程序

taro Taro 是一套遵循 React 语法规范的 多端开发 解决方案。

mpvue 是一个使用 Vue.js 开发小程序的前端框架–只能开发微信小程序

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

uni-app的基本使用

项目：黑马商城项目

uni-app介绍 官方网页

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

即使不跨端，uni-app同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验，可快速上手uni-app

为什么要去学习uni-app？

相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。

框架的工作原理

写好 vue代码 —-> webpack babel打包 –>转换成 小程序 或者 网页等等..

开发uni项目的两种方式

1 编辑器-HbuilderX

安装编辑器HbuilderX-App开发版 下载地址

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载App开发版，可开箱即用

安装微信开发者工具 下载地址

利用HbuilderX初始化项目

• 点击HbuilderX菜单栏文件>项目>新建

• 选择uni-app,填写项目名称，项目创建的目录

  

运行项目

在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行

在hbuilderX工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app

在hbuilderX工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意：

• 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
• 微信开发者工具在 设置->安全设置，服务端口 开启
• 修改一下 测试

2 命令行-我们用这种

​ 首先安装vue脚手架 npm install -g @vue/cli

​ uni就是 vue语法项目

​ 1 初始化 项目

    vue create -p dcloudio/uni-preset-vue my-project

​ 2 选择 默认模板-上下箭头操作

​

​ 3 运行 或者 打包

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值	平台
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字节跳动小程序
mp-qq	qq 小程序

4 微信开发者工具 查看效果 ： 导入 dist->dev->mp-weixin

```

可以测试 其他打包
```

介绍项目目录和文件作用

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 打包安卓ios需要 小程序不用管它文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

dist 就是运行打包目录，在这里有各个平台的打包文件

pages 所有的页面存放目录

static 静态资源目录，例如图片等

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

uni-app的语法介绍

对比小程序–uni他帮我们封装了成了vue语法 更方便

全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容

通过pages来配置页面-先了解一会项目用

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考 pageStyle

pages 数组数组中第一项表示应用启动页

​ 通过style修改页面的标题和导航栏背景色

"pages": [ 、
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ]

配置tabbar–先了解 一会项目用

tabBar 配置项 指定 底部tab 栏

案例代码：

"tabBar": {
        "list": [
            {
                "text": "首页",
                "pagePath":"pages/index/index",
                "iconPath":"static/tabs/home.png",
                "selectedIconPath":"static/tabs/home-active.png"
            },
            {
                "text": "信息",
                "pagePath":"pages/message/message",
                "iconPath":"static/tabs/message.png",
                "selectedIconPath":"static/tabs/message-active.png"
            },
            {
                "text": "我们",
                "pagePath":"pages/contact/contact",
                "iconPath":"static/tabs/contact.png",
                "selectedIconPath":"static/tabs/contact-active.png"
            }
        ]
    }

组件标签的基本使用

uni-app提供了丰富的基础组件 view text image 等等..

uni-app中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构

uni-app中的数据绑定

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}

插值表达式的使用

• 利用插值表达式渲染基本数据

  <view>{{msg}}</view>

v-for的使用

data中定以一个数组，最终将数组渲染到页面上

data () {
  return {
    arr: [
      { name: '刘能', age: 29 },
      { name: '赵四', age: 39 },
      { name: '宋小宝', age: 49 },
      { name: '小沈阳', age: 59 }
    ]
  }
}

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>

uni中的事件

事件绑定与修改数据

在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

data () {
  return {
     msg:"你好"
  }
}
methods: {
  tapHandle () {
    console.log('真的点我了')
    // 修改数据 
    this.msg="msg修改了"
  }
}

事件传参

• 默认如果没有传递参数，事件函数第一个形参为事件对象

  // template
  <button @click="tapHandle">点我啊</button>
  // script
  methods: {
    tapHandle (e) {
      console.log(e)
    }
  }

• 如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

  // template
  <button @click="tapHandle(1)">点我啊</button>
  // script
  methods: {
    tapHandle (num) {
      console.log(num)
    }
  }

• 如果获取事件对象也想传递参数

  // template
  <button @click="tapHandle(1,$event)">点我啊</button>
  // script
  methods: {
    tapHandle (num,e) {
      console.log(num,e)
    }
  }

uni的生命周期

uni-app 的生命周期 把 vue 与 小程序的 结合起来了

应用的生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

uni-app 支持如下应用生命周期函数：

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发

页面的生命周期

uni-app 支持如下页面生命周期函数：

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。
onHide	监听页面隐藏
onUnload	监听页面卸载

uniapp使用其他问题

我们平时开发vue 经常下一些 包来使用 比如 element ui vant等等普通页面ui框架

uniapp使用其他组件

uni-自带的ui

各种插件

缺点：基本上 只能使用它自己官网的  其他的不行
为什么?  因为支持 8 种代码 编译各种小程序 ios 安卓 h5
        很多其他组件 是支持一个不支持一个的  使用 基本都使用uniapp自带的

使用 uniapp写代码 自己写 有特殊需要 去他官网找

如果公司非要用 uniapp 用来写 小程序 比较多

注意：平时 大部分 肯定是正常 vue 写pc端 写移动端

开发的一般流程

产品提出需求 画出原型图–> 开会评审–>安排工期(各部门商量)—

​ —>ui设计图–>前端开发(后端开发 顺序不一定)–>搞完 测试 —>上线—>回测—>维护项目

ugo黑马优购项目介绍

小程序资料–>看图（打开ugo）

ps的基本使用

psd 文件–>公司 ui给你这个 –我在小程序资料 准备了elem-psd

图片 辛苦点 我们目前就用他

测量 宽高距离

切片切图

步骤：

​ ① 利用切片选中图片 ：利用切片工具手动划出

​ ② 导出选中的图片：文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储

测试切 底部图标

接下来 项目直接上手

配置 顶部导航栏 与底部tabbar标签切换