uni-app基础知识

介绍

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

介绍