uni-app基础知识

时间:2024-10-07 07:24:27

uni-app

uni-app是什么

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

解释

uni-app是由dcloud公司开发的,多端融合框架,一次开发,多端运行,它的竞品:apiCloud,appCan,Codova,技术架构:vue的语法+小程序的api

端(Hybrid混合开发)

  • App端:HTML+、nvue(原生view)、(js原生沟通的桥梁)、weex、内置的ios/安卓的模块使用
  • H5端:h5专用api
  • 各种小程序(微信为主)

准备工具

  • Hbuildx(开发与编译工具)
  • 微信小程序开发者工具(微信小程序预览测试)
  • 安卓模拟器/真机(运行app)

界面

  • 页面框架介绍
    在这里插入图片描述
  • 项目目录文件介绍
    在这里插入图片描述

使用uni-app

新建项目

文件—>新建项目---->输入项目名称----->新建
在这里插入图片描述

运行到多端

H5

运行------>运行到内置浏览器
在这里插入图片描述

小程序

  • 设置小程序的端口:设置----->安全设置
    在这里插入图片描述
  • Hbuilderx配置微信开发者工具的地址
    在这里插入图片描述
  • 配置微信小程序的id
    在这里插入图片描述
    在这里插入图片描述
  • 运行到微信小程序:
    在这里插入图片描述

APP

配置模拟器的端口

在这里插入图片描述
在这里插入图片描述

常见的模拟器的端口
  • 夜神模拟器端口号:62001
  • 海马模拟器端口号:26944
  • 逍遥模拟器端口号:21503
  • MuMu模拟器端口号:7555
  • 天天模拟器端口号:6555
打开运行到模拟器

在这里插入图片描述

注意项

  • hbuilder可能需要下载对应的插件
  • 运行到安卓模拟器,有视图差距
  • 运行可能需要一定的时间

vue语法

uni-app的使用遵循vue的基本语法,这里简单回顾一下

文本渲染

  • {{表达式}}
  • v-text=“表达式”
  • 表达式
    • 可以是简单的js运算:{{2+3}}
    • js方法调用:{{}}、{{(“”).reverse().join(“”)}}
    • 三目运算符:{{>10?“是的”:“并不是”}}
  • v-html富文本
		<view>
			<view class="title">文本渲染</view>
			<view>{{title}}</view>
			<view v-text="title"></view>
			<view>{{2+3}}</view>
			<view>{{}}</view>
			<view>{{("").reverse().join("")}}</view>
			<view>{{>10?"是的":"并不是"}}</view>
			<view v-html="str"></view>
		</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

条件渲染

  • v-if
  • v-else-if
  • v-else
  • v-show
		<view>
			<view class="title">条件渲染</view>
			<view v-if="isLog">欢迎您,亲爱的xxx</view>
			<view v-else>请先登录</view>
			
			<view v-show="isLog">欢迎欢迎</view>
			<view v-show="!isLog">请先登录</view>
			
			<view v-if="score>90">????奖励一辆小汽车</view>
			<view v-else-if="score>80">????奖励一台电脑</view>
			<view v-else-if="score>70">????奖励一辆电瓶车</view>
			<view v-else-if="score>60">????奖励一辆滑板车</view>
			<view v-else>打一顿</view>
		</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

列表选项(保障兄弟元素间的key值时唯一的)

  • 字符串,数字,列表,对象都可以遍历
  • < view v-for=“(item,index) in list” :key=“index”>{{item}}</ view>
		<view>
			<view class="title">列表渲染</view>
			<view>-----遍历列表-----</view>
			<view v-for="(item,index) in list" :key="index+1">{{item}}</view>
			<view>-----遍历对象-----</view>
			<view v-for="(value,key) in obj" v-bind:key="key">{{value}}</view>
			<view>-----遍历数字-----</view>
			<view v-for="item in 5">{{item}}</view>
			<view>-----遍历字符串-----</view>
			<view v-for="(s,i) in title" :key="i+2">{{s}}</view>
		</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

属性绑定

  • < button type=“primary” :disabled=“isLog” @click=“isLog=!isLog”>按钮</ button>
		<view>
			<view class="title">属性渲染</view>
			<button type="primary" :disabled="isLog" @click="isLog=!isLog">按钮</button>
			<button type="warn" :disabled="!isLog" @click="isLog=!isLog">按钮</button>
		</view>
  • 1
  • 2
  • 3
  • 4
  • 5

表单绑定

  • :value=“单向绑定”
  • v-model双向绑定
  • @change=“num=$ ”(事件的值是$)
		<view>
			<view class="title">表单绑定</view>
			<view>{{title}}---{{time}}---{{num}}</view>
			
			<view>-----选择-----</view>
			<picker mode="time" :value="time" start="09:01" end="21:01" @change="time=$">
				<view class="uni-input">{{time}}</view>
			</picker>
			
			<view>-----输入-----</view>
			<!-- 通过:value属性实现对表单单向绑定 -->
			<!-- 通过v-model对表单事项双向绑定 -->
			<!-- input默认没有样式 -->
			<input type="text" placeholder="请输入..." :value="title" v-model="title">
			
			<view>-----滑块-----</view>
			<slider :value="num" @change="num=$" step="5" />
		</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

事件绑定

  • 事件的绑定< button v-on:click=“事件响应”></ button>
  • 简写绑定:<button@:click=“事件响应”></ button>
  • 事件行内处理:<button @click=“num++”></ button>
  • 事件响应函数(函数在methods里定义):<button @click=“say()” type=“primary” size=“mini”>响应函数</ button>
  • 事件响应函数-传参<button @click=“say(‘你好,亲爱的祖国’)” type=“warn” size=“mini”>响应函数-传参</ button>
  • 不写参数@click=“say”等同于@click=“say()”等同于@click=“say($event)”
  • $event是固定写法,代表事件对象
  • 事件对象($event/e)<button @click=“doit” type=“primary” size=“mini” :data-title=“title”>事件对象</ button>
    • function say(e){}
    • target目标对象
    • dataset组件传参
		<view>
			<view class="title">事件绑定</view>
			<button v-on:click="num++" type="primary" size="mini">{{num}}绑定事件</button>
			<button @click="num++" type="warn" size="mini">{{num}}绑定事件-简写</button>
			<button @click="say()" type="primary" size="mini">响应函数</button>
			<button @click="say('你好,亲爱的祖国')" type="warn" size="mini">响应函数-传参</button>
			<button @click="doit" type="primary" size="mini" :data-title="title">事件对象</button>
		</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
export default {
		data() {
			return {
				time:"12:01",
				title: '你好,我是uni-app',
				num:1,
				str:"<strong>祖国繁荣昌盛</strong>,那是必须的",
				isLog:true,
				score:85,
				list:["vue","react","angular","jquery"],
				obj:{"小王":"javascript","小李":"html5","小赵":"css3"},
			}
		},
		onLoad() {

		},
		methods: {
			say(str="你好"){
				uni.showToast({//提示
					title:str
				})
			},
			doit(e){
				console.log(e);
				uni.showModal({//弹框
					title:e.target.dataset.title
				})
			}
		}
	}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

vue选项

  • data数据
  • methods方法
  • computed计算
  • watch监听
  • derective指令
  • filter过滤

uni-app页面

  • 新建页面(同上)
  • 页面配置:
    • 默认页面的样式会应用全局样式,页面写了style样式,那么用的配置覆盖全局配置
    • pages页面----path页面路径

uni-app的生命周期

(同等级会优先执行小程序的生命周期,再执行vue的生命周期)

Vue的生命周期

  • 创建
    • beforeCreate
    • created(可以使用this,没有dom)
      作用:初始数据、注册监听事件、开启定时器、ajax请求
  • 挂载
    • beforeMount
    • mounted(可以操作dom节点)
      作用:操作dom,ajax请求
  • 更新
    • beforeUpdate
    • updated
  • 卸载
    • beforeDestroy
      作用:移除事件监听,移除停止定时器
    • destroyed

小程序的生命周期

  • onLoad
    1、能够获取页面的参数
    2、开启ajax,定时器,页面监听
    3、像vue的created
  • onShow(显示)
    播放媒体
  • onReady(准备)
    1、获取节点信息
    2、像vue的mounted
  • onHide(后台运行)
    停止播放媒体
  • onUnload(卸载)
    停止事件监听与定时器

小程序的全局方法

网址:/tutorial/

  • 下拉刷新:onPullDownRefresh
  • 触底刷新:onReachBottom
  • 右上角分享:onShareAppMessage
  • 页面滚动:onPageScroll
  • 分享到朋友圈:onShareTimeline
    在这里插入图片描述

app的全局方法

  • 安卓手机的返回键被点击:onBackPress
  • 导航栏按钮被点击:onNavigationBarButtonTap

组件

  • button:按钮(type类型(primary、default、warn)、size(mini)、disabled是否可用)
  • input:表单(value值、v-model双向绑定、placehoder、@change事件)
  • picker:时间(value值、mode模式、time时间、date日期(start、end)、region地区)
  • slider:滑块(value、max、min、@change=“num=$”)

uni-app的路由

路由组件

< navigator></ navigator>

  • url:跳转的地址
  • open-type:打开的类型
    1、navigate:跳转
    2、redirect:重定向(当前页面不留历史记录)
    3、navigateBack:返回
    4、relauch:重启
    5、switchTab:跳转底部栏

路由传参

  • 传递:url:path?name=xxx&age=18
  • 接收:onLoad(option){}option的值:{name:xxx,age:18}

路由api

  • 跳转:({url})
  • 重定向:({url})
  • 返回:({url})
  • 底部栏切换:({url})
  • 重启:({url})

路由配置

tabBar
在这里插入图片描述

"tabBar": {
		"color": "#999",
		"selectedColor": "#FF7984",
		// "midButton": {
		// 	"text": "123",
		// 	"iconPath": "static/"
		// },
		"list":[
			{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "static/",
				"selectedIconPath": "static/"
			},
			{
				"pagePath": "pages/life/life",
				"text": "生命",
				"iconPath": "static/",
				"selectedIconPath": "static/"
			},
			{
				"pagePath": "pages/options/options",
				"text": "选项",
				"iconPath": "static/",
				"selectedIconPath": "static/"
			},
			{
				"pagePath": "pages/condition/condition",
				"text": "条件",
				"iconPath": "static/",
				"selectedIconPath": "static/"
			}
		]
	}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

获取当前页面(getApp)

  • 在定义globalData
  • 使用的页面更新获取app var app = getApp()
  • 获取globalData的值 onshow(){ = }
  • 更新globalData的值 addNum(){++}

获取页面栈(getCurrentPages())

  • var page = getCurrentPages();获取当前的页面栈,是一个数组(1-5)
  • ({delta:})
  • page[-1]获取当前页面的信息(不要去修改)

uni-app的条件编译

  • 目的:不同的平台展示不同的特性与功能、

模板条件编译

格式

  • < !-- #ifdef H5 -->< !-- #endif -->
  • < !-- #ifdef MP -->< !-- #endif -->
  • < !-- #ifdef APP -->< !-- #endif -->
		<view>条件编译</view>
		<!-- #ifdef H5 -->
			<view>H5:下载APP获取优惠券</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
			<view>wx:小程序优惠券50元</view>
		<!-- #endif -->
		<!-- #ifdef APP -->
			<view>app:app优惠券5元</view>
		<!-- #endif -->
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

条件

  • App(APP端)
  • H5(网页)
  • MP(小程序)MP-WEIXIN微信小程序

css条件编译

< view class=“active”>我是奇奇怪怪的一行文字</ view>

<view class="active">我是奇奇怪怪的一行文字</view>
  • 1

在这里插入图片描述

js条件编译

<button @click=“say()”>你好</ button>

<button @click="say()">你好</button>
  • 1
			say(){
				// #ifdef APP
				uni.showModal({
					title:"你好App用户"
				})
				// #endif
				// #ifdef H5
				uni.showModal({
					title:"你好手机用户"
				})
				// #endif
				// #ifdef MP
				uni.showToast({
					title:"你好微信用户"
				})
				// #endif
			}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

条件配置

“titleNView”: false隐藏状态栏
		"style" :                                                                                    
		    {
		        "navigationBarTitleText": "条件编译",
		        "enablePullDownRefresh": false,
				"h5": {
					"titleNView": {
						"titleText": "我是H5"
					}
				},
				"app-plus": {
					// "titleNView": false
					"titleNView": {
						"titleText": "我是APP"
					}
				}
		    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

在这里插入图片描述

页面条件配置

在这里插入图片描述
在这里插入图片描述