uni 笔记

解释

由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

3 运行到模拟器

注意项

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

Vue语法

模板语法

文本渲染

{{表达式}}

v-text=“表达式”

表达式

简单的js运算 {{2+3}}
js方法调用{{title.length}}{{title.split(“”).reverse().join(“”)}}
3元运算符{{title.length>15?‘长度很长’:‘字少事大’}}

v-html 富文本

条件渲染

v-if
v-else-if
v-else
v-show
通过三元运算符

列表选项

字符串，数字，列表，对象都可以遍历
{{index+1}} {{item}}
一定要保证兄弟元素间的key值是唯一

属性绑定

#### 表单绑定 默认 :value="单向绑定" input v-model=“双向绑定” @change=“$event.detail.value” 事件，事件的值$event.detail.value #### 事件 ##### 事件绑定：

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

响应方法

uni-app页面

新建页面

页面配置pages.json

globalStyle全局样式

默认页面的样式会应用全局样式
页面写了style 配置，那么用的配置覆盖全局的配置

pages 页面

path页面路径
style 页面样式

vue选项

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

uni-app的生命周期

Vue的生命周期

创建

beforeCreate

created

可以使用this，没有dom
作用：

1. 初始数据
2. 注册监听事件
3. 开启定时器
4. ajax请求

挂载

beforeMount

mounted

可以操作dom（节点）
作用：

1. 操作dom
2. ajax请求

更新

beforeUpdate

updated

卸载

beforeDestroy

作用：

1. 移除事件监听
2. 移除停止定时器

destroyed

小程序的生命周期

onLoad加载

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

onShow显示

播放媒体

onReady准备

获取节点信息
像vue的mounted

onHide 后台运行

停止播放媒体

onUnload 卸载

停止事件监听与定时器

小程序的全局方法

onPullDownRefresh 下拉刷新

onReachBottom()触底更新

onShareAppMessage右上角分享

onPageScroll页面滚动

onShareTimeline分享到朋友圈

app的全局方法

onBackPress手机的返回键被点击

onNavigationBarButtonTap导航栏按钮被点击

组件表单

button按钮

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

input

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

picker

mode模式

time时间
date 日期
region地区

日期

start=“09:01”
end=“21:01”

value值

@change=“$event.detail.value”

slider滑块

value 值

max 最大
min 最小

@change=“$event.detail.value”

全局vuex

路由

路由组件

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()重启

路由配置tabBar

		color
		selectedcolor
		list
			pagePath
			iconPath
			selectedIconPath
			text

获取当前页面getApp

	1 在App.vue定义globalData:{num:100}
	2 要使用的页面获取appvar app  = getApp()
	03获取globalData的值
	    onShow(){
	    this.num = app.globalData.num
	    }
	4 更新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

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

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