---【uni-app】:
是一个使用vue。js开发所有前端应用的框架，开发者编写一套代码，可发布到ios,android,H5,以及各种小程序，
（微信/支付宝/百度/头条/QQ/钉钉）等多个平台
---【环境搭建】：
1，安装APP开发版HBuilderX
2，安装微信开发者工具
---【使用HBuilderX初始化项目】：
1，点击HBuilderX菜单栏文件》项目》新建》
2，选择uni-app填写项目名称，项目创建的目录
---【项目的运行】 可以打包成H5网页，安卓/IOS应用，和各种小程序
1，点击运行，选择运行在浏览器
2，点击运行，运行在小程序》运行在微信开发者工具
-第一次运行在微信开发者工具时需要注意两个问题，
1，第一次运行会弹出一个框需要填写微信开发者工具的路径
2，右键桌面的微信开着工具，打开文件夹所在位置，复制路径，然后把路径粘贴到弹出框里
设置完路径打开微信小程序可能会报错，打不开，须在微信开发者工具里进行设置
1，点击上方菜单的设置》安全设置》端口号，选择开启
3，运行在安卓手机/ios手机，点击运行》运行在手机或者模拟器，前提是手机用数据线连接电脑
---【项目目录介绍以及开发规范简介】：
1，page文件夹，存放页面的文件夹
2，static文件夹，存放静态资源的文件夹 /图片/字体图标，等
3，unpackage>dist 存放最终打包输出的文件
4，App.vue 文件 是项目的根组件 是页面的入口文件，可调用应用的生命周期函数
5，main.js 文件 是项目的入口文件 ，项目加载首先会加载main.js
6，manifest.json 文件 用来配置应用的一些打包的东西
7，pages.json 文件 用来设置整个项目的页面的存放路径，以及窗口的外观
8，uni.scss 文件 常用的样式变量
开发规范：
1，页面文件遵循vue中文件组件 ，后缀为vue
2，组件标签靠近小程序规范 详见官方文档
3，接口能力，靠近微信小程序规范，但需前缀wx替换为uni 详见官方文档
4，数据绑定及事件处理同vue.js规范，同时补充了app及页面的生命周期
5，为兼容多端运行，建议使用flex布局 进行开发
---【全局外观的样式，配置】：pages.json
1,'globalStyle":{
"navigationBarBackgroundColor":"#7FFF00" //设置顶部导航栏的背景色 十六进制
"navigationBarTextStyle":"black" //设置顶部导航栏标题的文字颜色 仅支持black/white 字符串
"navigationBarTitleText":"xxxxxx" //自定义标题的文字
"enablePullDownRefresh":true //是否开启全局下拉刷新 此时向下拉的部分，会出现背景色通过下边的属性可设置背景的颜色
"backgroundColor":"#7CCD7C" //设置下拉出来的背景色， 十六进制
"backgroundTextStyle":"dark" //设置下拉loading的样式： 仅支持dark/light 暗色和亮色的loading
"onReachBottomDistance":50 //页面上拉触底事件触发时距页面底部的距离，仅支持px
}
---【创建新页面和页面的配置】：pages.json
1，右键page文件夹，新建cart文件夹，在cart文件夹中新建cart.vue页面
2，在全局pages.json 文件中加入页面的路径，"pages":[{"path":pages/cart/cart.vue}] pages数组的第一项为默认展示页
页面的配置：style 配置局部页面的独有外观样式
“pages”:[
{
"path":"pages/cart/cart.vue",
"style":{
"navigationBarTitleText":"xxxxxx" //自定义标题的文字,style子页面配置和全局的配置一样，会覆盖全局外观配置的样式
"h5":{ //h5页面单独设置特有的样式 //还有微信小程序，百度，之类的单独设置的样式 请查看官方文档
"pullToRefresh":{ //下拉刷新的loading 颜色
"color":"#7D26CD"
}
}
}
}
]
---【配置基本的tabbar】：在pages.json 文件里配置tabbar
"tabBar":{
"list":[ //是一个数组，数组里以对象方式放的是每一个tab
{
"text":"首页", //tab的文字
"pagePath":"pages/index/index", //点击跳转的路径
"iconPath":"static/tabs/home.xxx" , //设置默认的图标
"aslectedIconPath":"static/tabs/home2.xxx" 设置选中时的图标
}
],
"color":"#xxxxx" , //tab上的文字默认颜色 和list同级
"selectedColor":"#xxxxxx" //tab上的文字选中时的颜色
“backgroundColor”:"#xxxxx" //tab的背景色
"position":"top" //移到页面上方切换栏， 图标会消失
}
---【condition启动模式配置】：在pages.json
"condition":{ //配完之后在开发者工具上 点击普通编译，选择name=详情页，就跳转详情页了
"current":0 //当前激活的模式，list节点的索引值，， 选择的是list的【0】
"list":[
{
"name":"详情页",
"path":"pages/xxx/xxx", //路径
"query":"id=80" //参数
}
]
}
---【uni-app 组件】：
1，<text></text> 相当于spann标签
=selectable 布尔值 表示可以选中复制文字
=space="emsp" 显示连续空格 ensp中文子一半/emsp中文字符大小/nbsp 根据字体设置的空格大小
2，<view></view> 相当于div
=hover-class="xxx" .xxx{background:red} //按下去会加入的样式的样式， 背景变红
=hover-stop-propagetion //加上这个属性可阻止事件冒泡
=:hover-start-time="2000" //点击之后过2秒触发事件
=:hover-stay-time = "2000" //点击离开之后，过两秒样式才消失
3，<button></button> 按钮组件
=<button size="mini">按钮</button> 小号按钮，默认是沾满
=<button type="primary">按钮</button> 蓝色按钮
=<button plain></button> 按钮背景色透明
=<button disabled></button> 按钮禁止点击
=<button loading></button> 旋转的圆圈
4，<image></image> 图片组件
=<image src="http://t.zoukankan.com/xxxxxxx"></image> 图片默认宽高为 320/240px
=<image mode="aspectFit"></image> 保持纵横比例，可以完整的显示出来
=<image mode="aspectFill"></image> 外层容器，的宽度贴满，高度剪掉了
5，原生小程序的组件也可以用。例如轮播图等
---【样式的学习】：
=使用@import url（） 来导入外联样式表 page相当于body节点
=定义在App.vue中的样式为全局样式，在pages目录下的vue文件中定义的样式为局部样式，并会覆盖App.vue中相同的选择器
---【使用字体图标】：
1，把阿里字体的文件夹放入静态文件夹中、在iconfont.css文件中把url里的路径改成前缀是 -@/static/fonts
2，在app.vue的样式中引入inconfont.css /// @import url (''./static/fonts/iconfonts.css)
--[使用sass]:安装插件
1，在上方菜单的工具》插件安装》选择sass编译 》安装 //安装成功直接保存 ，直接成功直接使用
---【uni-app 的数据绑定】：和vue 一摸一样，把数据定义在data中
export default {
data（）{
return{
msg:"hello-nui"
}
}
}
---【插值表达式 v-bind/基本的运算，三元运算符，v-for】 和vue一样
---【绑定事件，事件对象event，方法传参数和事件对象(20,$event)】和vue一样
---【关于键盘事件的问题】：e.target.keyCode进行响应但是不能响应回车。
---【input 回车事件响应】<input type="text" v-model="str" @confirm="ass"/> 要使用confirm
---【应用的生命周期函数】： 写在APP。vue 入口跟组件里定义
1，onLaunch 应用打开 初始化完成时触发，只触发一次 首先
2，onShow 应用启动，应用显示出来了 或从后台进入前台显示 然后 =》会触发多次
3, onHide 从前台进入后台触发 应用隐藏了
---【页面的生命周期函数】：
1，onLoad 监听页面加载 可以拿到上个页面传递过来的参数（option） 首先
2，onShow 监听页面显示 然后
3，onReady 监听页面初次渲染完成 其次
4，onHide 监听页面隐藏
5，onUnload 监听页面卸载
6，onPullDownRefresh 监听用户下拉动作页面需开启下拉刷新功能，用于下拉刷新》处理完数据刷新后，uni.stopPullDownRefresh（）方法可停止下拉刷新
6-1：点击事件触发下拉刷新，在事件中，调用 uni.startPullDownRefresh（）方法来开启下拉刷新
7，onReachBottom 页面滚动到底部触发，配合onReachBottomDistance可设置距离底部的距离 常用于上拉加载下一页数据
---【发送get请求】：uni.request（object）
1，uni.request(url:'xxxxx',sussers(res){console.log(res)})
培训讲的方法，nui.request({url:"xxxx"}).then（(res)=>{console.log(res)}）
---【设置分包】：
在page.json 里使用subPackages 设置分包
---【数据缓存】：
1，uni.setStorage 设置缓存 uni.setStorage（{key:"id",data:80,succsee(){存成功的回调函数} }）
let idd = uni.setStorageSync（id） 同步获取数据的方法
2，uni.getStorage 获取缓存 uni.getStorage（{key:"id",succsee(){获取成功的回调函数} }）
3, uni.removeStorage 删除缓存 uni.removeStorage（{key:"id",succsee(){删除成功的回调函数} }）
---【图片的上传和预览】：uni.chooseImage（object） 从本地相册选择图片或使用相机拍照 具体可参考官文的媒体模块
<button @click = "chooseImg">上传图片</button>
methods:{
chooseImg(){
uni.chooseImage（{
count:5， //限制上传图片的数量 在浏览器限制不了个数
success：res=>{上传成功的回调函数 ---》this.imageArr = res.temFilePaths 可拿到上传成功的图片路径}
}）
} }
---【图片的预览】：uni.previewImage（object） 点击图片会 会显示点击的图片进行预览
《image @click = "previewImag"> 给点击的图片绑定点击事件
previewImg(current){ //点击图片传过来图片的地址
uni.previewImage（{
current:current，
urls:this.imgArr //所有的图片预览
loop:true //可循环预览 在APP上可以
}）
}
---【条件编译 跨端兼容】：
跨端兼容：
按照uni-app规范开发即可保证多平台兼容，大部分业务均可直接满足
但是：1，大量写if else 会造成性能低下 2，编译到不同工程后二次修改，会让后续升级变得很麻烦
uni.app提供了条件编译手段，可在一个工程里优雅的完成平台个性化实现
条件编译： 具体可参考 官文 的 条件注释实现跨端兼容
是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里的代码编译到不同平台
写法是 以 #ifdef加平台标志 开头 以#endif 结尾
<!-- #ifdef H5-->
<view>我希望旨在H5页面中看见</view>
<!-- #endif -->
---【导航跳转 和传参】：声明式跳转 // 编程式跳转
声明式跳转：navigator
<navigaor url="/pages/detail/detail?id=80&age = 19">跳转至详情页</navigator> 点击跳转到了详情页，带返回箭头 不能跳转到tab 组件的页面
在生命周期函数里拿到参数 onLoad(options){ console.log(option)} 拿到传来的参数
<navigaor url="/pages/detail/detail" open-type = "redirect">跳转至详情页</navigator> 点击跳转到了详情页当前页面关闭，不带返回箭头 不能跳转到tab 组件的页面
<navigaor url="/pages/message/message" open-type = "switchTab">跳转至信息页</navigator> 跳信息页，时候tab组件上的页面
编程式跳转：
<button @click = "goDetail"> 跳转至详情页</button>
goDetail(){
uni.navigateTo（{
url:"/pages/detail/detail?id=20" //点击挑战到了详情页 带返回箭头 普通页面 不能跳转tab组件页面
}）
}
goDetail(){
uni.switchTab（{
url:"/pages/message/message" //点击挑战到tab页面，关闭其他非tab页面
}）
}
goDetail(){
uni.redirectTo（{
url:"/pages/message/message" //点击挑战到详情页，关闭当前页面
}）
}
---【组件的使用创建】：
和vue一样，其他组件通过 importd来导入，然后注册组件
1，import login from "@/components/text.vue"
2,conpinte:{ login }
---【组件的生命周期函数 】：和vue的一样
---【组件之间的通讯方式】：
1，父传子 绑定数据 props 来接受数据 和vue一样
2，子传父，$emit 自定义事件，来传值 和vue 一样
---需求，兄弟组件传值 点击a组件的按钮，修改b组件的数据
》b组件
created(){
uni.$on（'updateNum',num=>{ 通过，unni.$on 注册一个全局事件，使用Num接受传来的参数
this.num +=num
}）
}
》a组件
<button @click=addNum"">按你牛</button>
methods:{
addNum(){
uni.$emit（"updateNum",10）
}
}
---【扩展组件uni-ui的使用】 详情官文 nui-ui
：是跨端ui库，基于vue组件的，flex布局的，无dom的跨全段ui库，不包括基础组件，是基础组件的补充
---【uni-ui的特点】：
1，高性能 是小程序和混合app领域，uni-ui是性能的标杆
2，自动差量更新数据
---【使用】：
1，选择组件 没登陆要登录一下 使用HBuilderX导入插件
2，使用import 来导入 components文件夹里的组件。然后挂载
3，使用方式和vue一样
rpx
推荐设计稿使用ipone的375px尺寸等于750rpx
设计稿得px转为rpx只需要乘2就可以了