一. 项目运行

hybrid开发是1套代码编译多端，所以运行时需要告诉uniapp，你想要运行到哪个平台，是H5浏览器，还是Android设备，或者IOS设备，和各类小程序

二. 项目架构

.hbuilderx -- hbuilderx的配置文件

pages -- 页面文件夹（最重要）

static -- 静态资源

unpackage -- uniapp编译后产生的

App.vue -- 公共文件(全局样式,全局生命周期)

index.html -- 静态网页容器

main.js -- 入口js

manifest.json -- 多端配置

pages.json -- 项目全局配置（重要）

uni.scss -- 常用样式变量

三. Uniapp的语法&指令

uniapp是基于vue.js进行二次封装的框架，所以大量语法与vue.js框架保持一致
组件化: 同vue保持一致: .vue文件创建组件template结构 script数据 style样式
MVVM-双向绑定: 同vue保持一致: VM实现双向绑定，修改data数据，自动刷新视图
数据驱动&&最小粒度更新: 同vue保持一致: 采用{{ }} mustache模板语法，每次变化仅会最小粒度更新
指令: 同vue保持一致：v-if v-for v-show v-bind v-on v-html等
结构标签（与vue的不同点）: uniapp为了适配各类小程序(因为小程序的标签有一些特殊能力,HTML标签没有),所以采用的标签都是小程序的原始标签

        view
	swiper
	swiper-item
	navigator
	button
	icon
	text
	.....

四. UNIAPP的生命周期

生命周期的有些函数是需要区分平台,在部分平台有效,部分平台无效
pages页面生命周期

onInit: 初始化加载(比onLoad更早) 百度小程序专享生命周期,其他没有
onLoad: 初始化加载
onShow: 页面显示
onReady: DOM加载完毕
onHide: 页面隐藏
onUnload: 页面卸载(删除DOM)
onPullDownRefresh: 拉头
onReachBottom: 下拉到底部
onShareAppMessage: 点击分享

components组件生命周期

beforeCreate:  数据创建前
created: 数据拦截完毕
beforeMount: 视图挂载前
mounted: 初次挂载完毕
beforeUpdate: 数据变化,即将开始更新视图
updated: 视图更新完毕(用户可以看到新的视图)
beforeDestory: 销毁前
destoryed: 销毁完毕

五. uniapp的组件封装与使用

确定要封装的部分(主动观察UI界面哪些部分在重复: >=2个页面都在使用)
把此部分抽取为组件文件components,书写组件的结构/行为/样式
使用Props传递数据,让组件实现真正的复用(多元化变化)

<uni组件 a="xx" :b="xxx" :c="xxxx" />

六. Uniapp的API系列

uni-app 基于 ECMAScript 扩展了 uni 对象，并且 API 命名与小程序保持兼容。uniapp全局内置对象为：uni。几乎所有API都绑定在uni对象上
发送请求uni.request

uni.request({

    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。

    data: {

        text: 'uni.request'

    },

    header: {

        'custom-header': 'hello' //自定义请求头信息

    },

    success: (res) => {

        console.log(res.data);

        this.text = 'request success';

    }

});

获取位置uni.getLocation
需要先让用户授权，才能正常获取当前经纬度

七. UNIAPP的UI框架

Jquery: BootStrap(pc端)  JqueryMobile(移动端)
Vue: Element(pc端) VantUI(移动端)
React: AntDesign(pc端)  AntDesignMobile(移动端)
微信小程序: WeUI(移动端)
Uniapp: uView(移动端)

八. UNIAPP工程化(不区分先后)

1. 引入ui框架

uView(自己看文档下载) www.uviewui.com/components/…

2. 路由配置

pages.json 
"tabBar": {
	...其他配置
	"list":[
		{"text": "按钮文字", 
                "pagePath": "点击切换的页面路径",
                "iconPath": "默认图标", 
                "selectedIconPath": "选中图标"}
		]
            }

tabbar: 只能有2-5个按钮图标
uniapp的静态资源只能放在static文件夹下
图标只支持本地图片,<=40kb,不支持网络图片及字体图标

3. API封装

3.1 配置服务器IP

// http.js     
export const SERVER_IP = 'xxxx'

3.2 请求+拦截器配置

// request.js
export const req = (...参数) => {
//--------请求拦截器的代码----------//
			
			
	return new Promise((resolve, reject) => {
		uni.request({
			....参数,
			success(res){ 
                        //---响应拦截器的代码---//
			resolve(res) },  //成功
			fail(err){ reject(err) } //失败
		})
	})
}

3.3 业务逻辑封装

根据自己不同的业务,新建业务.js

import { req } from './request'

export const $_函数名1 = (...参数) => req(...参数)
export const $_函数名2 = (...参数) => req(...参数)

九. VUE的slot插槽

1. slot默认插槽

正常情况,双标签中的元素内容是不会显示在子组件中的

<Hello><button>点我</button></Hello>
//button是不会显示的
		
在Hello.vue中
<template>
....
<slot/>
//slot标签所在位置就会把所有元素内容插入到指定位置 
====<button>点我</button>
</template>

2. slot具名插槽

如果有多个节点要插入到不同位置, 可以节点署名

<Hello>
    <template v-slot:myabc>    //v-slot:给结构署名
	<text>11</text>
	...其他节点
    </template>
			
    <template v-slot:myddd>      
	...其他节点
    </template>
</Hello>
		
在Hello.vue中
<template>
    <slot name='myabc'/>   //这里会解析myabc的template
    ...其他节点 
    <slot name='myddd'/>   //这里会解析myddd的template
</template>

3. slot作用域插槽 (把子组件的值传递给父元素进行使用)

子组件.vue
<template>
    <slot name='myabc' :data="xxxx" :arr="xxxx"/> 
</template>
		
父组件.vue 
<Hello>
    <template v-slot:myabc="{ data, arr }"> 
    //data就是挂载在slot上的data_key, arr同理
	<text>11{{ data }}</text>
	<节点 v-for="(item, index)  in arr" />
	...其他节点
    </template>
</Hello>

uni-app