解释

由dcloud 公司开发的多端融合框架
1次开发多端运行
竞品：apiCloud ，appCan ，Codova
技术架构
- Vue语法+小程序的api
Hybrid混合开发端
- App端
  - HTML+
  - nvue（原生view）
  - native.js(js原生沟通的桥梁)
  - weex
  - 内置ios/安卓的模块使用
- H5端
  - h5专用api
- 各种小程序（微信为主）

准备工具

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

界面

新建项目

运行多端

H5

小程序

1. 打开开发工具的服务端口

2. HBuilderx配置微信开发工具的地址

3. 配置微信小程序id

4. 运行到微信小程序

App

1. 打开模拟器或者手机

2. 配置模拟器的端口

夜神模拟器端口号：62001
海马模拟器端口号：26944
逍遥模拟器端口号：21503
MuMu模拟器端口号：7555
天天模拟器端口号：6555

2. 运行到模拟器

注意项

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

Vue语法

模板语法

1.文本渲染

{{表达式}}
v-text=“表达式”
表达式
- 简单的js运算
  {{2+3}}
- js方法调用
  {{title.length}}
  {{title.split("").reverse().join("")}}
- 3元运算符
  < view>{{title.length>15?'长度很长':'字少事大'}}</ view>
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”
<view @click=“say”
事件传参
- 不写参数
  @click=“say”
- 等同于
  @click=“say()”
- 等同于
  @click=“say($event)”
$event 是一个固定写法代表事件对象
@click=“doit(str)” doit(str="你好"){ uni.showModal({title:str}) }

7.事件对象

$event/e

function say(e){ }
target目标对象
dataSet 组件传参
<view :data-title="title" @click="say"> function say(e){ e.target.dataset.title }

8.响应方法

uni-app页面

1.新建页面

2.页面配置

pages.json

全局样式
globalStyle
- 默认页面的样式会应用全局样式
- 页面写了style 配置，那么用的配置覆盖全局的配置
页面
pages
- path页面路径
- style 页面样式

vue选项

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

uni-app的生命周期

1.Vue的生命周期

创建

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

挂载

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

更新

beforeUpdate
updated

卸载

beforeDestroy
- 作用：
  1.移除事件监听
  2.移除停止定时器
destroyed

2.小程序的生命周期

onLoad加载

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

onShow显示

播放媒体

onReady准备

获取节点信息
像vue的mounted

onHide 后台运行

停止播放媒体

onUnload 卸载

停止事件监听与定时器

3.小程序的全局方法

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

4.app的全局方法

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

表单组件

1.button按钮

type
- primary主要
- warn警告
- default 默认
size=“mini”
disabled 是否可用

2.input

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

3.picker

mode
模式
- time时间
- date 日期
- region地区
- 日期
  start=“09:01”
  end=“21:01”
value值
@change="$event.detail.value"

4.slider滑块

value 值
max 最大
min 最小
@change="$event.detail.value"

全局vuex

路由

1.路由组件

navigator 导航

url 跳转页面的地址
open-type 打开类型
- navigate跳转
- redirect重定向
  （当前页面不留历史记录）
- navigateBack返回
- relauch 重启
- switchTab 跳转底部栏

2.路由传参

传递

url:path?name=mumu&age=18

接收

onLoad(option){}
option的值{name:“mumu”,age:18}

3. 路由api

uni.navigateTo({url})

跳转

uni.redirectTo({url})

重定向

uni.navigateBack()

uni.switchTab()

底部栏切换

uni.reLaunch()

重启

4.路由配置

tabBar

color
selectedcolor
list
pagePath
iconPath
selectedIconPath
text

5. getApp 获取当前页面

在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 }

6. getCurrentPages 获取页面栈

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

条件编译

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

模板条件编译

格式

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

条件

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

css条件编译

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

js条件编译

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

条件配置 pages.json

“style”:{"h5":{"titleNView":{"titleText":"我是H5"}},"app-plus": {"titleNView":false //隐藏导航栏}
}

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

uni-App的使用相关推荐

切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...

uni-App的使用

解释