uni-app课件讲解

uni-app

基本介绍

官网：https://uniapp.dcloud.net.cn/

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台，方便开发者快速交付，不需要转换开发思维，不需要更改开发习惯，支持一套代码，运行到多个平台。

优势：

• 开发者/案例数量更多
• 平台能力不受限
• 性能体验优秀
• 周边生态丰富
• 学习成本低
• 开发成本低

快速入门

编辑器

uni-app的开发默认有2种方式：

1. 通过 HBuilderX 创建（需安装 HBuilderX 编辑器）

2. 通过命令行创建（需安装 NodeJS 环境）

HBuilderX编辑器下载地址：https://www.dcloud.io/hbuilderx.html

新建项目

启动hbuilderX编辑器，点击文件→新建（N）→1.项目

选择uni-app类型，输入项目名称，选择模板，点击创建（N），即可成功创建uni-app项目。

项目运行

文档：https://uniapp.dcloud.net.cn/quickstart-hx.html#%E8%BF%90%E8%A1%8Cuni-app

运行web项目

访问终端下提供的url地址，访问效果如下：

运行小程序项目

使用快捷键Ctrl+Alt+,打开设置窗口→运行设置→小程序运行设置，填写微信开发者工具路径。

注意：如果没有安装，点击蓝色链接去下载安装，并在安装完成以后启动微信开发者工具，进入设置窗口→安全，把服务端端口和自动化接口…信任项目等配置项打开如下：

小程序配置中，可以直接使用测试AppID也可以使用真实账户的AppID，设置→基本设置→账号信息：

进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具：

运行Android项目

可以选择使用wift或者USB把手机（必须开启开发者选项与USB调试）连接开发电脑运行项目，也可以使用模拟器来运行项目。

模拟器	默认端口
夜神模拟器	62001/52001
Genymotion	5555
海马玩模拟器	26944
mumu模拟器	7555
天天模拟器	6555
逍遥模拟器	21503
雷神模拟器	5555
蓝叠模拟器	5555

进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器：

目录结构

文档：https://uniapp.dcloud.net.cn/tutorial/project.html#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84

项目目录/
├─unpackage          编译结果存储目录 (一般存放运行或发行的编译结果)
├─ pages/                代码文件存储目录 
│   └─index
│        └─index.vue      index页面
├─ static/                 静态资源（如图片、视频等）的存储目录，存放的css,js必须能直接被浏览器识别运行的，需要编译的不能存放在此。
├─App.vue               应用配置，用来配置App全局样式以及监听、应用生命周期
├─index.html           程序入口
├─main.js                 Vue初始化入口文件
├─manifest.json       配置应用名称、appid、logo、版本等打包信息
├─pages.json           配置页面路由、导航条、选项卡等页面类信息
└─uni.scss              内置的常用样式变量

应用配置 manifest.json

文档：https://uniapp.dcloud.net.cn/collocation/manifest.html

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等，我们也可以在这里为 Vue 为H5 设置跨域拦截处理器

编译配置 vue.config.js

文档：https://uniapp.dcloud.net.cn/collocation/vue-config.html

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项。

全局配置 page.json

文档：https://uniapp.dcloud.net.cn/collocation/pages.html

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。

属性	类型	必填	描述
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
easycom	Object	否	组件自动引入规则
tabBar	Object	否	设置底部 tab 的表现
condition	Object	否	启动模式配置
subPackages	Object Array	否	分包加载配置
preloadRule	Object	否	分包预下载规则

以下是一个包含了所有配置选项的 pages.json ：

{
	"pages": [{
		"path": "pages/component/index",
		"style": {
			"navigationBarTitleText": "组件"
		}
	}, {
		"path": "pages/API/index",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/component/view/index",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		"list": [{
			"name": "test", //模式名称
			"path": "pages/component/view/index" //启动页面，必选
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "演示",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{
			"collapse-tree-item":"/components/collapse-tree-item"
		},
		"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
		"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
		"rpxCalcMaxDeviceWidth": 960,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
    	"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
		"list": [{
			"pagePath": "pages/component/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "组件",
      		"iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
       			"text": "\ue102",
        		"selectedText": "\ue103",
        		"fontSize": "17px",
        		"color": "#000000",
        		"selectedColor": "#0000ff"
      		}
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "接口"
		}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"text": "文字",
			"iconPath": "static/image/midButton_iconPath.png",
			"iconWidth": "24px",
			"backgroundImage": "static/image/midButton_backgroundImage.png"
		}
	},
  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
      "^uni-(.*)": "@/components/uni-$1.vue"
    }
  },
  "topWindow": {
    "path": "responsive/top-window.vue",
    "style": {
      "height": "44px"
    }
  },
  "leftWindow": {
    "path": "responsive/left-window.vue",
    "style": {
      "width": "300px"
    }
  },
  "rightWindow": {
    "path": "responsive/right-window.vue",
    "style": {
      "width": "300px"
    },
    "matchMedia": {
      "minWidth": 768
    }
  }
}

全局样式 uni.scss

文档：https://uniapp.dcloud.net.cn/collocation/uni-scss.html

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

主组件 App.vue

文档：https://uniapp.dcloud.net.cn/collocation/App.html

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。其作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

入口文件 main.js

main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。官方文档

开发规范

开发规范约定

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

资源路径说明

template内加载静态资源，如 image，video 等标签的 src 属性时，可以使用相对路径或绝对路径，形式如下：

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

注意

• @ 初始的绝对路径以及相对路径会通过 base64 转换规则校验
• 约定的静态资源在非 h5 平台，均不转为 base64
• H5平台，小于4kb的资源会被转换成base64，其余不转

js 文件或 script 标签内，可以使用相对路径和绝对路径，形式如下：

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

css 文件或 style 标签内，可以使用相对路径和绝对路径，形式如下：

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

css 文件或 style 标签内引用的图片路径，可以使用相对路径也可以使用绝对路径，形式如下：

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

生命周期

应用生命周期

应用生命周期仅可在App.vue中监听，在其它页面监听无效。

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化
onExit	监听应用退出

<script setup>
import { ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
const title = ref('Hello')
onReady(() => {
    console.log('onReady')
})
</script>

页面生命周期

文档：https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数。

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项
onShareAppMessage	用户点击右上角分享
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object
onBackPress	监听页面返回
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件
onShareTimeline	监听用户点击右上角转发到朋友圈
onAddToFavorites	监听用户点击右上角收藏

展示数据

文档：https://developers.weixin.qq.com/miniprogram/dev/component/

名称	功能
view	视图容器
scroll-view	可滚动视图区域
swiper	滑块视图容器
page-container	页面容器
icon	图标组件
progress	进度条
rich-text	富文本
text	文本
button	按钮
checkbox	多选项目
checkbox-group	多项选择器，内部由多个checkbox组成
editor	富文本编辑器，可以对图片、文字进行编辑
picker	从底部弹起的滚动选择器
input	输入框
slider	滑动选择器
switch	开关选择器
textarea	多行输入框
span	用于支持内联文本和 image / navigator 的混排
navigator	页面链接
image	图片

路由功能

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用API uni.navigateTo或使用组件 <navigator open-type="navigate"/>
页面重定向	当前页面出栈，新页面入栈	调用API uni.redirectTo或使用组件 <navigator open-type="redirectTo"/>
页面返回	页面不断出栈，直到目标返回页	调用API uni.navigateBack或使用组件 <navigator open-type="navigateBack"/> 、 用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用API uni.switchTab或使用组件 <navigator open-type="switchTab"/> 、 用户切换Tab
重加载	页面全部出栈，只留下新的页面	调用API uni.reLaunch或使用组件 <navigator open-type="reLaunch"/>

（1）路由配置

uni-app 页面路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式（类似小程序在 app.json 中配置页面路由）。

"pages": [
		{
			"path": "pages/index",
			"style": {
				"navigationBarTitleText": "路由配置",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			}
		},
		{
			"path": "pages/user",
			"style": {
				"navigationBarTitleText": "路由配置",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			}
		}
]

（2）路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转（标签式导航）、调用API跳转（编程式导航）

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API uni.navigateTo、 使用组件 <navigator open-type="navigate" />
页面重定向	当前页面出栈，新页面入栈	调用 API uni.redirectTo 、 使用组件
页面返回	页面不断出栈，直到目标返回页	调用 API uni.navigateBack 、 使用组件 、 用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API uni.switchTab 、 使用组件 、 用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API uni.reLaunch 、 使用组件

（3）获取当前页面栈

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意： getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。

（4）路由传参与接收

说明：页面生命周期的 onLoad(）监听页面加载，其参数为上个页面传递的数据，如：

//页面跳转并传递参数
uni.navigateTo({
    url: 'page2?name=liy&message=Hello'
});

url为将要跳转的页面路径 ，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔。如 ‘path?key1=value2&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。

// 页面 2 接收参数
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
	console.log(option.name); //打印出上个页面传递的参数。
	console.log(option.message); //打印出上个页面传递的参数。
}

注意：url 有长度限制，太长的字符串会传递失败，并且不规范的字符格式也可能导致传递失败，所以对于复杂参数建议使用 encodeURI、decodeURI 进行处理后传递

（5）小程序路由分包配置

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

所谓的主包，即放置默认启动页面及 TabBar 页面，而分包则是根据 pages.json 的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示，此时终端界面会有等待提示。

"subPackages": [
  	{
			"root": "news",
			"pages": [{
					"path": "index",
					"style": {
						"navigationBarTitleText": "新闻中心",
						"navigationBarBackgroundColor": "#FFFFFF",
						"navigationBarTextStyle": "black",
						"backgroundColor": "#FFFFFF"
					}
				}
			]
		}
  	... 
]，
// 预下载分包设置
"preloadRule": {
		"pages/index": {
			"network": "all",
			"packages": ["activities"]
		}
}

进阶使用

Pinia 持久化

安装持久化存储插件： pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

插件默认使用 localStorage 实现持久化，小程序端不兼容，需要替换持久化 API。

基本用法

import { defineStore } from 'pinia'
import { ref } from 'vue'

// 定义 Store
export const useMemberStore = defineStore(
  'member',
  () => {
    // 会员信息
    const profile = ref<any>()

    // 保存会员信息，登录时使用
    const setProfile = (val: any) => {
      profile.value = val
    }

    // 清理会员信息，退出时使用
    const clearProfile = () => {
      profile.value = undefined
    }

    // 记得 return
    return {
      profile,
      setProfile,
      clearProfile,
    }
  },
  // TODO: 持久化
  {
    persist: true,
  },
)

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)

// 默认导出，给 main.ts 使用
export default pinia

// 模块统一导出
export * from './modules/member'

src/main.js，代码：

import { createSSRApp } from 'vue'
import pinia from './stores'

import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)

  app.use(pinia)
  return {
    app,
  }
}

小程序登陆

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
        <button open-type="getUserInfo" @getuserinfo="wxLogin">获取信息</button>
	</view>
</template>

<script setup>
const wxLogin = (e)=>{
    // 微信登陆，获取session_key与openid
    uni.login({
        provider: 'weixin',
        success(response) {
            console.log(response);
            let app_id = 'wx3ed3b5aa5674f9ca';
            let app_secret = 'c49648af2a1659eb1711844dec39e565';
            let code = response.code;
            let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${app_id}&secret=${app_secret}&js_code=${code}&grant_type=authorization_code`;
            uni.request({
                url,
                success(response){
                    console.log(response.data);
                }
            });
            
        }
    })
}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>