一.UNIAPP: 最新一代Hybrid开发其中的热门框架, 由Dcloud公司研发, 目前国内混合开发top3的框架
节点驱动时代 - DOM操作,直接获取DOM并操作
数据驱动时代 - 数据驱动,把要变化的值抽到状态管理,修改数据自动更新视图
混合开发时代 - Hybrid,1套代码编译为移动端多端(H5APP,各类小程序,APP)
uniapp: vue的语法 + 小程序的标签, 书写移动端全平台应用(H5,小程序系列,APP)
二.vue、uniapp和微信小程序的区别
Vue：阿里团队推出的数据驱动框架（PC、H5）
uniapp:Dloud 公司推出的Hybrid框架、基于vue进行的二次封装（h5、各类小程序、Android-app、IOS-app）
微信小程序：腾讯团队推出的小程序技术栈（微信小程序）
三.UNIAPP项目创建:
1. 下载HbuilderX IDE
2. 新建 - 项目 - uniapp
3. 运行 - 根据本次开发需求,运行浏览器||小程序IDE||手机||手机模拟器
(运行到微信开发平台，在齿轮-安全-服务端开启）
四.UNIAPP的数据驱动: UNIAPP是基于VUE(MVVM)进行二次封装的全新框架, 它俩的数据驱动保持一致
1. 把要变化的数据抽取到data中
2. 使用{{ }} , this.xxx可以访问到此动态数据
3. 直接修改this.xxx, 改变数据并自动通知视图更新(因为有MVVM的原因)
MVVM: 是一种架构模式, 把一个应用拆分为Model(数据模型), View(视图层), ViewModel(视图模型层)
1. 循环遍历Data对象中所有的key, 使用Object.defineProperty进行属性拦截
let obj = {
a: 1,
b: 2
}
Object.defineProperty(obj, 'a', {
get(){
console.log('a被获取了')
},
set(newval){
console.log('a被修改了)
}
})
obj.a //就会触发上面的get函数
obj.a = 1 //就会触发上面的set函数
2. 修改Data对应值时, 触发setter函数
3. setter通知watch函数, 进行视图render更新
五.UNIAPP的标签:
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组件封装:
1. 抽取复用组件到components中
components/组件.vue
2. 书写组件的结构/行为/样式
3. 通过props让组件实现多元化
<uni组件 a="xx" :b="xxx" :c="xxxx" />
八.框架结合什么UI
Jquery: BootStrap(pc端) JqueryMobile(移动端)
Vue: Element(pc端) VantUI(移动端)
React: AntDesign(pc端) AntDesignMobile(移动端)
微信小程序: WeUI(移动端)
Uniapp: uView(移动端)
九.UNIAPP的UI框架(UI框架都会搭配JS框架来使用)
UI框架: uView(https://www.uviewui.com/components/intro.html)
1.安装uview npm install uview-ui@2.0.31
2.安装sass 和sass加载器
npm i sass -D、npm i sass-loader@10 -D
3.main.js
import uView from "uview-ui";
Vue.use(uView);
4.在项目`src`目录的`uni.scss`中引入此文件。
@import 'uview-ui/theme.scss';
5.在`App.vue`中**首行**的位置引入
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
6.在项目`src`目录的`pages.json`
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
十、UNIAPP工程化(不区分先后):
1.路由配置(tabBar):
pages.json
"tabBar": {
...其他配置
"list":[
{"text": "按钮文字", "pagePath": "点击切换的页面路径", "iconPath": "默认图标", "selectedIconPath": "选中图标"}
]
}
//tabbar: 只能有2-5个按钮图标
//uniapp的静态资源只能放在static文件夹下
//图标只支持本地图片,<=40kb,不支持网络图片及字体图标
2.API封装:
1. 配置服务器IP(http.js)
export const BASEURL = 'http://127.0.0.1'
2. 请求+拦截器配置(request.js)
export const req = (url, method, data) => {
//--------请求拦截器的代码----------//
uni.showLoading({
title:"极速加载中"
})
return new Promise((resolve, reject) => {
uni.request({
....参数,
success(res){
//--------响应拦截器的代码----------//
resolve(res)
}, //成功
fail(err){ reject(err) } //失败
})
})
}
3. 业务逻辑封装(根据自己不同的业务,新建 业务.js )
import { req } from './request'
export const $_getlist = () => request('/aaa', 'GET')
十一、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>
十一、props通信
1.在父组件中，给子组件绑定自定义属性
<m-button text='联系我们'>点我点我</m-button>
2.子组件中使用props，接受父元素传入的值，使用
props: { text: { type: String,default: '' } }
十二、编译多端（H5，小程序，Android/IOS） 1.H5（点击上方菜单栏：发行-网站） * 项目初次发行，需要manifest.json中，点击 重新获取 按钮，获取uni-app应用ID（自动获取）
最后，当打包完毕后，再控制台会输出打包完的地址，点击链接，整个文件夹即为发布文件夹
2.各类小程序 各大厂商小程序均以微信小程序为标准，所以整体流程和微信小程序几乎保持一致。下面以微信小程序来演示完整打包流程。
a. 打包为微信小程序，点击上方菜单栏：发行-小程序/微信
b. 点击发行，编译完后会自动导出到微信小程序开发者IDE，点击上传按钮即可上传代码，然后提交审核（整体流程同原生小程序完全一致）
3. Android/IOS a. 点击manifest.json，配置APP的名称，描述，版本号
b. 配置App图标，从UI/网上下载获取图标，自动生成各类格式图标
c. 点击发行 - 原生App云打包
点击打包后，进入云排队，等待排队结束，打包后会出现apk安装包下载链接（Android安装包
下载完成，直接把APK包发送到手机上，或使用数据线，拖入手机中，安装即可！!
快来看看自己的第一个APP应用吧！！
