介绍
uni-app是什么？
是基于Vue.js的端到端开发框架，开发者可以分发到iOS、Android、Web、各种小程序、高速APP应用程序等多个平台的一系列代码开发一次，到处执行。
推荐UI
u视图uni-app自2018年初发布以来，一直繁荣昌盛，社区也充满人声鼎沸，备受人们的期待。
因此，uView应运而生。 uView的目标是uni-app生态成为最好的UI框架。
关于uView命名的由来，首字母u来自于uni-app的首字母，uni-app基于Vue.js，Vue与view (扩展为ui、视图的含义)同音，同时也是view组件uu
基本组件的性能比扩展组件的性能高。
二、uni-app基础
01 基本语法
数据的展示定义：用data定义
使用：通过tempelate进行插补{}后使用。 不需要this
注意事项：属性不需要括号。 必须在属性名称前面加上‘:’。 这一点与微信小程序不同。
数据循环
在微信小程序中的使用方法
wx:for='{{数据源}}' wx:for-index='index的别名' wx : for-item='项目的别名'
在vue上的使用方法
vue-for='项目内数据源'或vue-for=' (项目，索引)项目内数据源'
view v-for=' (项目) in list ' :密钥='项目标识'
----{ item.id }
/视图
//数组
list: [
{id:0、name: '复杂的飞机'、
{id:1，名称： ' rq dym ' }、
{id:2，名称： '王五' }，
]由于需要操作和重新编译条件编译v-if:DOM，因此不适合只频繁切换v-show :样式，无论是否显示，都存在该元素
计算属性
类似于计算数据的处理界面，它减少了模板中数据的复杂逻辑操作，例如数据过滤，并删除了不渲染的数据和某些数据
//使用计算属性
视图
viewv-for=' iteminfilterlist ' :密钥=' item.id '
项目名称
/视图
/视图
//计算属性节点
计算机：
money ()。
返回' # 34； this.num
(、
过滤器列表()
//使用过滤器
return this.list.filter (item=item.id=0) )。
}
}filter ()方法通过检查指定数组中满足条件的所有元素来创建新数组。
注意： filter (不会检测空数组。 此外，filter ) )不更改原始数组。 是JS数组的方法，不是vue的过滤器。 常见的是forEach、map、filter。
02 事件
情况1 :像使用vue一样使用@click='handleClick '模板/模板
视图
view @ click=“手持点击”点击/view
/视图
/模板
脚本
导出默认值{
方法：
手柄点击()。
console.log (单击' view，触发事件并执行函数)；
}
}
}
/脚本
样式语言=' scss '
/style )。
案例2：传自定义属性
自定义属性来自微信原生小程序
<template> <view> <view data-index="11" @click="handleClick1($event)">点击1</view> </view> </template> <script> export default { methods:{ handleClick1 (event) { // event.currentTarget.dataset.index console.log(event) } } } </script> <style lang="scss"> </style>案例3：传自定义属性+普通参数放置的顺序可以灵活调整
<template> <view> <view data-index="11" @click="handleClick1($event,1)">点击1</view> </view> </template> <script> export default { methods:{ handleClick1 (event,index) { console.log(event); console.log(index); } } } </script> <style lang="scss"> </style>03 组件
组件的使用流程定义、引入、注册、使用。
组件的传参父向子：父向子先父，属性
子向父：子向父先子，事件
uni-app全局数据传递
第一种方式：在main.js中定义，使用this.baseUrl 直接调用Vue.prototype.baseUrl = 'www.baidu.com ' + ' Vue.prototype.baseUrl'
第二种方式：在App.vue中定义，使用getApp().globalData.baseUrl 调用globalData:{ baseUrl:'www.baidu.com ' + ' getApp().globalData.baseUrl' }
第三种方式：vue中vuex的用法，这一点参考vue官方文档。
第四种方式：本地存储，请查看官方文档API。
组件的插槽
父向子通过 slot标签占位 传递具体的标签注意：输入框input没有颜色，表面看不见，slot标签需要被view标签包裹，否则不会显示。
04 生命周期对比
uni-app的生命周期
参考链接
应用 onlaunch 当uni-app 初始化完成时触发 App.vue
页面 onLoad 监听页面加载 页面.vue
组件 created 当组件创建完成 mounted 当组件创建完成完成 组件.vue
微信小程序的生命周期
参考链接
vue的生命周期
参考链接
三、示例项目
01 命令行创建项目
// 安装vue脚手架 npm install -g @vue/cli // 创建uni-app项目 vue create -p dcloudio/uni-preset-vue my-project // 模板选择 选择默认模板 // 运行生成mp-weixin文件夹 npm run dev:mp-weixin npm run dev:h5 // 直接在浏览器输入本地URL访问 // 如果是微信小程序，则需要导入生成的文件夹mp-weixin编译运行，位置：my-projectdistdevmp-weixin 打开微信开发者工具
H5运行效果
微信小程序运行效果
微信小程序运行效果
02 HBuilder X面板创建项目
03 文件结构
04 基本配置、清理
Sass样式使用配置
npm install sass-loader node-sass
compile-node-sass编译插件安装
编译scss/sass为css。uni-app编译或对文件右键-外部命令编译时使用