Uni-app 笔记_1
Uni-app 笔记
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
环境安装
按照 vue-cli 脚手架
npm install -g @vue/cli
创建demo
# 正式版本
vue create -p dcloudio/uni-preset-vue 项目名称
# 使用alpha版
vue create -p dcloudio/uni-preset-vue#alpha 项目名称
执行后选择模板，这边选择 默认模板(TypeScript) 完成进入项目，使用npm run serve运行
主要文件、目录
src: 主要编码目录
main.ts: 入口文件
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new App().$mount()
App.vue: 根文件
应用生命周期
| 函数名 | 说明 |
|---|---|
| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
| onUniNViewMessage | 对 nvue 页面发送的数据进行监听可参考 nvue 向 vue 通讯 |
| onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数（2.8.1+） |
| onPageNotFound | 页面不存在监听函数 |
| onThemeChange | 监听系统主题变化 |
应用生命周期仅可在App.vue中监听，在其它页面监听无效。
页面生命周期
| 函数名 | 说明 | 平台差异说明 | 最低版本 |
|---|---|---|---|
| onInit | 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad | 百度小程序 | 3.1.0+ |
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例 | ||
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 | ||
| onReady | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 | ||
| onHide | 监听页面隐藏 | ||
| onUnload | 监听页面卸载 | ||
| onResize | 监听窗口尺寸变化 | App、微信小程序 | |
| onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新，参考示例 | ||
| onReachBottom | 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项 | ||
| onTabItemTap | 点击 tab 时触发，参数为Object，具体见下方注意事项 | 微信小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式） | |
| onShareAppMessage | 用户点击右上角分享 | 微信小程序、百度小程序、字节跳动小程序、支付宝小程序 | |
| onPageScroll | 监听页面滚动，参数为Object | nvue暂不支持 | |
| onNavigationBarButtonTap | 监听原生标题栏按钮点击事件，参数为Object | App、H5 | |
| onBackPress | 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。 | app、H5、支付宝小程序 | |
| onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 | App、H5 | 1.6.0 |
| onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 | App、H5 | 1.6.0 |
| onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件 | App、H5 | 1.6.0 |
| onShareTimeline | 监听用户点击右上角转发到朋友圈 | 微信小程序 | 2.8.1+ |
| onAddToFavorites | 监听用户点击右上角收藏 | 微信小程序 | 2.8.1+ |
组件生命周期
uni-app 组件支持的生命周期，与vue标准组件相同。这里没有页面级的onLoad等生命周期：
| 函数名 | 说明 | 平台差异说明 | 最低版本 |
|---|---|---|---|
| beforeCreate | 在实例初始化之后被调用。详见 | ||
| created | 在实例创建完成后被立即调用。详见 | ||
| beforeMount | 在挂载开始之前被调用。详见 | ||
| mounted | 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档 |
||
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前。详见 | ||
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见 | ||
| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。详见 | ||
| destroyed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见 |
pages: 页面模板目录
一般以文件夹作为区分不同页面
static: 静态资源目录
manifest.json: 项目整体环境配置文件
pages.json: 页面配置文件
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。
{
"pages": [{
// pages[0] 为首页项
// 应用中新增/减少页面，都需要对 pages 数组进行修改
// 文件名不需要写后缀，框架会自动寻找路径下的页面资源
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件", // 导航栏名称
"enablePullDownRefresh": true, // 启用下拉刷新 触发 onPullDownRefresh() 钩子
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": {
//模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面，必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black", // 导航栏文字颜色 black/white
"navigationBarTitleText": "演示", // 导航栏全局Title
"navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色
"backgroundColor": "#F8F8F8", // APP 底部背景颜色
"onReachBottomDistance": 50 // 上拉多少 px 触发，上拉加载钩子 onReachBottom()
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
"rpxCalcMaxDeviceWidth": 960,
"rpxCalcBaseDeviceWidth": 375,
"rpxCalcIncludeWidth": 750
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"list": [{
"pagePath": "pages/component/index", // 对应的页面路径
"iconPath": "static/image/icon_component.png", // 默认图标
"selectedIconPath": "static/image/icon_component_HL.png", // action图标
"text": "组件" // 名称
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": {
"autoscan": true, //是否自动扫描组件
"custom": {
//自定义扫描规则
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue", // 导入uView UI
"^c-(.*)": "@/components/c-$1.vue", // 导入 Vue 组件
}
},
}
参考 pages.json配置
sfc.d.ts: ts声明文件
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
declare module 'uview-ui' // uView-Ui 声明
uni.scss: 全局样式
.gitignore: git 忽略
tsconfig.json: tslink
自己创建的目录
api: 接口文件夹
config: 系统配置文件夹
components: 组件文件夹
// pages.json 配置 easycom 进行全局导入
"easycom": {
"autoscan": true, //是否自动扫描组件
"custom": {
//自定义扫描规则
"^c-(.*)": "@/components/c-$1.vue", // 导入 Vue 组件
}
},