介绍
uni-app由dcloud 公司开发的多端融合框架,一次开发多端运行
技术架构:Vue语法+小程序的api
多端混合开发Hybrid:
- App端
- HTML+
- nvue(原生view)
- native.js(js原生沟通的桥梁)
- weex
- 内置ios/安卓的模块使用
- H5端
- h5专用api
- 各种小程序(微信为主)
准备工具
Hbuilderx (开发与编译工具)
微信小程序开发工具(微信小程序预览测试)
安卓模拟器/真机
界面
新建项目
运行项目
运行到H5
运行到微信小程序
1.打开开发工具的服务端口
2.HBuilderx配置 微信开发工具的地址
3.配置微信小程序id
4.运行到微信小程序
运行到App
1.打开模拟器或者手机
2.配置模拟器的端口
夜神模拟器端口号:62001
海马模拟器端口号:26944
逍遥模拟器端口号:21503
MuMu模拟器端口号:7555
天天模拟器端口号:6555
3.运行到模拟器
Vue语法
模板语法
1.文本渲染
- { {表达式}}
- v-text=“表达式”
- 表达式
- 简单的js运算
{ {2+3}}
- js方法调用
{ {title.length}}
{ {title.split("").reverse().join("")}}
- 3元运算符
<view>{ {title.length>15?'长度很长':'字少事大'}}</view>
- 简单的js运算
- v-html 富文本
2.条件渲染
- v-if
- v-else-if
- v-else
- v-show
- 三元运算符
3.列表选项
- 字符串,数字,列表,对象都可以遍历
- <view v-for="(item,index) in list" :key="index">{ {index+1}} { {item}}</view>
- 一定要保证兄弟元素间的key值是唯一
4.属性绑定
- <button v-bind:disabled=“true”>
- <button :disabled="true">
5.表单绑定
- 默认
:value="单向绑定" - input
v-model=“双向绑定” - @change=“$event.detail.value”
事件,事件的值$event.detail.value
6.事件
- 事件绑定: <view v-on:click="响应"
- 简写绑定:<view @click="事件响应"
- <view @click="num++"
- 事件响应函数(函数在methods定义)
<view @click="say" - 事件传参
- 不写参数
@click="say"
等同于
@click=“say()”
等同于
@click=“say($event)”
- $event 是一个固定写法 代表事件对象
- @click=“doit(str)”
doit(str="你好"){
uni.showModal({title:str})
}
- 不写参数
- 事件对象
$event/e- function say(e){ }
- target目标对象
- dataSet 组件传参
<view :data-title="title" @click="say">
function say(e){
e.target.dataset.title
}
7. uni-app页面
- 页面配置
pages.json- 全局样式
globalStyle- 默认页面的样式会应用全局样式
页面写了style 配置,那么用的配置覆盖全局的配置
- 默认页面的样式会应用全局样式
- 页面
pages- path页面路径
- style 页面样式
- 全局样式
8. vue选项
- data数据
- methods方法
- computed计算
- watch监听
- directive指令
- filter过滤
生命周期
Vue的生命周期
小程序的生命周期
小程序的全局方法
onPullDownRefresh 下拉刷新
onReachBottom 触底更新
onShareAppMessage 右上角分享
onPageScroll 页面滚动
onShareTimeline 分享到朋友圈
app的全局方法
onBackPress 手机的返回键被点击
onNavigationBarButtonTap 导航栏按钮被点击
路由
路由组件
navigator 导航
- url 跳转页面的地址
- open-type 打开类型
- navigate跳转
- redirect重定向
(当前页面不留历史记录)
- navigateBack返回
- relauch 重启
- 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() 重启
获取当前页面 getApp
获取页面栈 getCurrentPages
- var page = getCurrentPages();
获取当前的页面栈,是一个数组(1-5)
uni.navigateBack({delta:page.length}) - page[page.length-1] 获取当前页面的信息
page[page.length-1] 获取当前页面的信息
条件编译
目的:不同的平台展示不同特性与功能
模板条件编译
格式:
<template>
<view>
<!-- #ifdef H5 -->
内容
<!-- #endif -->
</view>
</template>
条件:
APP App端
H5 网页
MP 小程序(MP-WEIXIN 微信小程序)
css条件编译
/* #ifdef APP */
.active{color:red}
/* #endif */
js条件编译
// #ifdef APP-PLUS
uni.showModal({
title:"你好App用户"
})
// #endif
条件配置 pages.json
{
"path" : "pages/condition/condition",
"style":{
"h5":{
"titleNView":{
"titleText":"我是H5"
}
},
"app-plus": {
"titleNView":false //隐藏导航栏
}
},
// #ifdef MP-WEIXIN || APP
{
"path":"pages/condition/we",
"style":{
"navigationBarTitleText": "小程序专有页面"
}
},
// #endif