uni-app学习总结

一。创建好一个项目

commonents: 组件存放目录，存放组件

pages: 所有页面存放目录，存放.vue文件

static:静态资源目录，存放图片等

unpackage:打包目录，里面有各个平台的打包文件

App.vue: 页面入口文件，里面的内容会在每一个页面实现，可以设置公共样式等

main.js: 项目的入口文件，初始化vue实例并使用需要的插件

manifest.json: 应用的配置，指定应用的权限、名称、图标等

pages.json: 配置文件，对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

uni.css:为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

1.pages，
直接创建页面，创建好之后在page.json 中 pages:[]中定义

2.page.json 中 pages:[]
–> 每一个页面都需要在pages中定义，
其中style中若是存在和globalStyle中相同的配置项，则会覆盖掉下边globalStyle的配置项
pages数组中的第一项表示应用启动项，也就是项目的首页

3.page.json 中 globalStyle
–> 全局外观样式配置

4.pages.json 中 condition ：启动模式匹配
不通过相应路径的跳转，直接到达页面 ： 在浏览器中可以直接输入页面路径直接进入，在微信开发工具中需要手动改变编译模式。

– current:当前激活的模式，也就是list的索引项
– list：name:“模式名称”, path:“页面所属路径”

5. 基础内容组件
a.–> text 文本组件，相当于,里面只能嵌套text,行内元素
selecttable,user-select–>文本是否可选中
space–>设置空格显示,
decode -->是否解码

6.视图容器组件
a.–>view,相当于div
hover-class: 按下去的样式；
hover-start-time: 按下去多长时间发生改变
hover-stay-time: 样式变化维持多长时间
hover-stop-propagation: 是否阻止父元素跟随子元素发生变化而变化

7.表单组件
a.–>button
size: default(大)、mini(小)
type: primary(小程序，浏览器默认的),default（白色），warn(红色)
plain: 背景色透明
disables: 是否禁用
loading:

8.页面样式与布局
a.–>尺寸单位
支持px、rpx(响应式px) 。750px为屏幕宽度。但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，
App端，.json文件只支持px

b.–>样式导入
@import “相对路径”;
@import url(’’);

c.–>内联样式
style:接受动态的样式
class:类，根据类设置样式
支持各种选择器，但不支持*选择器
page相当于body

d.–>全局样式与局部样式
全局样式：定义在App.vue中的样式。
局部样式：定义在pages目录下的vue文件中的样式，只作用在本页面，同时会覆盖掉全局中相同的样式。

e.–>背景图片
微信小程序不支持相对路径

f.–>字体图标
字体文件的引用路径使用[email protected]开头的绝对路径
在引入的文件，修改路径

在全局引入 @import url();
在页面使用

g.–>uni.scss
可以使用该文件中定义的变量

8.基本的数据绑定
使用{ {}}

9.key属性
–>用于v-for中，如果列表中项目的位置会动态改变或者有新的项目添加到列表 中，并且希望列表中的项目能保持自己的状态（如 input 中的输入内容，switch 的选中状态） ，需要用到 :key来指定列表中项目的唯一标识符

:key 的值以两种形式提供
使用 v-for 循环 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

使用 v-for 循环中 item 本身，这时需要 item 本身是一个唯一的字符串或者数字
如不提供 :key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

10.v-on 。
传参，
$emit:访问元是的DOM事件，将本身的事件，通过$emit传给方法
@click=“onClick($emit)”

11.生命周期。
从开始创建到销毁的过程

a.–> 应用生命周期。
必须写在App.vue中监听
onLaunch --> 当uni-app初始化完成时触发（全局只触发一次）
onShow -->当uni-app启动，或从后台进入前台（从其他进入到该项目，如用浏览器运行打开该项目，只要从其他点切换到该浏览器页面，就会执行一次onShow）
onHide -->当从前台进入后台，离开该项目
onError -->当报错时触发

b. -->页面生命周期。
onInit 监听页面初始化，触发早于onLoad，也适用于页面传参
onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参） 参数：option 不会多次触发
onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。 不会多次触发。
onHide 监听页面隐藏
onUnlosd 监听页面隐藏卸载
onResize 监听窗口尺寸变化

下拉刷新：
onPullDownRefresh 监听用户下拉动作（下拉刷新）：
1.关闭全局刷新：关闭.json中"globalStyle"中的刷新(enablePullDownRefresh)，

2.开启页面刷新：在相应的页面的page下，开启刷新，

3.在相应页面中通过enablePullDowRefresh()来监听下拉事件，通过uni.stopPullDownRefresh()关闭刷新，为了有刷新结果，可以设置setTimeout,

4.还可以通过uni.startPullDownRefresh()绑定事件，开启刷新。

上拉加载
onReachBottom 页面滚动到底部的事件
1.在相应页面的style中 设置 onReachBottomDistance页面上拉触底事件触发时距底大小，默认是50

2.在相应页面中设置onReachButton 页面滚动事件

c. -->组件生命周期 （同vue生命周期）
beforeCreate 实例初始化之前调用
created
beforeMount 挂载开始之前调用
mounted
beforeUpdate 数据更新时调用
upadted
beforeDestory 实力销毁前调用
destroyed

12.发起请求
uni.request({url,data,success(),fail()})

13.数据缓存(本地缓存)
异步
uni.setStorage({key,data,success(),fail})
uni.getStorage({key,success(),fail()})
uni.removeStorage({key,success(),fail()})

同步
uni.setStorageSync(key,data)
uni.getStorageSync(key)
uni.removeStorageSync(key)

14.图片的上传和预览
图片的上传
uni.chooseImage({count,success(res.tempFilrPaths)})
图片的预览
图片添加点击事件，传参，item，事件（current）接收参数
uni.previewImage({current,urls})

15.条件编译，解决跨域兼容问题
// #ifdef 平台名称
平台特有的代码展示
// #endif
条件被编译是利用注释实现的，在不同的语法里注释不同 ，支持 .vue .js .css pages.json等的部分
例如：将轮播图封装封一个组件，在页面中调用，微信向程序和H5页面的图片地址就不同，

16.页面跳转
1.生命跳转 navigator

以上形式无法跳转至tabbar页面，必须设置 open-type=“switchTab”,
open-type =“redirect” --> 关闭当前页面，跳转到其他页面，也就是无法再返回上个页面

2.编程跳转
uni.navigateTo(url:‘跳转页面路径’) --> 保留当前页面，跳转到其他页面，能够返回上个页面
uni.switchTab(url:‘跳转tabbar页面路径’) --> 关闭其他所有非tabbar页面，跳转到其他页面
uni.redirectTo(url:‘跳转页面路径’) --> 关闭当前页面，跳转页面，无法返回上个页面

17.组件生命周期
使用组件 ，新建组件 --> 在使用组件页面引入import、注册components:{}、使用组件 <>
生命周期
beforeCreate 实例初始化之前调用
created 实例创建之后开始调用
beforeMount 挂载开始之前调用
mounted
beforeUpdate 数据更新时调用
upadted
beforeDestory 实力销毁前调用
destroyed

18.组件之间的通信方式
1.父传子 props
父组件，是页面.vue
子组件，是封装的组件.vue
1.父组件中定义要传的参数，之后在使用子组件中添加属性，属性值是参数名

2.子组件中通过propos[‘属性名’,’’],接收数据，通过{ {属性名}}，把它应用到组件上

**2.子传父$emit\ast \ast 1.子组件中，设置方法，通过$emit(‘方法1’,传的数据)

2.父组件中，添加@方法,方法名必须和$emit中第一个参数名相同，该方法通过传参将传递的参数接收。

3.兄弟组件之间的传递（如b传a）
a组件：
在生命周期的created中使用uni.$on{(}^{\prime }方法{名}^{\prime },回调函数（存在一个参数）)b组件：添加事件，通过uni.$emit(‘方法名’,传递的参数) ，

19.轮播图的实现
<swiper indicator-dots indicator-color:’’ indicator-active-color: >



20.地图展示
使用地图组件
longitude:经度， latitude:纬度， scale:缩放级别， markers:标记点

21.拨打电话
uni.makePhoneCall(phoneNumber:‘电话号’)

22.可滚动视图导航

scroll-x:横向滚动
scroll-y:竖向滚动
竖向滚动时，必须给设置一个固定高度

23.给使用v-for的view点击添加类
1.利用三元运算符
:class=" active==index? ‘类名’:’’ "

2.定义变量active,初始化
active:0

3.添加点击事件，将index传到该方法中
@click=‘atClick(index)’

4.事件接受传参
atClick(index){
this.active = index
}

24.图片的预览
uni.previewimage(current,urls)
urls 需要预览的图片链接列表，
current(当前图片的链接或索引值)，不填或者无效则默认是urls中的第一张

25.组件通信
在页面中点击跳转页面 --> （父传子）
在子组件中添加点击事件，点击事件，利用this.$emit(‘myEvent’)，将点击事件传给父页面，（之后就是父传子通信）

26.获取网页文本内容
直接获取则是H5内容，含各种标签
使用

27.页面的传参
通过路由与页面跳转uni.navigateTo和页面生命周期 onLoad来完成


onLoad 监听页面加载，其参数为上个页面传递的的数据，参数类型为Object
28.自定义tabBar组件
<custom-tab-bar direction=“选项的排列方向(horizontal/vertical)” show-icon=“是否显示icon(false/true)” selected=“选中的tabBar选项索引值” @onTabItemTap=“onTabItemTap”>


29.小程序的打包上线
打包上线要求所用的图片是线上图片，将本地图片上传到所用线上，直接使用
1.微信公众平台 注册 注册小程序 登录 点击开发 复制相应的AppID
2.在mainfest.json中的 微信小程序 填写 AppID
3.此时，微信开发工具中的上传是可点的
4. uti/api.js 修改接口地址域名 将所用的线上的服务器域名配置到微信公众平台的小程序开发
5.点击上传
6.首页，版本管理，开发版本
7.如果上线，点击提交审核

30.H5打包
1.在mainfest.json中的 H5 填写 页面标题、选择路由模式（hash、history）
2.点击发行H5手机版发行 点击发行 --> 项目打包 生成一个路径