base
- pages: 存放所有页面
- static: 静态资源
- unpackaged: 存放打包之后的文件
- App.vue: 页面的入口文件（调用生命周期函数）
- main.js: 项目的入口文件
- manifest.json: 配置打包之后的应用文件
- pages.json: 设置存放路径以及外观
- uni.scss: 常用的一些样式变量
规范
- vue单页面
pages.json
-
global: 全局配置，会被pages中的style覆盖 详细文档- [uniapp.dcloud.net.cn/collocation…
-
pages: 数组中第一项表示应用启动页
-
tabbar: 底部导航栏 底部2-5 设置在top时 不显示icon
-
condition:仅开发中可用，模拟用户转发后打开的页面
-
text: 有三个属性
-
view: 与div相似
-
button 3 attribute size/type/loading
-
image: 查阅手册
-
uni-app中的样式: uni-app中不能使用* / pages相当于body节点 / 支持使用iconfont 详细查手册
数据绑定
- 与Vue相同
v-bind & v-for
- v-bind: 可省略为: v-for= (item,index) in arr
生命周期
-
应用生命周期: onLaunch:初始化完成后触发 onShow: 后台进入前台显示 onHide: 前台进入后台 onError: 报错时触发
-
页面生命周期: onLoad:监听页面加载 onShow: 监听页面显示 onReady: 监听页面首次渲染完成 onHide:监听页面隐藏 onUpload: 监听页面卸载
下拉刷新
- onPullDownRefresh() 监听下拉刷新 uni.stopPullDownRefresh()终止刷新
上拉刷新
- onReachBottom() 方法监听触底事件 onReachBottomDistance 设置触底事件触发的距离
发送get请求
- 通过uni.request notice: 小程序需配置白名单
数据缓存
- 分别有四种不同功能的api set/get/remove/clear 也分为同步与异步，区别在于异步函数有一个回调函数，无论调用成功还是失败都会执行.
上传图片及预览
-
通过uni.chooseImage实现 attribute: count(最大上传照片数量 max:9) success方法中返回的object上的tempFilePaths为照片路径 notice: 需准备一个数组arr用来存放照片路径，但在success方法中this的指向为一个vue组件，所以此处用箭头函数可以解决this的指向问题
-
预览 通过uni.previewImage实现，主要有两个属性，分别是current:现在查看的图片链接 urls:图片链接列表
条件编译
- #ifdef H5/MP-WEIXIN/ #endif 只有xxx显示
- #ifndef xxx #endif 除了xxx都显示
跳转页面的两种方式
- navigator组件 url: 要跳转的链接 open-type:跳转的方式，默认为navigator. 跳转至有tabbar的页面需使用switchTab, redirect意味着重导向，会unload之前的页面
- uni.navigatorTo uni.redirectTo uni.switchTab
difference: www.jianshu.com/p/632455614…
如需传递参数 url后加？参数即可，在接受页面上用onload（参数）接受
组件的生命周期
- beforeCreate 在这个时候获取不到数据和methods，生命周期和事件初始化
- created 可以获取到数据以及methods 数据检测以及数据代理
- Beforemounted：vue开始解析模版，生成虚拟DOM，这时无法获取真实DOM
- mounted 可以获取到真实dom 一般在这个阶段开启定时器 发送网络请求 订阅消息 绑定自定义事件等
- BeforeUpdated 数据是新的，但页面还没有更新
- Updated 之前根据新数据生成的虚拟DOM进行比较，完成页面更新
- BeforeDestroyed：任何更改无效，取消定时器
组件间的通信
- 父给子传递值
for example data(){return{ title:'title'}} then 在子组件中通过props 来进行接收 即可使用
- 子给父传递值
for example methods:{ pass(){this.$emit('passA',this.num)} 父组件中 子组件标签中<@passA='method'> methods: method(e) 即可
- 组件间通信 主要通过uni.on 两个api完成 emit触发，on监听事件
