uni-app概述

由dcloud 公司开发的 多端融合框架；1次开发 多端运行；技术架构：Vue语法+小程序的api

Hybrid混合开发

• App端

HTML+

nvue（原生view）

native.js(js原生沟通的桥梁)

weex

内置ios/安卓的模块使用

• H5端：h5专用api
• 各种小程序（微信为主）

界面

 新建项目

 运行多端

H5

 

 小程序

• 01 打开开发工具的服务端口
• 02 HBuilderx配置 微信开发工具的地址
• 
• 03 配置微信小程序id
• 04 运行到微信小程序

 App

• 01 打开模拟器或者手机
• 02 配置模拟器的端口

  • 夜神模拟器端口号：62001 

  • 海马模拟器端口号：26944

  • 逍遥模拟器端口号：21503

  • MuMu模拟器端口号：7555 

  • 天天模拟器端口号：6555

    
• 03 运行到模拟器

 

 注意项：

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

模板语法：

文本渲染：

        v-text=“表达式”

        表达式

简单的js运算：{{2+3}}

js方法调用 {{title.length}} {{title.split("").reverse().join("")}}

3元运算符 <view>{{title.length>15?'长度很长':'字少事大'}}</view>

         v-html 富文本

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

 列表选项

• 字符串，数字，列表，对象都可以遍历
• <view v-for="(item,index) in list" :key="index">{{index+1}}  {{item}}</view>
• 一定要保证兄弟元素间的key值是唯一

属性绑定

<button v-bind:disabled=“true”>
<button :disabled="true">

 表单绑定

默认 :value="单向绑定"

input v-model=“双向绑定”

@change=“$event.detail.value” 事件，事件的值$event.detail.value

 事件

• 事件绑定：  <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
  }

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 日期
      • start="09:01" 
      • end="21:01"
    • region地区
  • value值
  • @change="$event.detail.value"
• 滑块：slider

  value 值	max 最大
  min 最小

路由 

路由组件

• 导航：navigator
  • url 跳转页面的地址
  • 打开类型：open-type

    navigate跳转	redirect重定向 （当前页面不留历史记录）
    navigateBack返回	relauch 重启
    switchTab 跳转底部栏

            

路由传参

• 传递

  url:path?name=mumu&age=18

• 接收

  onLoad(option){}
  option的值{name:"xiaxi",age:23}

路由api

跳转：uni.navigateTo({url})

重定向uni.redirectTo({url})

返回：uni.navigateBack()

底部栏切换：uni.switchTab()

重启：uni.reLaunch()

路由配置

         配置底部导航栏：tabBar

                在 pages.json 中，配置 tabBar
                注意：pages 的第一个 path 必须与 tabBar 的第一个 pagePath 相同否则不显示底部导航

"tabBar": {
        "color": "#7A7E83", // tab 上的文字默认颜色
        "selectedColor": "#3cc51f", // tab 上的文字选中时的颜色
        "borderStyle": "black", // tabbar 上边框的颜色，可选值 black/white
        "backgroundColor": "#ffffff",  // tab 的背景色
        "list": [{ // 最少2个、最多5个 tab
            "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
            "iconPath": "static/tabbar/home.png", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
            "selectedIconPath": "static/tabbar/home-active.png", // 选中时的图片路径
            "text": "首页" // tab 上按钮文字
        }, {
            "pagePath": "pages/my/my",
            "iconPath": "static/tabbar/my.png",
            "selectedIconPath": "static/tabbar/my-active.png",
            "text": "生命"
        }]
    }

获取当前页面：getApp

• 01 在App.vue：定义globalData:{num:100}
• 02 要使用的页面获取app

  var app  = getApp()

• 03获取globalData的值

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

• 04 更新globalData值

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

获取页面栈

条件编译

        条件编译目的:不同的平台展示不同特性与功能

• 模板条件编译
  • 格式<!-- #ifdef H5 -->内容<!-- #endif -->
  • 条件：

    APP--App端

    H5--网页

    MP--小程序或MP-WEIXIN--微信小程序

    <template>
    	<view>
    		<view>条件</view>
    		<!-- #ifdef H5 -->
    		<view>H5：下载APP获取优惠卷</view>
    		<!-- #endif -->
    		
    		<!-- #ifdef MP -->
    		<view>WX：小程序用户获取优惠卷</view>
    		<!-- #endif -->
    		
    		<!-- #ifdef APP -->
    		<view>app：优惠卷0.5元</view>
    		<!-- #endif -->
    		
    	</view>
    </template>

• css条件编译

  <template>
  		<view class="active">我是一行文字</view>
  </template>
  <style>
  /* #ifdef APP-PLUS */
  .active{color: red}
  /* #endif */
  
  /* #ifdef H5 */
  .active{color: lightblue}
  /* #endif */
  
  /* #ifdef MP */
  .active{color: dodgerblue}
  /* #endif */
  </style>

• js条件编译

  <template>
      <view>
  		<button size="mini" @click="say()">你好</button>
      </view>
  </template>
  <script>
  	export default {
  		data() {
  			return {
  				
  			}
  		},
  		methods: {
  			say(){
  				// #ifdef APP-PLUS
  				uni.showModal({
  					title:"你好App用户"
  				})
  				// #endif
  				// #ifdef MP
  				uni.showModal({
  					title:"你好微信用户"
  				})
  				// #endif
  				// #ifdef H5
  				uni.showModal({
  					title:"你好手机用户"
  				})
  				// #endif
  			}
  		}
  	}
  </script>

• 跨平台配置条件配置在页面pages.json

                 在vue页面

<template>
    <view>
         <!-- #ifdef MP-WEIXIN || APP -->
		 <navigator url="/pages/condition/we">微信-App专有        </navigator>
		 <!-- #endif -->
     </view>
</template>