uni-app

官网

https://uniapp.dcloud.net.cn/

解释

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

准备工具

1.Hbuilderx (开发 与编译工具)
2.微信小程序开发工具(微信小程序预览测
3.安卓模拟器/真机  运行app

界面解释

新项目创建示例

运行多端

H5

02.

小程序

01打开开发者工具的服务端口

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

03 配置微信小程序id

04 运行到微信小程序

App

01 打开模拟器或者手机

02 配置模拟器的端口

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

03 运行到模拟器

⚠注意项

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

Vue语法

模板语法

1.文本渲染
   1.1 {{表达式}}
   1.2v-text="表达式"
   1.3表达式
        简单的js运算{{2+3}}
        js方法调用
        	 {{title.length}}
        	{{title.split("").reverse().join("")}}
        3元运算符
        	 <view>{{title.length>15?'长度很长':'字少事大'}}</view>
   1.4v-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.事件
    6.1事件绑定:  <view v-on:click="响应"
    6.2简写绑定:  <view @click“事件响应”
    6.3事件行内处理  <view @click="num++"
    6.4事件响应函数（函数在methods定义）
         <view @click= "say"
         <view @click= "say"
   6.5事件传参
        //不写参数   @click=" say"
        //等同于      @click="say()"
        //等同于      @click="say($event)"
        //$event 是一个固定写法 代表事件对象
        //@click="doit(str)"
         doit(str="你好"){
         uni.showModal(title:str})
         }

    6.6事件对象($event/e)
        1)function say(e){}
        2)target 目标对象
       	3)dataSet 组件传参
         	<view :data-title="title" @click="say">
         	function say(e){
         	e.target.dataset.title
         }
7.响应方法

nui-app页面

1.新建页面

2.页面配置(pages.json)

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

vue选项

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

uni-app的生命周期

1.vue的生命周期
    1.1创建
        beforeCreate
        🚩created
            可以使用this，没有dom
            作用：1.初始数据 2.注册监听事件 3.开启定时器 4.ajax请求
    1.2挂载
        beforeMount
        🚩mounted
            可以操作dom（节点）
            作用：1.操作dom 2.ajax请求
    1.3更新
        beforeUpdate
        updated
   1.4卸载
        🚩beforeDestroy
            作用： 1.移除监事件听 2.移除停止定时器
        destroyed
2.小程序的生命周期
   2.1 onLoad //加载
        能够获取页面的参数
        开启ajax，定时器，事件监听
        像vue的created
    2.2 onShow  //显示
        播放媒体
    2.3 onReady 准备
        获取节点信息
        像vue的mounted
    2.4 onHide  //后台运行
        停止播放媒体
    2.5 onUnload  //卸载
        停止事件监听与定时器
3.小程序的全局方法
   3.1 onPullDownRefresh //下拉刷新
   3.2 onReachBottom() // 触底更新
   3.3 onShareAppMessage //右上角分享
   3.4 onPageScroll //页面滚动
   3.5 onShareTimeline //分享到朋友圈
4.app的全局方法
    onBackPress //手机的返回键被点击
    onNavigationBarButtonTap //导航栏按钮被点击
5.组件-表单
       5.1 button //按钮
            type:{primary主要 ；warn警告； default默认}
            size="mini"
            disabled是否可用
      5.2  input
            value值
            v-model对表单双向绑定
            @change="$event.detail.value"
            placeholder 提示文本
       5.3 picker
            mode //模式
                 time时间
                 date日期
                 region地区
                 日期
                 start="09:01”
                 end="21:01"
            value值
            @change="$event.detail.value"
       5.4 slider //滑块
             value值
             max最大
             min最小
            @change=”$event.detail.value“
6.全局vuex

小程序api

uni.showModal({title})

路由

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}} //跳转
    uniredirectTo{{urI} //重定向
    uni.navigateBack() //返回
    uniswitchTab() //底部栏切换.
    uni.reL aunch() //重启
4.路由配置
    tabBar
       1. color
       2. selectedcolor
       3.list
           3.1 pagePath
           3.2 iconPath
           3.3 selectedIconPath
           3.4 text
5.获取当前页面 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
	     }
6.获取页面栈 getCurrentPages
    var page = getCurrentPages();
       // 获取当前的页面栈，是一个数组(1-5)
    uni.navigateBack({delta:page.length})
    page[page.length-1]获取当前页面的信息
      (不要去修改)

条件编译

1.目的：不同的平台展示不同特性与功能
2. 模板条件编译
   2.1 格式
        <|-- #ifdef H5 ->
        内容
        <!-- #endif ->-
   2.2 条件
        APP  //App端
        H5   //网页 
        MP //小程序
            MP-WEIXIN  //微信小程序
3. css条件编译
     #ifdef APP 
          .active{color:red}
     #endif 
4.js条件编译
         // #ifdef APP-PLUS
         uni.showModal({
                 title:"你好App用户"
         
         })
         // #endif
5.条件配置(pages.json)
    5.1
         "style":{
           "h5":{
               "titleNView":{
                   "titleText":"我是H5"
                }
           },
           "app-plus": {
               "titleNView":false //隐藏导航栏
          }
        }
    5.2
        // #ifdef MP-WEIXIN	|| APP	
         {
                 "path":"pages/condition/we",
                 "style":{
                         "navigationBarTitleText": "小程序专有页面"
                 }
         },
         // #endif

一切以官网为准🤝网址在最上面