uniapp：你值得了解的内容

解释

由dcloud 公司开发的多端融合框架，1次开发多端运行
竞品：apiCloud ，appCan ，Codova
技术架构 Vue语法+小程序的api
Hybrid混合开发

App端

HTML+、nvue（原生view）、native.js(js原生沟通的桥梁)、weex、内置ios/安卓的模块使用

H5端

h5专用api

微信小程序

各种小程序（微信为主）

准备工具

Hbuilderx （开发与编译工具）、微信小程序开发工具（微信小程序预览测试）、安卓模拟器/真机运行app

vue语法

button按钮 type：primary主要、default 默认、warn警告 size=“mini” 大小 disabled是否可用

input

value值、v-model对表单双向绑定 @change="$event.detail.value" placeholder提示文本、

picker

mode模式、time时间、date日期、region地区

日期

start="09:01" end="21:01"

slider滑块

value值、max最大、min最小

@change="$event.detail.value"

模板语法

事件

事件绑定:<view v-on:click="响应">
简写绑定: <view @click="事件响应">
事件行内处理<view @click="num++">
事件响应函数(函数在methods定义)
<view @click="say"><view @click="say">

事件传参

不写参数
@click="say"等同于
@click="say()"等同于
@click=“sav($eventy”)
$event是一个固定写法代表事件对象
@click=“doit(str)”

doit(str="你好") {
    
    
				console.log(e);
				uni.showModal({
    
    
					title: e.target.dataset.title
				})
			},

事件对象$event/e

target 目标对象
dataSet 组件传参

<view :data-title="title" @click="say">
function say(e){
    
    
 e.target.dataset.title
}

uni-app生命周期

vue的生命周期

创建

beforeCreate
Created 可以使用this 没有dom
作用 1、初始数据
2、注册监听事件
3、开启定时器
4、ajax请求

挂载

beforeMount
mounted 可以操作dom（节点）
作用1、操作dom
2、ajax请求

更新

beforeUpdate
updated

卸载

beforeDestroy 作用 1、移除事件的监听 2、移除停止定时器
destroy

小程序生命周期

onload 加载

能够获取页面的参数
开启ajax 定时器事件监听
像vue的created

onshow显示

播放媒体

onReady准备

获取节点信息
想vue的mounted

onHide 后台运行

停止播放媒体

onUnload卸载

停止事件监听和定时器

小程序的全局方法

onPullDownRefresh 下拉刷新
onReachBottom 触底刷新
onShareBottom（）触底刷新
onShareAppMessage 右上角分享
onPageScroll页面滚动
onShareTimeline分享到朋友圈

app的全局方法

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

路由

路由组件
navigator导航
url 跳转页面地址
open-type 打开类型
navigate跳转redirect重定向
(当前页面不留历史记录)navigateBack返回
relauch重启
switchTab 跳转底部栏

路由传参

switchTab
传递
url:path?name=mumu&age=18
接收
onLoad(option){}
option的值{name:“mumu”,age:18}
路由api
uni.navigateTo({url})跳转
uni.redirectTo({url)重定向
uni.navigateBack()返回
uni.switchTab)底部栏切换
uni.reLaunch()重启
路由配置 tabbar
获取当前页面

在App.vue01在App.vue
定义globalData:{num:100}
要使用的页面获取app
var app = getApp()
获取globalData的值

onShow(){
    
    
this.num = app.globalData.num
}

更新globalData值

addNum(){
    
    
app.globalData.num++;
this.num = app.globalData.num}

在这里插入图片描述

获取页面栈getCurrentPages

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

条件编译

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

模板条件编译

格式

<!-- #ifdef H5 -->
内容
<!-- #endif -->

条件
APPApp端、H5网页、MP小程序、MP-WEIXIN微信小程序

css条件编译

/* #ifdef APP */
     .active{
    
    color:red}
/* #endif */

js条件编译

// #ifdef APP-PLUS
uni.showModal({
    
    
	title:"你好App用户"
})
// #endif

条件配置pages.json

// #ifdef MP-WEIXIN	|| APP	
{
    
    
	"path":"pages/condition/we",
	"style":{
    
    
		"navigationBarTitleText": "小程序专有页面"
	}
},
// #endif